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

package/fullscreen-image-carousel/fullscreen-image-carousel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-image-carousel.styles.js","sources":["../../src/fullscreen-image-carousel/fullscreen-image-carousel.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\n\n// =============================================================================\n// CSS VARIABLE TOKENS\n// =============================================================================\nexport const tokens = {\n    topActionButtons: {\n        insetTop:\n            \"--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop\",\n        insetLeft:\n            \"--fds-internal-fullscreenImageCarousel-topActionButtons-insetLeft\",\n        insetRight:\n            \"--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight\",\n    },\n    arrowButton: {\n        insetLeft:\n            \"--fds-internal-fullscreenImageCarousel-arrowButton-insetLeft\",\n        insetRight:\n            \"--fds-internal-fullscreenImageCarousel-arrowButton-insetRight\",\n    },\n    thumbnailContainer: {\n        insetBottom:\n            \"--fds-internal-fullscreenImageCarousel-thumbnailContainer-insetBottom\",\n    },\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const topActionButtons = css`\n    ${tokens.topActionButtons.insetTop}: initial;\n    ${tokens.topActionButtons.insetLeft}: initial;\n    ${tokens.topActionButtons.insetRight}: initial;\n\n    order: -1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    &[data-has-file-info=\"true\"] {\n        flex-shrink: 0;\n        background-color: ${Colour[\"bg-inverse\"]};\n        padding-top: calc(\n            ${Spacing[\"spacing-24\"]} +\n                var(${tokens.topActionButtons.insetTop}, 0px)\n        );\n        padding-bottom: ${Spacing[\"spacing-24\"]};\n        padding-left: calc(\n            ${Spacing[\"spacing-32\"]} +\n                var(${tokens.topActionButtons.insetLeft}, 0px)\n        );\n        padding-right: calc(\n            ${Spacing[\"spacing-32\"]} +\n                var(${tokens.topActionButtons.insetRight}, 0px)\n        );\n\n        ${MediaQuery.MaxWidth.sm} {\n            padding-top: calc(\n                ${Spacing[\"spacing-16\"]} +\n                    var(${tokens.topActionButtons.insetTop}, 0px)\n            );\n            padding-bottom: ${Spacing[\"spacing-16\"]};\n            padding-left: calc(\n                ${Spacing[\"spacing-20\"]} +\n                    var(${tokens.topActionButtons.insetLeft}, 0px)\n            );\n            padding-right: calc(\n                ${Spacing[\"spacing-20\"]} +\n                    var(${tokens.topActionButtons.insetRight}, 0px)\n            );\n        }\n    }\n\n    &[data-has-file-info=\"false\"] {\n        position: absolute;\n        top: calc(\n            ${Spacing[\"spacing-48\"]} +\n                var(${tokens.topActionButtons.insetTop}, 0px)\n        );\n        right: calc(\n            ${Spacing[\"spacing-48\"]} +\n                var(${tokens.topActionButtons.insetRight}, 0px)\n        );\n        z-index: 5;\n\n        ${MediaQuery.MaxWidth.sm} {\n            top: calc(\n                ${Spacing[\"spacing-20\"]} +\n                    var(${tokens.topActionButtons.insetTop}, 0px)\n            );\n            right: calc(\n                ${Spacing[\"spacing-20\"]} +\n                    var(${tokens.topActionButtons.insetRight}, 0px)\n            );\n        }\n    }\n`;\n\nexport const iconButton = css`\n    padding: 0;\n    border-radius: 100%;\n    background: ${Colour[\"bg\"]};\n    color: ${Colour[\"icon-primary\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    box-shadow: ${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: ${Border[\"width-020\"]} solid ${Colour[\"border-selected\"]};\n        outline-offset: 2px;\n    }\n`;\n\nexport const iconButtonError = css`\n    color: ${Colour[\"icon-error\"]};\n`;\n\nexport const arrowButton = css`\n    ${tokens.arrowButton.insetLeft}: initial;\n    ${tokens.arrowButton.insetRight}: initial;\n\n    z-index: 4;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n`;\n\nexport const arrowButtonLeft = css`\n    left: calc(\n        ${Spacing[\"spacing-48\"]} + var(${tokens.arrowButton.insetLeft}, 0px)\n    );\n\n    ${MediaQuery.MaxWidth.sm} {\n        left: calc(\n            ${Spacing[\"spacing-20\"]} + var(${tokens.arrowButton.insetLeft}, 0px)\n        );\n    }\n`;\n\nexport const arrowButtonRight = css`\n    right: calc(\n        ${Spacing[\"spacing-48\"]} +\n            var(${tokens.arrowButton.insetRight}, 0px)\n    );\n\n    ${MediaQuery.MaxWidth.sm} {\n        right: calc(\n            ${Spacing[\"spacing-20\"]} +\n                var(${tokens.arrowButton.insetRight}, 0px)\n        );\n        }\n    }\n`;\n\nexport const carouselModalContent = css`\n    position: relative;\n    width: 100%;\n    height: 100dvh;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const imageGalleryContainer = css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const imageGalleryWrapper = css`\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 = css`\n    display: block;\n    user-select: none;\n    height: 100%;\n    overflow: hidden;\n    touch-action: pan-y;\n`;\n\nexport const imageGallerySlides = css`\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 = css`\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 = css`\n    height: 100%;\n    width: 100%;\n    outline: none;\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-020\"]} solid ${Colour[\"border-selected\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const slideImage = css`\n    height: 100%;\n    width: 100%;\n    border-radius: ${Radius[\"none\"]};\n`;\n\nexport const slidePlaceholderImage = css`\n    width: 60vw;\n    height: auto;\n    max-height: 100%;\n    border-radius: ${Radius[\"none\"]};\n    aspect-ratio: 4 / 3;\n`;\n\nexport const boxChip = css`\n    display: flex;\n    justify-content: center;\n    padding: ${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 = css`\n    display: inline-flex;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-16\"]};\n    justify-content: center;\n    align-items: center;\n    border-radius: ${Radius[\"full\"]};\n    background-color: ${Colour[\"bg\"]};\n    text-align: center;\n`;\n\n// -----------------------------------------------------------------------------\n// THUMBNAIL STYLING\n// -----------------------------------------------------------------------------\n\nexport const thumbnailContainer = css`\n    ${tokens.thumbnailContainer.insetBottom}: initial;\n\n    flex-shrink: 0;\n    display: flex;\n    overflow: auto;\n    background-color: ${Colour[\"bg-inverse\"]};\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-16\"]}\n        calc(\n            ${Spacing[\"spacing-24\"]} +\n                var(${tokens.thumbnailContainer.insetBottom}, 0px)\n        );\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]}\n            calc(\n                ${Spacing[\"spacing-16\"]} +\n                    var(${tokens.thumbnailContainer.insetBottom}, 0px)\n            );\n    }\n`;\n\nexport const thumbnailWrapper = css`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n    justify-content: center;\n    margin-left: auto;\n    margin-right: auto;\n`;\n\nexport const thumbnailItemContainer = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100px;\n    width: 100px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: 64px;\n        width: 64px;\n    }\n`;\n\nexport const thumbnailItem = css`\n    cursor: pointer;\n    background-color: ${Colour[\"bg-inverse\"]};\n    border-radius: ${Radius[\"md\"]};\n    border: ${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    ${MediaQuery.MaxWidth.sm} {\n        height: 60px;\n        width: 60px;\n    }\n\n    &[data-active=\"true\"] {\n        border-width: ${Border[\"width-040\"]};\n        border-color: ${Colour[\"border-selected\"]};\n\n        ${MediaQuery.MaxWidth.sm} {\n            border-width: ${Border[\"width-020\"]};\n        }\n\n        &:hover {\n            border-color: ${Colour[\"border-selected-hover\"]};\n        }\n    }\n\n    &[data-active=\"false\"] {\n        border-width: ${Border[\"width-010\"]};\n\n        &:hover {\n            border-color: ${Colour[\"border-hover\"]};\n        }\n    }\n`;\n\nexport const thumbnailImage = css`\n    height: 100%;\n    width: 100%;\n`;\n\n// -----------------------------------------------------------------------------\n// FILE INFO BAR STYLING\n// -----------------------------------------------------------------------------\n\nexport const fileInfoTextWrapper = css`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-8\"]};\n    overflow: hidden;\n    min-width: 0;\n    min-height: calc(\n        ${Font.Spec[\"body-lh-baseline\"]} + ${Spacing[\"spacing-8\"]} +\n            ${Font.Spec[\"body-lh-md\"]}\n    );\n`;\n\nexport const fileInfoTextWrapperCentered = css`\n    justify-content: center;\n`;\n\nexport const fileInfoFileName = css`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n\nexport const fileInfoFileSize = css`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n"],"names":["tokens","topActionButtons","insetTop","insetLeft","insetRight","arrowButton","thumbnailContainer","insetBottom","iconButton","iconButtonError","arrowButtonLeft","arrowButtonRight","carouselModalContent","imageGalleryContainer","imageGalleryWrapper","imageGallerySwipe","imageGallerySlides","imageGallerySlide","focusableImageRegion","slideImage","slidePlaceholderImage","boxChip","chip","thumbnailWrapper","thumbnailItemContainer","thumbnailItem","thumbnailImage","fileInfoTextWrapper","fileInfoTextWrapperCentered","fileInfoFileName","fileInfoFileSize"],"mappings":"+FAeO,MAAMA,EAAS,CAClBC,iBAAkB,CACdC,SACI,mEACJC,UACI,oEACJC,WACI,sEAERC,YAAa,CACTF,UACI,+DACJC,WACI,iEAERE,mBAAoB,CAChBC,YACI,0EAQCN,EAAgB,WAsEhBO,EAAU,UAwBVC,EAAe,WAIfJ,EAAW,UAUXK,EAAe,WAYfC,EAAgB,WAehBC,EAAoB,WAQpBC,EAAqB,WAQrBC,EAAmB,UAUnBC,EAAiB,WAQjBC,EAAkB,UAUlBC,EAAiB,WAkBjBC,EAAoB,WAepBC,EAAU,UAMVC,EAAqB,UAQrBC,EAAO,WAaPC,EAAI,WAcJhB,EAAkB,WAsBlBiB,EAAgB,WAUhBC,EAAsB,WAatBC,EAAa,SA0CbC,EAAc,WASdC,EAAmB,UAanBC,EAA2B,WAI3BC,EAAgB,WAQhBC,EAAgB"}

package/fullscreen-image-carousel/fullscreen-image-carousel.styles_vc6y5c.css

@@ -0,0 +1,75 @@
+.t1d7v1ct{--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop:initial;--fds-internal-fullscreenImageCarousel-topActionButtons-insetLeft:initial;--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight:initial;-webkit-order:-1;-ms-flex-order:-1;order:-1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;gap:var(--fds-spacing-16);}.t1d7v1ct[data-has-file-info="true"]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;background-color:var(--fds-colour-bg-inverse);padding-top:calc(
+            var(--fds-spacing-24) +
+                var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop, 0px)
+        );padding-bottom:var(--fds-spacing-24);padding-left:calc(
+            var(--fds-spacing-32) +
+                var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetLeft, 0px)
+        );padding-right:calc(
+            var(--fds-spacing-32) +
+                var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight, 0px)
+        );}:where(body.fds-breakpoint-sm-max) .t1d7v1ct[data-has-file-info="true"]{padding-top:calc(
+                var(--fds-spacing-16) +
+                    var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop, 0px)
+            );padding-bottom:var(--fds-spacing-16);padding-left:calc(
+                var(--fds-spacing-20) +
+                    var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetLeft, 0px)
+            );padding-right:calc(
+                var(--fds-spacing-20) +
+                    var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight, 0px)
+            );}.t1d7v1ct[data-has-file-info="false"]{position:absolute;top:calc(
+            var(--fds-spacing-48) +
+                var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop, 0px)
+        );right:calc(
+            var(--fds-spacing-48) +
+                var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight, 0px)
+        );z-index:5;}:where(body.fds-breakpoint-sm-max) .t1d7v1ct[data-has-file-info="false"]{top:calc(
+                var(--fds-spacing-20) +
+                    var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop, 0px)
+            );right:calc(
+                var(--fds-spacing-20) +
+                    var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight, 0px)
+            );}
+.ijhrw4g{padding:0;border-radius:100%;background:var(--fds-colour-bg);color:var(--fds-colour-icon-primary);height:2.5rem;width:2.5rem;box-shadow:var(--fds-shadow-md-strong);}.ijhrw4g svg{height:1.5rem;width:1.5rem;}.ijhrw4g:focus{outline:none;}.ijhrw4g:focus-visible{outline:var(--fds-border-width-020) solid var(--fds-colour-border-selected);outline-offset:2px;}
+.i19oam1e{color:var(--fds-colour-icon-error);}
+.aay3qsa{--fds-internal-fullscreenImageCarousel-arrowButton-insetLeft:initial;--fds-internal-fullscreenImageCarousel-arrowButton-insetRight:initial;z-index:4;position:absolute;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
+.a1mt5dqp{left:calc(
+        var(--fds-spacing-48) + var(--fds-internal-fullscreenImageCarousel-arrowButton-insetLeft, 0px)
+    );}:where(body.fds-breakpoint-sm-max) .a1mt5dqp{left:calc(
+            var(--fds-spacing-20) + var(--fds-internal-fullscreenImageCarousel-arrowButton-insetLeft, 0px)
+        );}
+.a1nolxbp{right:calc(
+        var(--fds-spacing-48) +
+            var(--fds-internal-fullscreenImageCarousel-arrowButton-insetRight, 0px)
+    );}:where(body.fds-breakpoint-sm-max) .a1nolxbp{right:calc(
+            var(--fds-spacing-20) +
+                var(--fds-internal-fullscreenImageCarousel-arrowButton-insetRight, 0px)
+        );}
+.c1w96xh3{position:relative;width:100%;height:100dvh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.i1cp8dqy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;-webkit-flex:1;-ms-flex:1;flex:1;min-height:0;}
+.ifd12u9{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;overflow:hidden;width:100%;-webkit-flex:1;-ms-flex:1;flex:1;min-height:0;}
+.i1pu33mh{display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:100%;overflow:hidden;touch-action:pan-y;}
+.iwm8xb6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition:all 450ms ease-out 0s;transition:all 450ms ease-out 0s;position:relative;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;height:100%;}
+.i1p6ye8c{-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.i1p6ye8c .react-transform-wrapper{height:100%;width:100%;}.i1p6ye8c .react-transform-component{height:100%;width:100%;}
+.f1wd1tos{height:100%;width:100%;outline:none;}.f1wd1tos:focus{outline:none;}.f1wd1tos:focus-visible{outline:var(--fds-border-width-020) solid var(--fds-colour-border-selected);outline-offset:-2px;}
+.sd4ndfo{height:100%;width:100%;border-radius:var(--fds-radius-none);}
+.sd6bpod{width:60vw;height:auto;max-height:100%;border-radius:var(--fds-radius-none);aspect-ratio:4/3;}
+.b1y1lz2m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:var(--fds-spacing-16);position:absolute;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;z-index:3;}
+.c1q4y0yr{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:var(--fds-spacing-4) var(--fds-spacing-16);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:var(--fds-radius-full);background-color:var(--fds-colour-bg);text-align:center;}
+.t12djler{--fds-internal-fullscreenImageCarousel-thumbnailContainer-insetBottom:initial;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;overflow:auto;background-color:var(--fds-colour-bg-inverse);padding:var(--fds-spacing-24) var(--fds-spacing-16) calc(
+            var(--fds-spacing-24) +
+                var(--fds-internal-fullscreenImageCarousel-thumbnailContainer-insetBottom, 0px)
+        );}:where(body.fds-breakpoint-sm-max) .t12djler{padding:var(--fds-spacing-16) var(--fds-spacing-20) calc(
+                var(--fds-spacing-16) +
+                    var(--fds-internal-fullscreenImageCarousel-thumbnailContainer-insetBottom, 0px)
+            );}
+.t15s3u6v{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-16);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-left:auto;margin-right:auto;}
+.t137aivh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;height:100px;width:100px;}:where(body.fds-breakpoint-sm-max) .t137aivh{height:64px;width:64px;}
+.tlwncl{cursor:pointer;background-color:var(--fds-colour-bg-inverse);border-radius:var(--fds-radius-md);border:var(--fds-border-style-solid) transparent;box-sizing:content-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;height:92px;width:92px;}:where(body.fds-breakpoint-sm-max) .tlwncl{height:60px;width:60px;}.tlwncl[data-active="true"]{border-width:var(--fds-border-width-040);border-color:var(--fds-colour-border-selected);}:where(body.fds-breakpoint-sm-max) .tlwncl[data-active="true"]{border-width:var(--fds-border-width-020);}.tlwncl[data-active="true"]:hover{border-color:var(--fds-colour-border-selected-hover);}.tlwncl[data-active="false"]{border-width:var(--fds-border-width-010);}.tlwncl[data-active="false"]:hover{border-color:var(--fds-colour-border-hover);}
+.t1uearuq{height:100%;width:100%;}
+.fytebwh{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-8);overflow:hidden;min-width:0;min-height:calc(
+        var(--fds-font-body-lh-baseline) + var(--fds-spacing-8) +
+            var(--fds-font-body-lh-md)
+    );}
+.f1ysk79e{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.f1cpwiz6{color:var(--fds-colour-text-inverse);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
+.f17g5ble{color:var(--fds-colour-text-inverse);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}

package/fullscreen-image-carousel/index.js

@@ -1,2 +1,2 @@
-export{FullscreenImageCarousel}from"./fullscreen-image-carousel.js";
+export{Component,FullscreenImageCarousel}from"./fullscreen-image-carousel.js";
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-import{jsx as i}from"react/jsx-runtime";import{useState as o,useEffect as t}from"react";import{LoadingDots as n}from"../animations/loading-dots/loading-dots.js";import"../animations/loading-dots-spinner/loading-dots-spinner.js";import"../animations/loading-spinner/loading-spinner.js";import"styled-components";import{ImageWrapper as s,DefaultPlaceholder as r,ImageBox as e}from"./stateful-image.style.js";const a=({src:a,className:m,alt:l,fit:d,placeholder:c,retrieveImageDimension:p,setDimension:g})=>{const[h,f]=o(!0),[j,u]=o();t((()=>{f(!0),u(void 0);const i=new Image;i.src=a,i.onload=()=>{p&&g&&g({src:a,width:i.width,height:i.height}),f(!1)},i.onerror=i=>{f(!1),u(i)}}),[a]);return i(s,{className:m,children:j?null!=c?c:i(r,{}):h?i(n,{}):i(e,{src:a,alt:l,$fit:d})})};export{a as StatefulImage};
+import{jsx as e}from"react/jsx-runtime";import t from"clsx";import{useState as o,useRef as i,useEffect as s}from"react";import{LoadingDots as r}from"../animations/loading-dots/loading-dots.js";import"../animations/loading-dots-spinner/loading-dots-spinner.js";import"../animations/loading-spinner/loading-spinner.js";import"../theme/theme-provider/context.js";import{ImagePlaceholder as m}from"../shared/image-placeholder/image-placeholder.js";import"../theme/theme-provider/index.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as n}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{tokens as a,imageWrapper as l,defaultPlaceholder as p,imageBox as d}from"./stateful-image.styles.js";const h=({src:h,className:c,alt:g,fit:j,placeholder:f,retrieveImageDimension:u,setDimension:x})=>{const[v,y]=o(!0),[k,N]=o(),w=i(null);n(w,{[a.imageBox.fit]:j}),s((()=>{y(!0),N(void 0);const e=new Image;e.src=h,e.onload=()=>{u&&x&&x({src:h,width:e.width,height:e.height}),y(!1)},e.onerror=e=>{y(!1),N(e)}}),[h]);return e("div",{className:t(l,c),children:k?null!=f?f:e(m,{className:p}):v?e(r,{}):e("img",{ref:w,src:h,alt:g,className:d})})};export{h as StatefulImage};
 //# sourceMappingURL=stateful-image.js.map

package/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":["StatefulImage","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":"4ZA4BaA,EAAgB,EACzBC,MACAC,YACAC,MACAC,MACAC,cACAC,yBACAC,mBAEA,MAAOC,EAASC,GAAcC,GAAS,IAChCC,EAAOC,GAAYF,IAE1BG,GAAU,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,EAACC,EAAY,CAACrB,UAAWA,EAASsB,SAXjCb,EACON,QAAAA,EAAeiB,EAACG,EAAkB,IAGzCjB,EACOc,EAACI,EAAW,IAGhBJ,EAACK,EAAQ,CAAC1B,IAAKA,EAAKE,IAAKA,EAAGyB,KAAQxB,KAG4B"}
+{"version":3,"file":"stateful-image.js","sources":["../../src/fullscreen-image-carousel/stateful-image.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { LoadingDots } from \"../animations\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./stateful-image.styles\";\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    const imageRef = useRef<HTMLImageElement>(null);\n\n    useApplyStyle(imageRef, {\n        [styles.tokens.imageBox.fit]: fit,\n    });\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 (\n                placeholder ?? (\n                    <ImagePlaceholder className={styles.defaultPlaceholder} />\n                )\n            );\n        }\n\n        if (loading) {\n            return <LoadingDots />;\n        }\n\n        return (\n            <img\n                ref={imageRef}\n                src={src}\n                alt={alt}\n                className={styles.imageBox}\n            />\n        );\n    };\n\n    return (\n        <div className={clsx(styles.imageWrapper, className)}>\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["StatefulImage","src","className","alt","fit","placeholder","retrieveImageDimension","setDimension","loading","setLoading","useState","error","setError","imageRef","useRef","useApplyStyle","styles.tokens","imageBox","useEffect","undefined","img","Image","onload","width","height","onerror","e","_jsx","clsx","styles.imageWrapper","children","ImagePlaceholder","styles.defaultPlaceholder","LoadingDots","ref","styles.imageBox"],"mappings":"+0BA2BaA,EAAgB,EACzBC,MACAC,YACAC,MACAC,MACAC,cACAC,yBACAC,mBAEA,MAAOC,EAASC,GAAcC,GAAS,IAChCC,EAAOC,GAAYF,IACpBG,EAAWC,EAAyB,MAE1CC,EAAcF,EAAU,CACpB,CAACG,EAAcC,SAASb,KAAMA,IAGlCc,GAAU,KACNT,GAAW,GACXG,OAASO,GAET,MAAMC,EAAM,IAAIC,MAChBD,EAAInB,IAAMA,EACVmB,EAAIE,OAAS,KACHhB,GAA0BC,GAC5BA,EAAa,CACTN,MACAsB,MAAOH,EAAIG,MACXC,OAAQJ,EAAII,SAIpBf,GAAW,EAAM,EAErBW,EAAIK,QAAWC,IACXjB,GAAW,GACXG,EAASc,EAAE,CACd,GACF,CAACzB,IAyBJ,OACI0B,EAAA,MAAA,CAAKzB,UAAW0B,EAAKC,EAAqB3B,GAAU4B,SAvBhDnB,EAEIN,QAAAA,EACIsB,EAACI,EAAgB,CAAC7B,UAAW8B,IAKrCxB,EACOmB,EAACM,EAAW,IAInBN,SACIO,IAAKrB,EACLZ,IAAKA,EACLE,IAAKA,EACLD,UAAWiC,KAQb"}

package/fullscreen-image-carousel/stateful-image.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const tokens: {
+    imageBox: {
+        fit: string;
+    };
+};
+export declare const imageWrapper: import("@linaria/core").LinariaClassName;
+export declare const imageBox: import("@linaria/core").LinariaClassName;
+export declare const defaultPlaceholder: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./stateful-image.styles_1xe8ypm.css";const e={imageBox:{fit:"--fds-internal-fullscreenImageCarousel-statefulImage-imageBox-fit"}},s="i1h1mxc8",a="i1k1jgcv",t="d1w2ubkx";export{t as defaultPlaceholder,a as imageBox,s as imageWrapper,e as tokens};
+//# sourceMappingURL=stateful-image.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stateful-image.styles.js","sources":["../../src/fullscreen-image-carousel/stateful-image.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const tokens = {\n    imageBox: {\n        fit: \"--fds-internal-fullscreenImageCarousel-statefulImage-imageBox-fit\",\n    },\n};\n\nexport const imageWrapper = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\nexport const imageBox = css`\n    /* Reset variable to prevent leaking to child components */\n    ${tokens.imageBox.fit}: initial;\n\n    height: 100%;\n    width: 100%;\n    object-fit: var(${tokens.imageBox.fit}, contain);\n`;\n\nexport const defaultPlaceholder = css`\n    width: 100%;\n    height: 100%;\n`;\n"],"names":["tokens","imageBox","fit","imageWrapper","defaultPlaceholder"],"mappings":"qFAEO,MAAMA,EAAS,CAClBC,SAAU,CACNC,IAAK,sEAIAC,EAAY,WAMZF,EAAQ,WASRG,EAAkB"}

package/fullscreen-image-carousel/stateful-image.styles_1xe8ypm.css

@@ -0,0 +1,3 @@
+.i1h1mxc8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.i1k1jgcv{--fds-internal-fullscreenImageCarousel-statefulImage-imageBox-fit:initial;height:100%;width:100%;object-fit:var(--fds-internal-fullscreenImageCarousel-statefulImage-imageBox-fit, contain);}
+.d1w2ubkx{width:100%;height:100%;}

package/fullscreen-image-carousel/types.d.ts

@@ -7,22 +7,42 @@ export interface FullscreenImageCarouselRef {
     goToNextItem: () => void;
 }
 export interface FullscreenImageCarouselProps extends Pick<ModalProps, "show" | "rootComponentId" | "animationFrom" | "zIndex"> {
-    items: FullscreenCarouselItemProps[];
+    items: FullscreenImageCarouselItemProps[];
     /** The index of the visible item, starts from 0 */
     initialActiveItemIndex?: number | undefined;
     hideThumbnail?: boolean | undefined;
     hideNavigation?: boolean | undefined;
     hideCounter?: boolean | undefined;
     hideMagnifier?: boolean | undefined;
+    onDelete?: ((item: FullscreenImageCarouselItemProps, index: number) => void) | undefined;
     onClose?: (() => void) | undefined;
     insets?: Insets | undefined;
 }
-export interface FullscreenCarouselItemProps {
+interface FullscreenImageCarouselBaseItemProps {
+    fileName?: string | undefined;
+    fileSize?: string | undefined;
+}
+export interface FullscreenImageCarouselImageItemProps extends FullscreenImageCarouselBaseItemProps {
+    type?: "image" | undefined;
     src: string;
     alt?: string | undefined;
     thumbnailSrc?: string | undefined;
+    renderContent?: never;
+}
+/** @deprecated Use FullscreenImageCarouselImageItemProps instead */
+export type FullscreenCarouselItemProps = FullscreenImageCarouselImageItemProps;
+export interface FullscreenImageCarouselCustomItemProps extends FullscreenImageCarouselBaseItemProps {
+    type: "custom";
+    /** The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip. */
+    thumbnailSrc?: string | undefined;
+    /** Label for this item used in aria-labels (e.g. "PDF"). Defaults to "image". When any item sets this, carousel-level aria-labels use generic "item" wording. */
+    itemLabel?: string | undefined;
+    /** Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). */
+    renderContent: () => React.ReactNode;
 }
+export type FullscreenImageCarouselItemProps = FullscreenImageCarouselImageItemProps | FullscreenImageCarouselCustomItemProps;
 export interface ImageDimension {
     width: number;
     height: number;
 }
+export {};

package/histogram-slider/histogram-slider.d.ts

@@ -1,2 +1,2 @@
 import type { HistogramSliderProps } from "./types";
-export declare const HistogramSlider: ({ bins, interval, disabled, readOnly, value, showRangeLabels, rangeLabelPrefix, rangeLabelSuffix, ariaLabels, onChange, onChangeEnd, renderEmptyView, renderRangeLabel, ...otherProps }: HistogramSliderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HistogramSlider: ({ bins, interval, disabled, readOnly, value, showRangeLabels, rangeLabelPrefix, rangeLabelSuffix, ariaLabels, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onChange, onChangeEnd, renderEmptyView, renderRangeLabel, className, ...otherProps }: HistogramSliderProps) => import("react/jsx-runtime").JSX.Element;

package/histogram-slider/histogram-slider.js

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

package/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":["HistogramSlider","_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":"wUAYO,MAAMA,EAAmBC,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,EAAAf,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,EAC9BC,KAGEC,EAAQC,GAAQ,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,GAAU,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,EAACC,EAAWC,OAAM,CAAAC,SAAA,CACb7C,EACAF,EACAG,KA6Cb,OACIyC,yBAASnC,EAAU,CAAAsC,SAAA,CACd9C,GACG2C,EAACI,EAAK,CAAAD,SAAA,CACDJ,EAAgBrB,EAAU,IAC3B2B,EAACC,EAAS,CAAAH,SAAA,MACTJ,EAAgBrB,EAAU,OAGlCI,EAAMyB,OAAOtC,GAAwB,IAAfA,EAAKC,SAAgBP,EACtCA,IAhDNqC,EAAAQ,EAAA,CAAAL,SAAA,CACIE,EAACI,YACI3B,EAAMd,KAAI,CAACC,EAAMoB,KACd,MAAMqB,EAAQzC,EAAKC,MAAQC,EAC3B,OACIkC,EAACM,EAAG,CAEAC,MAAO,CACHC,OAAQH,EACF,+BAA+BA,eAC/B,GACTI,UAEG7C,EAAKM,UAAYG,EAAU,IAC3BT,EAAKM,SAAWG,EAAU,GAAEqC,UAErB7D,GAAYC,GAVlBkC,EAWP,MAIdgB,EAACW,GACGvC,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":["HistogramSlider","_a","bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","ariaLabelledBy","ariaDescribedBy","onChange","onChangeEnd","renderEmptyView","renderRangeLabel","className","otherProps","__rest","counts","map","item","count","maxCount","Math","max","values","minValue","maxValue","min","selection","setSelection","useState","initSelection","internalId","useId","announcementTimeoutRef","useRef","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","_jsx","styles.separator","every","selectionDescription","_Fragment","styles.histogram","HistogramBar","isSelected","isDisabled","InputRangeSlider","step","minRange","numOfThumbs","ariaDescriptions","styles.slider","renderHistogramSlider","ratio","barRef","useApplyStyle","height","clsx","styles.bar","styles.barSelectedDisabled","styles.barDisabled","styles.barSelected","ref"],"mappings":"umCAYA,MAEaA,EAAmBC,IAAA,IAAAC,KAC5BA,EAAO,GAAEC,SACTA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,MACRA,EAAKC,gBACLA,EAAeC,iBACfA,EAAgBC,iBAChBA,EAAgBC,WAChBA,EACA,kBAAmBC,EACnB,mBAAoBC,EAAeC,SACnCA,EAAQC,YACRA,EAAWC,gBACXA,EAAeC,iBACfA,EAAgBC,UAChBA,GAAShB,EACNiB,EAAUC,EAAAlB,EAjBe,uOAsB5B,MAAMmB,EAASlB,EAAKmB,KAAKC,GAASA,EAAKC,QACjCC,EAAWC,KAAKC,OAAON,GAEvBO,EAASzB,EAAKmB,KAAKC,GAASA,EAAKM,WACjCC,EAAWJ,KAAKC,OAAOC,GACvBC,EAAWH,KAAKK,OAAOH,IAEtBI,EAAWC,GAAgBC,EAC9BC,KAEEC,EAAaC,IACbC,EAAyBC,EAC3B,MAEEC,EAAe,GAAGJ,gBAClBK,EAAoBC,EACtB7B,EACAL,EAAkBgC,OAAeG,GAG/BC,EAAQC,GAAQ,KAClB,MAAMC,EAAS,IAAI3C,GAAM4C,MAAK,CAACC,EAAGC,IAAMD,EAAEnB,SAAWoB,EAAEpB,WACjDqB,GAAWpB,EAAWD,GAAYzB,EAAW,EAE7CwC,EAAuB,GAC7B,IAAK,IAAIO,EAAI,EAAGA,EAAID,EAASC,IAAK,CAC9B,MAAMC,EAAMN,EAAOO,MACdJ,GAAMA,EAAEpB,WAAaA,EAAWzB,EAAW+C,IAE5CC,EACAR,EAAMU,KAAKF,GAEXR,EAAMU,KAAK,CAAE9B,MAAO,EAAGK,SAAUA,EAAWzB,EAAW+C,GAE/D,CACA,OAAOP,CAAK,GACb,CAACzC,EAAMC,IAKVmD,GAAU,KACFhD,IAAUyB,GACVC,EAAaE,IACjB,GACD,CAAC5B,IAEJgD,GAAU,IACC,KACHC,GAA0B,GAE/B,IAKH,MAAMC,EAAgB7B,IAClB,MAAO8B,EAAMC,GAAQ/B,EACfgC,EAAiC,CAACF,EAAMC,GAC9C1B,EAAa2B,GACbC,GAAoCD,GACpC9C,SAAAA,EAAW8C,EAAa,EAGtBE,EAAmBlC,IACrB,MAAO8B,EAAMC,GAAQ/B,EACfgC,EAAiC,CAACF,EAAMC,GAC9C1B,EAAa2B,GACbC,GAAoCD,GACpC7C,SAAAA,EAAc6C,EAAa,EAM/B,SAASzB,IACL,OAAO5B,QAAAA,EAAS,CAACsB,EAAUA,EAAWzB,EAC1C,CAEA,SAASoD,IACDlB,EAAuByB,UACvBC,aAAa1B,EAAuByB,SACpCzB,EAAuByB,QAAU,KAEzC,CAEA,SAASE,EAA8BC,GACnC,MAAMC,EAAavB,EAAMwB,QAAO,CAACC,EAAK9C,IAAS8C,EAAM9C,EAAKC,OAAO,GAEjE,GAAmB,IAAf2C,EACA,MAAO,sDAGX,MAAMG,EAAgB1B,EAAMwB,QAAO,CAACC,EAAK9C,IAEjCA,EAAKM,UAAYqC,EAAiB,IAClC3C,EAAKM,SAAWqC,EAAiB,GAEjBG,EAAM9C,EAAKC,MAAQ6C,GACxC,GAIH,MAAO,GAFY3C,KAAK6C,MAAOD,EAAgBH,EAAc,wDAGjE,CAEA,SAASN,GACLK,GAEA,GAAI7D,GAAYC,EACZ,OAGJ,MAAMkE,EAAeP,EAA8BC,GAEnDV,IAEAlB,EAAuByB,QAAUU,YAAW,KACxCC,EAAe,UACfC,EAASH,EAAc,SAAS,GA/IX,IAiJ7B,CAKA,MAAMI,GAAmBrE,GACjBU,EACOA,EAAiBV,GAGxBsE,EAACC,EAAWC,OAAM,CAAAC,SAAA,CACbvE,EACAF,EACAG,KAgDb,OACImE,EAAA,MAAAI,OAAAC,OAAA,CAAKC,KAAK,SAAYhE,EAAU,CAAED,UAAWA,EAAS8D,SAAA,CACjDxE,GACGqE,EAAA,MAAA,CAAKO,GAAI5C,EAActB,UAAWmE,EAAYL,SAAA,CACzCJ,GAAgB5C,EAAU,IAC3BsD,EAAA,MAAA,CAAKpE,UAAWqE,iBACfX,GAAgB5C,EAAU,OAGlCY,EAAM4C,OAAOjE,GAAwB,IAAfA,EAAKC,SAAgBR,EACtCA,IArDgB,MAC1B,MAAMyE,EAAuBxB,EAA8BjC,GAE3D,OACI6C,EAAAa,EAAA,CAAAV,SAAA,CACIM,EAAA,MAAA,CAAKpE,UAAWyE,EAAgBX,SAC3BpC,EAAMtB,KAAI,CAACC,EAAM4B,IACdmC,EAACM,EAAY,CAETrE,KAAMA,EACNE,SAAUA,EACVoE,WACItE,EAAKM,UAAYG,EAAU,IAC3BT,EAAKM,SAAWG,EAAU,GAE9B8D,WAAYzF,GAAYC,GAPnB6C,OAWjBmC,EAACS,EAAgB,CACbhE,IAAKF,EACLF,IAAKG,EAAW1B,EAChB4F,KAAM5F,EACN6F,SAAU7F,EACV8F,YAAa,EACb3F,MAAOyB,EACP3B,SAAUA,EACVC,SAAUA,EACVK,WAAYA,EACZwF,iBAAkB,CACdV,EACAA,GACH,mBACiBhD,oBACD7B,EACjBE,SAAU2C,EACV1C,YAAa+C,EACb5C,UAAWkF,MAEhB,EAeGC,MACJ,EAcRT,EAAe,EACjBrE,OACAE,WACAoE,aACAC,iBAEA,MAAMQ,EAAQ/E,EAAKC,MAAQC,EACrB8E,EAAShE,EAAuB,MAMtC,OAJAiE,EAAcD,EAAQ,CAClBE,OAAQH,EAAQ,+BAA+BA,eAAqB,MAIpEhB,EAAA,MAAA,CAAA,cACgB,gBACZpE,UAAWwF,EACPC,EACAb,GAAcD,GAAce,EAC5Bd,GAAce,EACdhB,GAAciB,GAElBC,IAAKR,GACP"}

package/histogram-slider/histogram-slider.styles.d.ts

@@ -1,10 +1,8 @@
-interface BarStyleProps {
-    $selected: boolean;
-    $disabled: boolean | undefined;
-}
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Histogram: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Bar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BarStyleProps>> & string;
-export declare const Slider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").InputRangeSliderProps, never>> & string & Omit<({ value, min, max, step, minRange, numOfThumbs, colors, disabled, readOnly, ariaLabels, showSliderLabels, sliderLabelPrefix, sliderLabelSuffix, showIndicatorLabel, indicatorLabelPrefix, indicatorLabelSuffix, renderSliderLabel, onChange, onChangeEnd, ...otherProps }: import("..").InputRangeSliderProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const separator: import("@linaria/core").LinariaClassName;
+export declare const histogram: import("@linaria/core").LinariaClassName;
+export declare const bar: import("@linaria/core").LinariaClassName;
+export declare const barDisabled: import("@linaria/core").LinariaClassName;
+export declare const barSelected: import("@linaria/core").LinariaClassName;
+export declare const barSelectedDisabled: import("@linaria/core").LinariaClassName;
+export declare const slider: import("@linaria/core").LinariaClassName;

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

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

package/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":"0MAUO,MAAMA,EAAQC,EAAOC,GAAG;;qBAEVC,EAAW;;EAInBC,EAAYH,EAAOC,GAAG;;EAItBG,EAAYJ,EAAOC,GAAG;;;;;;EAQtBI,EAAML,EAAOC,GAAkB;;qBAEvBK,EAAc,MAAKA,EAAc;;;;MAI/CC,IACC,IAAIC,EAAQC,EAAU,gBAQtB,OAPIF,EAAMG,WAAaH,EAAMI,UACzBH,EAAQC,EAAU,iCACXF,EAAMG,UACbF,EAAQC,EAAU,eACXF,EAAMI,YACbH,EAAQC,EAAU,yBAEfG,CAAG;gCACcJ;SACvB;EAIIK,EAASb,EAAOc,EAAiB;;"}
+{"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":["label","separator","histogram","bar","barDisabled","barSelected","barSelectedDisabled","slider"],"mappings":"4EAIO,MAAMA,EAAK,WAMLC,EAAS,WAITC,EAAS,UAQTC,EAAG,WAQHC,EAAW,WAIXC,EAAW,UAIXC,EAAmB,UAInBC,EAAM"}

package/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/histogram-slider/types.d.ts

@@ -16,6 +16,8 @@ export interface HistogramSliderProps {
     rangeLabelPrefix?: string | undefined;
     rangeLabelSuffix?: string | undefined;
     ariaLabels?: [string, string] | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-describedby"?: string | undefined;
     renderRangeLabel?: ((value: number) => React.ReactNode) | undefined;
     /** Called on every selection change. Returns the value in the format `[start, end]` */
     onChange?: ((value: [number, number]) => void) | undefined;

package/image-button/image-button.js

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

package/image-button/image-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-button.js","sources":["../../src/image-button/image-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { ButtonRef } from \"../button/types\";\nimport { ImageWithFallback } from \"../shared/image-with-fallback/image-with-fallback\";\nimport { Main } from \"./image-button.style\";\nimport type { ImageButtonProps } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        imgSrc,\n        selected,\n        error,\n        type = \"button\",\n        disabled = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    }: ImageButtonProps,\n    ref: ButtonRef\n) => {\n    return (\n        <Main\n            ref={ref}\n            $disabled={disabled}\n            $selected={selected}\n            $error={error}\n            type={type}\n            aria-disabled={disabled}\n            disabled={disabled && !focusableWhenDisabled}\n            onClick={disabled ? undefined : onClick}\n            {...otherProps}\n        >\n            <ImageWithFallback src={imgSrc} />\n            {children}\n        </Main>\n    );\n};\n\nexport const ImageButton = React.forwardRef(Component);\n"],"names":["ImageButton","React","forwardRef","_a","ref","children","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick","otherProps","__rest","_jsxs","Main","Object","assign","$disabled","$selected","$error","undefined","_jsx","ImageWithFallback","src"],"mappings":"8PAOA,MAgCaA,EAAcC,EAAMC,YAhCf,CACdC,EAWAC,SAXAC,SACIA,EAAQC,OACRA,EAAMC,SACNA,EAAQC,MACRA,EAAKC,KACLA,EAAO,SAAQC,SACfA,GAAW,EAAKC,sBAChBA,GAAwB,EAAKC,QAC7BA,GAAOT,EACJU,EAAUC,EAAAX,EATjB,CAAA,WAAA,SAAA,WAAA,QAAA,OAAA,WAAA,wBAAA,YAaA,OACIY,EAACC,EAAIC,OAAAC,OAAA,CACDd,IAAKA,EAAGe,UACGT,EAAQU,UACRb,EAAQc,OACXb,EACRC,KAAMA,EAAI,gBACKC,EACfA,SAAUA,IAAaC,EACvBC,QAASF,OAAWY,EAAYV,GAC5BC,aAEJU,EAACC,EAAiB,CAACC,IAAKnB,IACvBD,KACE"}
+{"version":3,"file":"image-button.js","sources":["../../src/image-button/image-button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport type { ButtonRef } from \"../button/types\";\nimport { ImageWithFallback } from \"../shared/image-with-fallback/image-with-fallback\";\nimport * as styles from \"./image-button.styles\";\nimport type { ImageButtonProps } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        className,\n        imgSrc,\n        selected,\n        error,\n        type = \"button\",\n        disabled = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    }: ImageButtonProps,\n    ref: ButtonRef\n) => {\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    return (\n        <button\n            ref={ref}\n            type={type}\n            aria-disabled={disabled}\n            disabled={isNativeDisabled}\n            onClick={disabled ? undefined : onClick}\n            className={clsx(\n                styles.main,\n                selected && styles.mainSelectedText,\n                selected && styles.mainSelected,\n                error && styles.mainError,\n                disabled && styles.mainDisabled,\n                className\n            )}\n            {...otherProps}\n        >\n            <ImageWithFallback src={imgSrc} />\n            {children}\n        </button>\n    );\n};\n\nexport const ImageButton = React.forwardRef(Component);\n"],"names":["ImageButton","React","forwardRef","_a","ref","children","className","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick","otherProps","__rest","isNativeDisabled","_jsxs","Object","assign","undefined","clsx","styles.main","styles.mainSelectedText","styles.mainSelected","styles.mainError","styles.mainDisabled","_jsx","ImageWithFallback","src"],"mappings":"4VAQA,MAwCaA,EAAcC,EAAMC,YAxCf,CACdC,EAYAC,KAZA,IAAAC,SACIA,EAAQC,UACRA,EAASC,OACTA,EAAMC,SACNA,EAAQC,MACRA,EAAKC,KACLA,EAAO,SAAQC,SACfA,GAAW,EAAKC,sBAChBA,GAAwB,EAAKC,QAC7BA,GAAOV,EACJW,EAAUC,EAAAZ,EAVjB,CAAA,WAAA,YAAA,SAAA,WAAA,QAAA,OAAA,WAAA,wBAAA,YAcA,MAAMa,IAAqBL,IAAaC,EAExC,OACIK,EAAA,SAAAC,OAAAC,OAAA,CACIf,IAAKA,EACLM,KAAMA,EAAI,gBACKC,EACfA,SAAUK,EACVH,QAASF,OAAWS,EAAYP,EAChCP,UAAWe,EACPC,EACAd,GAAYe,EACZf,GAAYgB,EACZf,GAASgB,EACTd,GAAYe,EACZpB,IAEAQ,EAAU,CAAAT,SAAA,CAEdsB,EAACC,EAAiB,CAACC,IAAKtB,IACvBF,KACI"}

package/image-button/image-button.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const main: import("@linaria/core").LinariaClassName;
+export declare const mainSelectedText: import("@linaria/core").LinariaClassName;
+export declare const mainSelected: import("@linaria/core").LinariaClassName;
+export declare const mainError: import("@linaria/core").LinariaClassName;
+export declare const mainDisabled: import("@linaria/core").LinariaClassName;

package/image-button/image-button.styles.js

@@ -0,0 +1,2 @@
+import"./image-button.styles_qtt605.css";const t="mqb1plh",m="mpjl8bn",o="mroo32y",s="mz6wr40",n="m1hsk0n5";export{t as main,n as mainDisabled,s as mainError,o as mainSelected,m as mainSelectedText};
+//# sourceMappingURL=image-button.styles.js.map

package/image-button/image-button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-button.styles.js","sources":["../../src/image-button/image-button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Motion, Radius } from \"../theme\";\n\nexport const main = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 0.5rem;\n    justify-content: center;\n    align-items: center;\n    padding: 1.5rem 1rem;\n    background-color: ${Colour.bg};\n    border: ${Border[\"width-010\"]} ${Border.solid} transparent;\n    border-radius: ${Radius[\"md\"]};\n    cursor: pointer;\n    max-width: 13rem;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"text\"]};\n    overflow-wrap: anywhere;\n\n    img {\n        min-width: 3.5rem;\n        width: 3.5rem;\n        height: 3.5rem;\n        object-fit: contain;\n    }\n\n    &:hover {\n        border-color: ${Colour[\"border-hover-strong\"]};\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: 0.5rem 0.25rem;\n        gap: 0.25rem;\n        ${Font[\"body-md-semibold\"]}\n    }\n`;\n\nexport const mainSelectedText = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const mainSelected = css`\n    background: ${Colour[\"bg-selected\"]};\n    border-color: ${Colour[\"border-selected\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-selected-hover\"]};\n        border-color: ${Colour[\"border-selected-hover\"]};\n    }\n`;\n\nexport const mainError = css`\n    background: ${Colour.bg};\n    border-color: ${Colour[\"border-error\"]};\n\n    &:hover {\n        background: ${Colour.bg};\n        border-color: ${Colour[\"border-error\"]};\n    }\n`;\n\nexport const mainDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n    cursor: not-allowed;\n\n    img {\n        filter: grayscale(100%);\n    }\n\n    &:hover {\n        border-color: transparent;\n    }\n`;\n"],"names":["main","mainSelectedText","mainSelected","mainError","mainDisabled"],"mappings":"qEAIO,MAAMA,EAAI,UAoCJC,EAAgB,UAIhBC,EAAY,UAUZC,EAAS,UAUTC,EAAY"}

package/image-button/image-button.styles_qtt605.css

@@ -0,0 +1,5 @@
+.mqb1plh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.5rem;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1.5rem 1rem;background-color:var(--fds-colour-bg);border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;border-radius:var(--fds-radius-md);cursor:pointer;max-width:13rem;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);overflow-wrap:anywhere;}.mqb1plh img{min-width:3.5rem;width:3.5rem;height:3.5rem;object-fit:contain;}.mqb1plh:hover{border-color:var(--fds-colour-border-hover-strong);}:where(body.fds-breakpoint-sm-max) .mqb1plh{padding:0.5rem 0.25rem;gap:0.25rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.mpjl8bn{color:var(--fds-colour-text-primary);}
+.mroo32y{background:var(--fds-colour-bg-selected);border-color:var(--fds-colour-border-selected);}.mroo32y:hover{background:var(--fds-colour-bg-selected-hover);border-color:var(--fds-colour-border-selected-hover);}
+.mz6wr40{background:var(--fds-colour-bg);border-color:var(--fds-colour-border-error);}.mz6wr40:hover{background:var(--fds-colour-bg);border-color:var(--fds-colour-border-error);}
+.m1hsk0n5{color:var(--fds-colour-text-disabled);cursor:not-allowed;}.m1hsk0n5 img{-webkit-filter:grayscale(100%);filter:grayscale(100%);}.m1hsk0n5:hover{border-color:transparent;}

package/index.d.ts

@@ -6,7 +6,6 @@ export * from "./badge";
 export * from "./box-container";
 export * from "./breadcrumb";
 export * from "./button";
-export * from "./button-with-icon";
 export * from "./calendar";
 export * from "./card";
 export * from "./checkbox";
@@ -29,7 +28,6 @@ export * from "./footer";
 export * from "./form";
 export * from "./fullscreen-image-carousel";
 export * from "./histogram-slider";
-export * from "./icon-button";
 export * from "./image-button";
 export * from "./input";
 export * from "./input-group";
@@ -41,11 +39,11 @@ export * from "./input-range-slider";
 export * from "./input-select";
 export * from "./input-slider";
 export * from "./input-textarea";
+export * from "./language-switcher";
 export * from "./layout";
 export * from "./link-list";
 export * from "./markup";
 export * from "./masked-input";
-export * from "./masonry";
 export * from "./masthead";
 export * from "./menu";
 export * from "./modal";
@@ -58,7 +56,6 @@ export * from "./pagination";
 export * from "./phone-number-input";
 export * from "./pill";
 export * from "./popover";
-export * from "./popover-v2";
 export * from "./predictive-text-input";
 export * from "./progress-indicator";
 export * from "./radio-button";
@@ -80,16 +77,7 @@ export * from "./timepicker";
 export * from "./timetable";
 export * from "./toast";
 export * from "./toggle";
-export * from "./tooltip";
 export * from "./typography";
 export * from "./uneditable-section";
 export * from "./unit-number";
-export * from "./v2_color";
-export * from "./v2_design-token";
-export * from "./v2_layout";
-export * from "./v2_media";
-export * from "./v2_text";
-export * from "./v2_text-list";
-export * from "./v2_theme";
-export * from "./v2_transition";
 export * from "./v3_theme";

package/index.js

@@ -1,2 +1,2 @@
-export{Accordion}from"./accordion/accordion.js";export{Alert}from"./alert/alert.js";export{LoadingDots}from"./animations/loading-dots/loading-dots.js";export{LoadingDotsSpinner}from"./animations/loading-dots-spinner/loading-dots-spinner.js";export{LoadingSpinner}from"./animations/loading-spinner/loading-spinner.js";export{ThemedLoadingSpinner}from"./animations/themed-loading-spinner/themed-loading-spinner.js";export{Avatar}from"./avatar/avatar.js";export{Badge}from"./badge/badge.js";export{BoxContainer}from"./box-container/box-container.js";export{Breadcrumb}from"./breadcrumb/breadcrumb.js";export{Button}from"./button/button.js";export{ButtonWithIcon}from"./button-with-icon/button-with-icon.js";export{Calendar}from"./calendar/calendar.js";export{Card}from"./card/card.js";export{Checkbox}from"./checkbox/checkbox.js";export{CountdownTimer}from"./countdown-timer/countdown-timer.js";export{DashedBorder}from"./dashed-border/dashed-border.js";export{DataTable}from"./data-table/data-table.js";export{DateInput}from"./date-input/date-input.js";export{DateNavigator}from"./date-navigator/date-navigator.js";export{DateRangeInput}from"./date-range-input/date-range-input.js";export{Divider}from"./divider/divider.js";export{Drawer}from"./drawer/drawer.js";export{ESignature}from"./e-signature/e-signature.js";export{ErrorDisplay}from"./error-display/error-display.js";export{ErrorDisplayHelper}from"./error-display/helper.js";export{Example}from"./example/example.js";export{FeedbackRating}from"./feedback-rating/feedback-rating.js";export{FileDownload}from"./file-download/file-download.js";export{FileUpload}from"./file-upload/file-upload.js";export{Filter}from"./filter/filter.js";export{Footer}from"./footer/footer.js";export{Form}from"./form/index.js";export{FullscreenImageCarousel}from"./fullscreen-image-carousel/fullscreen-image-carousel.js";export{HistogramSlider}from"./histogram-slider/histogram-slider.js";export{IconButton}from"./icon-button/icon-button.js";export{ImageButton}from"./image-button/image-button.js";export{Input}from"./input/input.js";export{InputGroup}from"./input-group/input-group.js";export{InputMultiSelect}from"./input-multi-select/input-multi-select.js";export{InputNestedMultiSelect}from"./input-nested-multi-select/input-nested-multi-select.js";export{InputNestedSelect}from"./input-nested-select/input-nested-select.js";export{InputRangeSelect}from"./input-range-select/input-range-select.js";export{InputRangeSlider}from"./input-range-slider/input-range-slider.js";export{InputSelect}from"./input-select/input-select.js";export{InputSlider}from"./input-slider/input-slider.js";export{Textarea}from"./input-textarea/textarea.js";export{Layout}from"./layout/index.js";export{LinkList}from"./link-list/link-list.js";export{Markup}from"./markup/markup.js";export{MaskedInput}from"./masked-input/masked-input.js";export{Masonry}from"./masonry/masonry.js";export{Masthead}from"./masthead/masthead.js";export{Menu,MenuTrigger}from"./menu/menu.js";export{Modal}from"./modal/index.js";export{ModalV2}from"./modal-v2/index.js";export{Navbar}from"./navbar/navbar.js";export{NBComponent,NotificationBanner}from"./notification-banner/notification-banner.js";export{withNotificationBanner}from"./notification-banner/notification-banner-hoc.js";export{OtpInput}from"./otp-input/otp-input.js";export{Overlay}from"./overlay/overlay.js";export{Pagination}from"./pagination/pagination.js";export{PhoneNumberInput}from"./phone-number-input/phone-number-input.js";export{Pill}from"./pill/pill.js";export{Popover}from"./popover/popover.js";export{withPopover}from"./popover/popover-hoc.js";export{PopoverV2}from"./popover-v2/popover.js";export{PopoverInline}from"./popover-v2/popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover-v2/popover-trigger.js";export{PredictiveTextInput}from"./predictive-text-input/predictive-text-input.js";export{ProgressIndicator}from"./progress-indicator/progress-indicator.js";export{RadioButton}from"./radio-button/radio-button.js";export{SelectHistogram}from"./select-histogram/select-histogram.js";export{Sidenav}from"./sidenav/sidenav.js";export{SingpassButton}from"./singpass-button/singpass-button.js";export{SmartAppBanner}from"./smart-app-banner/smart-app-banner.js";export{Tab}from"./tab/tab.js";export{Table}from"./table/table.js";export{Tag}from"./tag/tag.js";export{TextList}from"./text-list/index.js";export{ThemeProvider}from"./theme/theme-provider/index.js";export{useInheritedThemeScope,useTheme}from"./theme/theme-provider/hooks.js";export{Border,BorderStyle,BorderThickness}from"./theme/tokens/border.js";export{Breakpoint}from"./theme/tokens/breakpoint.js";export{Colour,PrimitiveColours,SemanticColours}from"./theme/tokens/colour.js";export{ComponentToken}from"./theme/tokens/component.js";export{Font,FontSpec}from"./theme/tokens/font.js";export{MediaQuery}from"./theme/tokens/media-query.js";export{Motion}from"./theme/tokens/motion.js";export{Radius}from"./theme/tokens/radius.js";export{Shadow}from"./theme/tokens/shadow.js";export{Spacing}from"./theme/tokens/spacing.js";export{getInheritedInlineCssVariables,parseCSSVariableValue,parsePxOrRemValue}from"./theme/utils/css-variable.js";export{generateFont}from"./theme/utils/font.js";export{getEffectiveTokenOrCustom,getResolvedValue,getTokenOrDefault,isTokenFromSet,isTokenWithPrefix,toCssValue}from"./theme/utils/token-resolver.js";export{useApplyStyle}from"./theme/utils/use-apply-styles.js";export{useDesignToken,useResolvedTokenValue}from"./theme/utils/use-design-token.js";export{TimeRangePicker}from"./time-range-picker/time-range-picker.js";export{TimeSlotBar}from"./time-slot-bar/time-slot-bar.js";export{TimeSlotBarWeek}from"./time-slot-bar-week/time-slot-bar-week.js";export{TimeSlotWeekView}from"./time-slot-week-view/time-slot-week-view.js";export{Timeline}from"./timeline/timeline.js";export{Timepicker}from"./timepicker/timepicker.js";export{TimeTable}from"./timetable/timetable.js";export{Toast}from"./toast/toast.js";export{Toggle}from"./toggle/toggle.js";export{Tooltip}from"./tooltip/tooltip.js";export{withTooltip}from"./tooltip/tooltip-hoc.js";export{Typography}from"./typography/index.js";export{UneditableSection}from"./uneditable-section/index.js";export{UnitNumberInput}from"./unit-number/unit-number-input.js";export{V2_Color}from"./v2_color/color.js";export{V2_DesignToken}from"./v2_design-token/design-token.js";export{V2_Layout}from"./v2_layout/index.js";export{V2_MediaQuery,V2_MediaWidths}from"./v2_media/media.js";export{V2_TextStyleHelper}from"./v2_text/helper.js";export{V2_Text}from"./v2_text/text.js";export{V2_TextStyle}from"./v2_text/text-style.js";export{RedirectScope}from"./v2_text/types.js";export{V2_TextList}from"./v2_text-list/index.js";export{V2_BaseTheme,V2_BookingSGTheme,V2_CCubeTheme,V2_MyLegacyTheme,V2_OneServiceTheme,V2_RBSTheme}from"./v2_theme/index.js";export{V2_Transition}from"./v2_transition/index.js";export{V3_A11yPlaygroundTheme,V3_BookingSGTheme,V3_Border,V3_Breakpoint,V3_CCubeTheme,V3_Colour,V3_Font,V3_IMDATheme,V3_LifeSGTheme,V3_MediaQuery,V3_Motion,V3_MyLegacyTheme,V3_OneServiceTheme,V3_PATheme,V3_RBSTheme,V3_Radius,V3_SGWDigitalLobbyTheme,V3_SGWDigitalLobbyThemeBase,V3_SPFTheme,V3_Shadow,V3_Spacing,V3_SupportGoWhereTheme,V3_SupportGoWhereThemeBase}from"./v3_theme/index.js";export{V2_ThemeContextKeys}from"./v2_theme/types.js";export{V3_DSThemeProvider}from"./v3_theme/ds-theme-provider.js";export{createThemeWithColourMode,getSystemColourMode,useDSTheme}from"./v3_theme/use-theme-mode.js";
+export{Accordion}from"./accordion/accordion.js";export{Alert}from"./alert/alert.js";export{LoadingDots}from"./animations/loading-dots/loading-dots.js";export{LoadingDotsSpinner}from"./animations/loading-dots-spinner/loading-dots-spinner.js";export{LoadingSpinner}from"./animations/loading-spinner/loading-spinner.js";export{ThemedLoadingSpinner}from"./animations/themed-loading-spinner/themed-loading-spinner.js";export{Avatar}from"./avatar/avatar.js";export{Badge}from"./badge/badge.js";export{BoxContainer}from"./box-container/box-container.js";export{Breadcrumb}from"./breadcrumb/breadcrumb.js";export{Button}from"./button/button.js";export{Calendar}from"./calendar/calendar.js";export{Card}from"./card/card.js";export{Checkbox}from"./checkbox/checkbox.js";export{CountdownTimer}from"./countdown-timer/countdown-timer.js";export{DashedBorder}from"./dashed-border/dashed-border.js";export{DataTable}from"./data-table/data-table.js";export{DateInput}from"./date-input/date-input.js";export{DateNavigator}from"./date-navigator/date-navigator.js";export{DateRangeInput}from"./date-range-input/date-range-input.js";export{Divider}from"./divider/divider.js";export{Drawer}from"./drawer/drawer.js";export{ESignature}from"./e-signature/e-signature.js";export{ErrorDisplay}from"./error-display/error-display.js";export{ErrorDisplayHelper}from"./error-display/helper.js";export{Example}from"./example/example.js";export{FeedbackRating}from"./feedback-rating/feedback-rating.js";export{FileDownload}from"./file-download/file-download.js";export{FileUpload}from"./file-upload/file-upload.js";export{Filter}from"./filter/filter.js";export{Footer}from"./footer/footer.js";export{Form}from"./form/index.js";export{Component,FullscreenImageCarousel}from"./fullscreen-image-carousel/fullscreen-image-carousel.js";export{HistogramSlider}from"./histogram-slider/histogram-slider.js";export{ImageButton}from"./image-button/image-button.js";export{Input}from"./input/input.js";export{InputGroup}from"./input-group/input-group.js";export{InputMultiSelect}from"./input-multi-select/input-multi-select.js";export{InputNestedMultiSelect}from"./input-nested-multi-select/input-nested-multi-select.js";export{InputNestedSelect}from"./input-nested-select/input-nested-select.js";export{InputRangeSelect}from"./input-range-select/input-range-select.js";export{InputRangeSlider}from"./input-range-slider/input-range-slider.js";export{InputSelect}from"./input-select/input-select.js";export{InputSlider}from"./input-slider/input-slider.js";export{Textarea}from"./input-textarea/textarea.js";export{LanguageSwitcher}from"./language-switcher/language-switcher.js";export{Layout}from"./layout/index.js";export{LinkList}from"./link-list/link-list.js";export{Markup}from"./markup/markup.js";export{MaskedInput}from"./masked-input/masked-input.js";export{Masthead}from"./masthead/masthead.js";export{Menu,MenuTrigger}from"./menu/menu.js";export{Modal}from"./modal/index.js";export{ModalV2}from"./modal-v2/index.js";export{Navbar}from"./navbar/navbar.js";export{NBComponent,NotificationBanner}from"./notification-banner/notification-banner.js";export{withNotificationBanner}from"./notification-banner/notification-banner-hoc.js";export{OtpInput}from"./otp-input/otp-input.js";export{Overlay}from"./overlay/overlay.js";export{Pagination}from"./pagination/pagination.js";export{PhoneNumberInput}from"./phone-number-input/phone-number-input.js";export{Pill}from"./pill/pill.js";export{Popover}from"./popover/popover.js";export{PopoverInline}from"./popover/popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover/popover-trigger.js";export{PredictiveTextInput}from"./predictive-text-input/predictive-text-input.js";export{ProgressIndicator}from"./progress-indicator/progress-indicator.js";export{RadioButton}from"./radio-button/radio-button.js";export{SelectHistogram}from"./select-histogram/select-histogram.js";export{Sidenav}from"./sidenav/sidenav.js";export{SingpassButton}from"./singpass-button/singpass-button.js";export{SmartAppBanner}from"./smart-app-banner/smart-app-banner.js";export{Tab}from"./tab/tab.js";export{Table}from"./table/table.js";export{Tag}from"./tag/tag.js";export{TextList}from"./text-list/index.js";export{ThemeProvider}from"./theme/theme-provider/index.js";export{useInheritedThemeScope,useTheme}from"./theme/theme-provider/hooks.js";export{Border,BorderStyle,BorderThickness}from"./theme/tokens/border.js";export{Breakpoint}from"./theme/tokens/breakpoint.js";export{Colour,PrimitiveColours,SemanticColours}from"./theme/tokens/colour.js";export{ComponentToken}from"./theme/tokens/component.js";export{Font,FontSpec}from"./theme/tokens/font.js";export{MediaQuery}from"./theme/tokens/media-query.js";export{Motion}from"./theme/tokens/motion.js";export{Radius}from"./theme/tokens/radius.js";export{Shadow}from"./theme/tokens/shadow.js";export{Spacing}from"./theme/tokens/spacing.js";export{THEME_TYPES}from"./theme/types.js";export{extractFdsCssVariableName,formatUnitValue,getInheritedInlineCssVariables,normalizeCssLengthValue,parseCSSVariableValue,parsePxOrRemValue}from"./theme/utils/css-variable.js";export{generateFont,generateFontProperties}from"./theme/utils/font.js";export{getEffectiveTokenOrCustom,getResolvedValue,getTokenOrDefault,isTokenFromSet,isTokenWithPrefix,toCssValue}from"./theme/utils/token-resolver.js";export{useApplyStyle}from"./theme/utils/use-apply-styles.js";export{useDesignToken,useResolvedTokenValue}from"./theme/utils/use-design-token.js";export{DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,useMaxWidthMediaQuery,useMediaQuery,useMinWidthMediaQuery,useResolvedBreakpointToken}from"./theme/utils/use-media-query.js";export{TimeRangePicker}from"./time-range-picker/time-range-picker.js";export{TimeSlotBar}from"./time-slot-bar/time-slot-bar.js";export{TimeSlotBarWeek}from"./time-slot-bar-week/time-slot-bar-week.js";export{TimeSlotWeekView}from"./time-slot-week-view/time-slot-week-view.js";export{Timeline}from"./timeline/timeline.js";export{Timepicker}from"./timepicker/timepicker.js";export{TimeTable}from"./timetable/timetable.js";export{Toast}from"./toast/toast.js";export{Toggle}from"./toggle/toggle.js";export{Typography}from"./typography/index.js";export{UneditableSection}from"./uneditable-section/index.js";export{UnitNumberInput}from"./unit-number/unit-number-input.js";export{V3_A11yPlaygroundTheme,V3_BookingSGTheme,V3_Border,V3_Breakpoint,V3_CCubeTheme,V3_Colour,V3_Font,V3_IMDATheme,V3_LifeSGTheme,V3_MediaQuery,V3_Motion,V3_MyLegacyTheme,V3_OneServiceTheme,V3_PATheme,V3_RBSTheme,V3_Radius,V3_SGWDigitalLobbyTheme,V3_SGWDigitalLobbyThemeBase,V3_SMGSTheme,V3_SPFTheme,V3_Shadow,V3_Spacing,V3_SupportGoWhereTheme,V3_SupportGoWhereThemeBase}from"./v3_theme/index.js";export{V3_DSThemeProvider}from"./v3_theme/ds-theme-provider.js";export{createThemeWithColourMode,getSystemColourMode,useDSTheme}from"./v3_theme/use-theme-mode.js";
 //# sourceMappingURL=index.js.map

package/input/input.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,Fragment as a,jsxs as t}from"react/jsx-runtime";import l,{useRef as n,useImperativeHandle as s}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{StringHelper as i}from"../util/string-helper.js";import{useNextInputState as o}from"../util/use-next-input-state.js";import{NoBorderWrapper as d,DefaultWrapper as p,InputElement as c,ClearButton as u,ClearIcon as m}from"./input.style.js";const y=l.forwardRef(((l,y)=>{var{value:f,spacing:h,type:C,error:b,disabled:j,readOnly:g,onChange:v,onClear:$,allowClear:O=!1,className:x,styleType:w="bordered"}=l,N=e(l,["value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType"]);const T=((e,r)=>"tel"===e&&!!r)(C,h),R=n(null);s(y,(()=>R.current),[]);const S=o({ref:R,formatter:e=>T?i.transformWithSpaces(e,h):e}),W=e=>{v&&(T?k(e):v(e))},_=()=>{$&&$(),R&&R.current&&R.current.focus()},k=e=>{const r=S();if(!r)return;const{nextValue:a,updateCaretPosition:t}=r,l=a.replace(/\s/g,"");e.target.value=l,null==v||v(e),t()},P=f?(e=>e?T?i.transformWithSpaces(e,h):e:"")(f):f,V=O&&!j&&!g&&!!f,q=()=>t(a,{children:[r(c,Object.assign({"data-testid":"input",ref:R,"aria-disabled":j,value:P,onChange:W,type:C,readOnly:g||j,$showClear:V,$styleType:w,$visuallyReadOnly:g},N)),V&&r(u,{onClick:_,type:"button","aria-label":"Clear input",$styleType:w,children:r(m,{"aria-hidden":!0})})]});return r(a,{children:"no-border"===w?r(d,{className:x,children:q()}):r(p,{$disabled:j,$error:b,$readOnly:g,className:x,children:q()})})}));export{y as Input};
+import{__rest as r}from"../_virtual/_tslib.js";import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import{CrossIcon as n}from"@lifesg/react-icons/cross";import s from"clsx";import o,{useRef as l,useImperativeHandle as i}from"react";import{InputBox as p,BasicInput as c,BasicButton as d}from"../shared/input-wrapper/input-wrapper.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import{StringHelper as m}from"../util/string-helper.js";import"@react-aria/live-announcer";import{useNextInputState as u}from"../util/use-next-input-state.js";import{noBorderWrapper as f,defaultWrapper as y,defaultWrapperReadOnly as h,defaultWrapperError as b,defaultWrapperDisabled as j,inputElement as g,inputElementPaddingRight as C,inputElementPaddingLeft as v,inputElementDisabled as N,clearButton as x,clearButtonNoBorder as w,clearIcon as O}from"./input.styles.js";const S=o.forwardRef(((o,S)=>{var{value:T,spacing:W,type:_,error:k,disabled:P,readOnly:R,onChange:V,onClear:q,allowClear:z=!1,className:A,styleType:B="bordered"}=o,D=r(o,["value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType"]);const E=((r,e)=>"tel"===r&&!!e)(_,W),F=l(null);i(S,(()=>F.current),[]);const G=u({ref:F,formatter:r=>E?m.transformWithSpaces(r,W):r}),H=r=>{V&&(E?J(r):V(r))},I=()=>{q&&q(),F&&F.current&&F.current.focus()},J=r=>{const e=G();if(!e)return;const{nextValue:a,updateCaretPosition:t}=e,n=a.replace(/\s/g,"");r.target.value=n,null==V||V(r),t()},K=T?(r=>r?E?m.transformWithSpaces(r,W):r:"")(T):T,L=z&&!P&&!R&&!!T,M=()=>{const r=s(g,{[N]:P,[v]:"no-border"!==B&&!R,[C]:"no-border"!==B&&!R&&!L}),o=s(x,"no-border"===B&&w);return t(a,{children:[e(c,Object.assign({"data-testid":"input",ref:F,"aria-disabled":P,value:K,onChange:H,type:_,readOnly:R||P,className:r},D)),L&&e(d,{onClick:I,type:"button","aria-label":"Clear input",className:o,children:e(n,{className:O,"aria-hidden":!0})})]})};return e(a,{children:"no-border"===B?e("div",{className:s(f,A),children:M()}):e(p,{className:s(y,A,{[j]:P,[b]:k,[h]:R}),disabled:P,error:k,readOnly:R,children:M()})})}));export{S as Input};
 //# sourceMappingURL=input.js.map