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

package/schedule/schedule.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule.styles.js","sources":["../../src/schedule/schedule.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ErrorDisplay } from \"../error-display\";\nimport { V3_Border, V3_Colour, V3_Radius, V3_Spacing } from \"../v3_theme\";\nimport { MIN_COLUMN_WIDTH } from \"./const\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\ninterface ScheduleProps {\n    $loading: boolean | undefined;\n}\n\nexport const Container = styled.div<ScheduleProps>`\n    min-width: 320px;\n    max-width: 90vw;\n    box-sizing: border-box;\n    ${(props) => {\n        if (props.$loading) {\n            return css`\n                &:hover {\n                    cursor: not-allowed;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ScheduleBodyContainer = styled.div`\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n`;\n\nexport const EmptyTableContainer = styled.div`\n    display: grid;\n    overflow: auto;\n    position: relative;\n    grid-template-columns: ${MIN_COLUMN_WIDTH}px auto;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n    background: ${V3_Colour[\"bg\"]};\n`;\n\nexport const NoResultsFound = styled(ErrorDisplay)`\n    grid-column: 1 / -1;\n    grid-row: 2;\n    padding: ${V3_Spacing[\"spacing-72\"]} 0;\n`;\n"],"names":["Container","styled","div","props","$loading","css","ScheduleBodyContainer","EmptyTableContainer","MIN_COLUMN_WIDTH","V3_Border","solid","V3_Colour","V3_Radius","NoResultsFound","ErrorDisplay","V3_Spacing"],"mappings":"yPAaO,MAAMA,EAAYC,EAAOC,GAAkB;;;;MAI3CC,IACC,GAAIA,EAAMC,SACN,OAAOC,CAAG;;;;aAKd;EAIKC,EAAwBL,EAAOC,GAAG;;;;EAMlCK,EAAsBN,EAAOC,GAAG;;;;6BAIhBM;cACfC,EAAU,gBAAgBA,EAAUC,SAASC,EAAkB;qBACxDC,EAAc;kBACjBD,EAAc;EAGnBE,EAAiBZ,EAAOa,EAAa;;;eAGnCC,EAAW;"}
+{"version":3,"file":"schedule.styles.js","sources":["../../src/schedule/schedule.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\nimport { MIN_COLUMN_WIDTH } from \"./const\";\n\nexport const container = css`\n    min-width: 320px;\n    max-width: 90vw;\n    box-sizing: border-box;\n`;\n\nexport const containerLoading = css`\n    &:hover {\n        cursor: not-allowed;\n    }\n`;\n\nexport const scheduleBodyContainer = css`\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n`;\n\nexport const emptyTableContainer = css`\n    display: grid;\n    overflow: auto;\n    position: relative;\n    grid-template-columns: ${MIN_COLUMN_WIDTH}px auto;\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    background: ${Colour[\"bg\"]};\n`;\n\nexport const noResultsFound = css`\n    grid-column: 1 / -1;\n    grid-row: 2;\n    padding: ${Spacing[\"spacing-72\"]} 0;\n`;\n"],"names":["container","containerLoading","scheduleBodyContainer","emptyTableContainer","noResultsFound"],"mappings":"6DAKO,MAAMA,EAAS,WAMTC,EAAgB,WAMhBC,EAAqB,WAMrBC,EAAmB,WAUnBC,EAAc"}

package/schedule/schedule.styles_fdy5a1.css

@@ -0,0 +1,5 @@
+@layer fds{.c1340rqu{min-width:320px;max-width:90vw;box-sizing:border-box;}
+.c1hp3fsj:hover{cursor:not-allowed;}
+.s1kpvet5{height:100%;position:relative;overflow:hidden;}
+.e1b7vyxh{display:-ms-grid;display:grid;overflow:auto;position:relative;-ms-grid-columns:280px auto;grid-template-columns:280px auto;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);}
+.niqne7l{-ms-grid-column:1/-1;grid-column:1/-1;-ms-grid-row:2;grid-row:2;padding:var(--fds-spacing-72) 0;}}

package/schedule/shared/with-optional-popover.d.ts

@@ -3,7 +3,7 @@ import type { SchedulePopoverProps } from "../types";
 interface ConditionalCellWrapperProps {
     containerRef: RefObject<HTMLDivElement>;
     children: JSX.Element;
-    customPopover?: SchedulePopoverProps | undefined;
+    customPopover?: SchedulePopoverProps;
 }
 export declare const WithOptionalPopover: ({ containerRef, children, customPopover, }: ConditionalCellWrapperProps) => JSX.Element;
 export {};

package/schedule/shared/with-optional-popover.js

@@ -1,6 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import t from"styled-components";import"../../_virtual/_tslib.js";import"react";import"../../modal-v2/index.js";import"../../typography/typography.js";import"../../v3_theme/index.js";import"../../popover-v2/popover.styles.js";import{PopoverTrigger as r}from"../../popover-v2/popover-trigger.js";import"../../popover-v2/popover-inline/popover-inline.styles.js";const e=t(r)`
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-`,p=({containerRef:t,children:r,customPopover:p})=>{if(!p)return r;const i={position:"bottom-start",rootNode:t,customOffset:p.offset,children:r,trigger:p.trigger,delay:p.delay,popoverContent:p.content};return o(e,Object.assign({zIndex:2},i))};export{p as WithOptionalPopover};
+import{jsx as t}from"react/jsx-runtime";import"../../_virtual/_tslib.js";import"clsx";import"react";import"../../theme/theme-provider/context.js";import"../../typography/typography.js";import"../../card/card.styles_1gh9gs3.css";import"../../markup/markup.js";import"../../modal-v2/modal-v2.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"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"../../theme/utils/use-media-query.js";import"../../popover/popover.styles_ujnf0h.css";import{PopoverTrigger as e}from"../../popover/popover-trigger.js";import"../../popover/popover-inline/popover-inline.styles_bkopnt.css";import{popoverTrigger as o}from"./with-optional-popover.styles.js";const r=({containerRef:r,children:i,customPopover:p})=>{if(!p)return i;const s={position:"bottom-start",rootNode:r,customOffset:p.offset,children:i,trigger:p.trigger,delay:p.delay,popoverContent:p.content};return t(e,Object.assign({className:o,zIndex:2},s))};export{r as WithOptionalPopover};
 //# sourceMappingURL=with-optional-popover.js.map

package/schedule/shared/with-optional-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-optional-popover.js","sources":["../../../src/schedule/shared/with-optional-popover.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport styled from \"styled-components\";\n\nimport type { PopoverV2TriggerProps } from \"../../popover-v2\";\nimport { PopoverTrigger } from \"../../popover-v2\";\nimport type { SchedulePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: SchedulePopoverProps | undefined;\n}\n\nconst StyledPopoverTrigger = styled(PopoverTrigger)`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const WithOptionalPopover = ({\n    containerRef,\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverV2TriggerProps = {\n        position: \"bottom-start\",\n        rootNode: containerRef,\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return <StyledPopoverTrigger zIndex={2} {...popoverTriggerProps} />;\n};\n"],"names":["StyledPopoverTrigger","styled","PopoverTrigger","WithOptionalPopover","containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","Object","assign","zIndex"],"mappings":"gZAaA,MAAMA,EAAuBC,EAAOC,EAAe;;;;EAMtCC,EAAsB,EAC/BC,eACAC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA6C,CAC/CC,SAAU,eACVC,SAAUL,EACVM,aAAcJ,EAAcK,OAC5BN,SAAUA,EACVO,QAASN,EAAcM,QACvBC,MAAOP,EAAcO,MACrBC,eAAgBR,EAAcS,SAGlC,OAAOC,EAAChB,EAAoBiB,OAAAC,OAAA,CAACC,OAAQ,GAAOZ,GAAuB"}
+{"version":3,"file":"with-optional-popover.js","sources":["../../../src/schedule/shared/with-optional-popover.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\n\nimport type { PopoverTriggerProps } from \"../../popover\";\nimport { PopoverTrigger } from \"../../popover\";\nimport type { SchedulePopoverProps } from \"../types\";\nimport * as styles from \"./with-optional-popover.styles\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: SchedulePopoverProps;\n}\n\nexport const WithOptionalPopover = ({\n    containerRef,\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverTriggerProps = {\n        position: \"bottom-start\",\n        rootNode: containerRef,\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return (\n        <PopoverTrigger\n            className={styles.popoverTrigger}\n            zIndex={2}\n            {...popoverTriggerProps}\n        />\n    );\n};\n"],"names":["WithOptionalPopover","containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign","className","styles.popoverTrigger","zIndex"],"mappings":"m/BAaO,MAAMA,EAAsB,EAC/BC,eACAC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,SAAU,eACVC,SAAUL,EACVM,aAAcJ,EAAcK,OAC5BN,SAAUA,EACVO,QAASN,EAAcM,QACvBC,MAAOP,EAAcO,MACrBC,eAAgBR,EAAcS,SAGlC,OACIC,EAACC,EAAcC,OAAAC,OAAA,CACXC,UAAWC,EACXC,OAAQ,GACJf,GACN"}

package/schedule/shared/with-optional-popover.styles.d.ts

@@ -0,0 +1 @@
+export declare const popoverTrigger: import("@linaria/core").LinariaClassName;

package/schedule/shared/with-optional-popover.styles.js

@@ -0,0 +1,2 @@
+import"./with-optional-popover.styles_7mv3p2.css";const e="p1gm2ee7";export{e as popoverTrigger};
+//# sourceMappingURL=with-optional-popover.styles.js.map

package/schedule/shared/with-optional-popover.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-optional-popover.styles.js","sources":["../../../src/schedule/shared/with-optional-popover.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const popoverTrigger = css`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n"],"names":["popoverTrigger"],"mappings":"iFAEO,MAAMA,EAAc"}

package/schedule/shared/with-optional-popover.styles_7mv3p2.css

@@ -0,0 +1 @@
+@layer fds{.p1gm2ee7{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}

package/schedule/time-indicator/time-indicator.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import{TimeHelper as t}from"../../util/time-helper.js";import{TimeColumnWrapper as m,TimelineCircle as n,TimeColumn as l,TimeLabel as o,HourDisplay as s}from"./time-indicator.styles.js";const c=({minTime:c,maxTime:p,format:u="24hr",timelineOffset:a=null,isWeekView:h=!1})=>{const d=t.generateTimings(30,u,c,p).filter((e=>e.includes(":00")));return e(m,{children:[null!==a&&i(n,{$top:a,$isWeekView:h}),i(l,{children:d.map((t=>{const{hour:m,ampm:n}=function(e){const[i]=e.split(":").map(Number);return{hour:i%12==0?12:i%12,ampm:i<12?"am":"pm"}}(t);return i(o,{children:!(t===c)&&e(r,{children:[i(s,{children:m}),i("span",{children:n})]})},t)}))})]})};export{c as TimeIndicator};
+import{jsxs as e,jsx as t,Fragment as m}from"react/jsx-runtime";import r from"clsx";import{useRef as i}from"react";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 s}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{Typography as o}from"../../typography/index.js";import{TimeHelper as n}from"../../util/time-helper.js";import{tokens as l,timeColumnWrapper as p,timelineCircle as a,timelineCircleWeekView as c,timeColumn as u,timeLabel as h,hourDisplay as d}from"./time-indicator.styles.js";const f=({minTime:f,maxTime:j,format:x="24hr",timelineOffset:y=null,isWeekView:N=!1})=>{const k=n.generateTimings(30,x,f,j).filter((e=>e.includes(":00"))),v=i(null);return s(v,{[l.timelineCircle.offset]:null===y?null:`${y}px`}),e("div",{className:p,children:[null!==y&&t("div",{className:r(a,N&&c),ref:v}),t("div",{className:u,children:k.map((r=>{const{hour:i,ampm:s}=function(e){const[t]=e.split(":").map(Number);return{hour:t%12==0?12:t%12,ampm:t<12?"am":"pm"}}(r),n=r===f;return t(o.BodySM,{className:h,children:!n&&e(m,{children:[t("span",{className:d,children:i}),t("span",{children:s})]})},r)}))})]})};export{f as TimeIndicator};
 //# sourceMappingURL=time-indicator.js.map

package/schedule/time-indicator/time-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-indicator.js","sources":["../../../src/schedule/time-indicator/time-indicator.tsx"],"sourcesContent":["import { TimeHelper } from \"../../util/time-helper\";\nimport {\n    HourDisplay,\n    TimeColumn,\n    TimeColumnWrapper,\n    TimeLabel,\n    TimelineCircle,\n} from \"./time-indicator.styles\";\n\ninterface TimeSlotTimeIndicatorProps {\n    minTime: string;\n    maxTime: string;\n    format: \"12hr\" | \"24hr\";\n    timelineOffset?: number | null;\n    isWeekView?: boolean;\n}\nfunction formatHourLabel(time: string) {\n    const [h] = time.split(\":\").map(Number);\n    const ampm = h < 12 ? \"am\" : \"pm\";\n    const hour = h % 12 === 0 ? 12 : h % 12;\n    return { hour, ampm };\n}\n\nexport const TimeIndicator = ({\n    minTime,\n    maxTime,\n    format = \"24hr\",\n    timelineOffset = null,\n    isWeekView = false,\n}: TimeSlotTimeIndicatorProps) => {\n    const timeSlots = TimeHelper.generateTimings(30, format, minTime, maxTime);\n    const hourLabels = timeSlots.filter((t) => t.includes(\":00\"));\n    return (\n        <TimeColumnWrapper>\n            {timelineOffset !== null && (\n                <TimelineCircle\n                    $top={timelineOffset}\n                    $isWeekView={isWeekView}\n                />\n            )}\n            <TimeColumn>\n                {hourLabels.map((time) => {\n                    const { hour, ampm } = formatHourLabel(time);\n                    const isFirstSlot = time === minTime;\n                    return (\n                        <TimeLabel key={time}>\n                            {!isFirstSlot && (\n                                <>\n                                    <HourDisplay>{hour}</HourDisplay>\n                                    <span>{ampm}</span>\n                                </>\n                            )}\n                        </TimeLabel>\n                    );\n                })}\n            </TimeColumn>\n        </TimeColumnWrapper>\n    );\n};\n"],"names":["TimeIndicator","minTime","maxTime","format","timelineOffset","isWeekView","hourLabels","TimeHelper","generateTimings","filter","t","includes","_jsxs","TimeColumnWrapper","children","_jsx","TimelineCircle","$top","$isWeekView","TimeColumn","map","time","hour","ampm","h","split","Number","formatHourLabel","TimeLabel","_Fragment","HourDisplay"],"mappings":"gQAuBaA,EAAgB,EACzBC,UACAC,UACAC,SAAS,OACTC,iBAAiB,KACjBC,cAAa,MAEb,MACMC,EADYC,EAAWC,gBAAgB,GAAIL,EAAQF,EAASC,GACrCO,QAAQC,GAAMA,EAAEC,SAAS,SACtD,OACIC,EAACC,EAAiB,CAAAC,SAAA,CACM,OAAnBV,GACGW,EAACC,EAAc,CAAAC,KACLb,EAAcc,YACPb,IAGrBU,EAACI,EAAU,CAAAL,SACNR,EAAWc,KAAKC,IACb,MAAMC,KAAEA,EAAIC,KAAEA,GA1BlC,SAAyBF,GACrB,MAAOG,GAAKH,EAAKI,MAAM,KAAKL,IAAIM,QAGhC,MAAO,CAAEJ,KADIE,EAAI,IAAO,EAAI,GAAKA,EAAI,GACtBD,KAFFC,EAAI,GAAK,KAAO,KAGjC,CAqB2CG,CAAgBN,GAEvC,OACIN,EAACa,EAAS,CAAAd,WAFMO,IAASpB,IAIjBW,EAAAiB,EAAA,CAAAf,SAAA,CACIC,EAACe,EAAW,CAAAhB,SAAEQ,IACdP,EAAA,OAAA,CAAAD,SAAOS,QAJHF,EAOJ,QAIR"}
+{"version":3,"file":"time-indicator.js","sources":["../../../src/schedule/time-indicator/time-indicator.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport * as styles from \"./time-indicator.styles\";\n\ninterface TimeSlotTimeIndicatorProps {\n    minTime: string;\n    maxTime: string;\n    format: \"12hr\" | \"24hr\";\n    timelineOffset?: number | null;\n    isWeekView?: boolean;\n}\nfunction formatHourLabel(time: string) {\n    const [h] = time.split(\":\").map(Number);\n    const ampm = h < 12 ? \"am\" : \"pm\";\n    const hour = h % 12 === 0 ? 12 : h % 12;\n    return { hour, ampm };\n}\n\nexport const TimeIndicator = ({\n    minTime,\n    maxTime,\n    format = \"24hr\",\n    timelineOffset = null,\n    isWeekView = false,\n}: TimeSlotTimeIndicatorProps) => {\n    const timeSlots = TimeHelper.generateTimings(30, format, minTime, maxTime);\n    const hourLabels = timeSlots.filter((t) => t.includes(\":00\"));\n    const timelineCircleRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(timelineCircleRef, {\n        [styles.tokens.timelineCircle.offset]:\n            timelineOffset === null ? null : `${timelineOffset}px`,\n    });\n\n    return (\n        <div className={styles.timeColumnWrapper}>\n            {timelineOffset !== null && (\n                <div\n                    className={clsx(\n                        styles.timelineCircle,\n                        isWeekView && styles.timelineCircleWeekView\n                    )}\n                    ref={timelineCircleRef}\n                />\n            )}\n            <div className={styles.timeColumn}>\n                {hourLabels.map((time) => {\n                    const { hour, ampm } = formatHourLabel(time);\n                    const isFirstSlot = time === minTime;\n                    return (\n                        <Typography.BodySM\n                            className={styles.timeLabel}\n                            key={time}\n                        >\n                            {!isFirstSlot && (\n                                <>\n                                    <span className={styles.hourDisplay}>\n                                        {hour}\n                                    </span>\n                                    <span>{ampm}</span>\n                                </>\n                            )}\n                        </Typography.BodySM>\n                    );\n                })}\n            </div>\n        </div>\n    );\n};\n"],"names":["TimeIndicator","minTime","maxTime","format","timelineOffset","isWeekView","hourLabels","TimeHelper","generateTimings","filter","t","includes","timelineCircleRef","useRef","useApplyStyle","styles.tokens","timelineCircle","offset","_jsxs","className","styles.timeColumnWrapper","children","_jsx","clsx","styles.timelineCircle","styles.timelineCircleWeekView","ref","styles.timeColumn","map","time","hour","ampm","h","split","Number","formatHourLabel","isFirstSlot","Typography","BodySM","styles.timeLabel","_Fragment","styles.hourDisplay"],"mappings":"svBAsBaA,EAAgB,EACzBC,UACAC,UACAC,SAAS,OACTC,iBAAiB,KACjBC,cAAa,MAEb,MACMC,EADYC,EAAWC,gBAAgB,GAAIL,EAAQF,EAASC,GACrCO,QAAQC,GAAMA,EAAEC,SAAS,SAChDC,EAAoBC,EAAuB,MAOjD,OALAC,EAAcF,EAAmB,CAC7B,CAACG,EAAcC,eAAeC,QACP,OAAnBb,EAA0B,KAAO,GAAGA,QAIxCc,SAAKC,UAAWC,EAAwBC,SAAA,CAChB,OAAnBjB,GACGkB,EAAA,MAAA,CACIH,UAAWI,EACPC,EACAnB,GAAcoB,GAElBC,IAAKd,IAGbU,EAAA,MAAA,CAAKH,UAAWQ,EAAiBN,SAC5Bf,EAAWsB,KAAKC,IACb,MAAMC,KAAEA,EAAIC,KAAEA,GApClC,SAAyBF,GACrB,MAAOG,GAAKH,EAAKI,MAAM,KAAKL,IAAIM,QAGhC,MAAO,CAAEJ,KADIE,EAAI,IAAO,EAAI,GAAKA,EAAI,GACtBD,KAFFC,EAAI,GAAK,KAAO,KAGjC,CA+B2CG,CAAgBN,GACjCO,EAAcP,IAAS5B,EAC7B,OACIqB,EAACe,EAAWC,QACRnB,UAAWoB,EAAgBlB,UAGzBe,GACElB,EAAAsB,EAAA,CAAAnB,SAAA,CACIC,EAAA,OAAA,CAAMH,UAAWsB,EAAkBpB,SAC9BS,IAELR,EAAA,OAAA,CAAAD,SAAOU,QAPVF,EAUW,QAI9B"}

package/schedule/time-indicator/time-indicator.styles.d.ts

@@ -1,12 +1,11 @@
-interface TimelineCircleStyleProps {
-    $top: number;
-    $isWeekView: boolean;
-}
-export declare const TimeColumnWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimeColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimeLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const HourDisplay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const TimelineCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TimelineCircleStyleProps>> & string;
-export {};
+export declare const tokens: {
+    timelineCircle: {
+        offset: string;
+    };
+};
+export declare const timeColumnWrapper: import("@linaria/core").LinariaClassName;
+export declare const timeColumn: import("@linaria/core").LinariaClassName;
+export declare const timeLabel: import("@linaria/core").LinariaClassName;
+export declare const hourDisplay: import("@linaria/core").LinariaClassName;
+export declare const timelineCircle: import("@linaria/core").LinariaClassName;
+export declare const timelineCircleWeekView: import("@linaria/core").LinariaClassName;

package/schedule/time-indicator/time-indicator.styles.js

@@ -1,34 +1,2 @@
-import i from"styled-components";import{Typography as o}from"../../typography/index.js";import{V3_Colour as t,V3_Border as e,V3_Spacing as n,V3_Font as p,V3_Radius as r}from"../../v3_theme/index.js";import{TIME_INDICATOR_WIDTH as d,CELL_HEIGHT as s}from"../const.js";const l=i.div`
-    position: sticky;
-    z-index: 3;
-`,a=i.div`
-    display: flex;
-    flex-direction: column;
-    min-width: ${d}px;
-    background: ${t.bg};
-    border-right: ${e["width-010"]} ${e.solid}
-        ${t.border};
-`,c=i(o.BodySM)`
-    min-height: ${2*s}px; /* 2 slots */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    color: ${t["text-subtler"]};
-    padding-right: ${n["spacing-8"]};
-    font-weight: ${p.Spec["weight-bold"]};
-    position: relative;
-`,$=i.span`
-    position: absolute;
-    top: -18px;
-`,g=i.div`
-    position: absolute;
-    right: -6px;
-    top: ${i=>i.$top-6}px;
-    width: ${n["spacing-12"]};
-    height: ${n["spacing-12"]};
-    border-radius: ${r.full};
-    background: ${t["icon-primary"]};
-    z-index: 4;
-    display: ${i=>i.$isWeekView?"none":"block"};
-`;export{$ as HourDisplay,a as TimeColumn,l as TimeColumnWrapper,c as TimeLabel,g as TimelineCircle};
+import"./time-indicator.styles_1eaxyes.css";const t={timelineCircle:{offset:"--fds-internal-schedule-timeIndicator-timelineCircle-top"}},e="t1by6gzt",i="twl5iae",s="t1eau6os",l="h1y5vs3p",c="t1juq8yz",o="t1wl3tbi";export{l as hourDisplay,i as timeColumn,e as timeColumnWrapper,s as timeLabel,c as timelineCircle,o as timelineCircleWeekView,t as tokens};
 //# sourceMappingURL=time-indicator.styles.js.map

package/schedule/time-indicator/time-indicator.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-indicator.styles.js","sources":["../../../src/schedule/time-indicator/time-indicator.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport { CELL_HEIGHT, TIME_INDICATOR_WIDTH } from \"../const\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface TimelineCircleStyleProps {\n    $top: number;\n    $isWeekView: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TimeColumnWrapper = styled.div`\n    position: sticky;\n    z-index: 3;\n`;\n\nexport const TimeColumn = styled.div`\n    display: flex;\n    flex-direction: column;\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    background: ${V3_Colour[\"bg\"]};\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n`;\n\nexport const TimeLabel = styled(Typography.BodySM)`\n    min-height: ${CELL_HEIGHT * 2}px; /* 2 slots */\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    color: ${V3_Colour[\"text-subtler\"]};\n    padding-right: ${V3_Spacing[\"spacing-8\"]};\n    font-weight: ${V3_Font.Spec[\"weight-bold\"]};\n    position: relative;\n`;\nexport const HourDisplay = styled.span`\n    position: absolute;\n    top: -18px;\n`;\n\nexport const TimelineCircle = styled.div<TimelineCircleStyleProps>`\n    position: absolute;\n    right: -6px;\n    top: ${(props) => props.$top - 6}px;\n    width: ${V3_Spacing[\"spacing-12\"]};\n    height: ${V3_Spacing[\"spacing-12\"]};\n    border-radius: ${V3_Radius[\"full\"]};\n    background: ${V3_Colour[\"icon-primary\"]};\n    z-index: 4;\n    display: ${(props) => (props.$isWeekView ? \"none\" : \"block\")};\n`;\n"],"names":["TimeColumnWrapper","styled","div","TimeColumn","TIME_INDICATOR_WIDTH","V3_Colour","V3_Border","solid","TimeLabel","Typography","BodySM","CELL_HEIGHT","V3_Spacing","V3_Font","Spec","HourDisplay","span","TimelineCircle","props","$top","V3_Radius","$isWeekView"],"mappings":"2QAuBO,MAAMA,EAAoBC,EAAOC,GAAG;;;EAK9BC,EAAaF,EAAOC,GAAG;;;iBAGnBE;kBACCC,EAAc;oBACZC,EAAU,gBAAgBA,EAAUC;UAC9CF,EAAkB;EAGfG,EAAYP,EAAOQ,EAAWC,OAAO;kBAClB,EAAdC;;;;aAILN,EAAU;qBACFO,EAAW;mBACbC,EAAQC,KAAK;;EAGnBC,EAAcd,EAAOe,IAAI;;;EAKzBC,EAAiBhB,EAAOC,GAA6B;;;WAGtDgB,GAAUA,EAAMC,KAAO;aACtBP,EAAW;cACVA,EAAW;qBACJQ,EAAgB;kBACnBf,EAAU;;eAEZa,GAAWA,EAAMG,YAAc,OAAS;"}
+{"version":3,"file":"time-indicator.styles.js","sources":["../../../src/schedule/time-indicator/time-indicator.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../../theme\";\nimport { CELL_HEIGHT, TIME_INDICATOR_WIDTH } from \"../const\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const tokens = {\n    timelineCircle: {\n        offset: \"--fds-internal-schedule-timeIndicator-timelineCircle-top\",\n    },\n};\n\nexport const timeColumnWrapper = css`\n    position: sticky;\n    z-index: 3;\n`;\n\nexport const timeColumn = css`\n    display: flex;\n    flex-direction: column;\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    background: ${Colour[\"bg\"]};\n    border-right: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n`;\n\nexport const timeLabel = css`\n    min-height: ${CELL_HEIGHT * 2}px; /* 2 slots */\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    color: ${Colour[\"text-subtler\"]};\n    padding-right: ${Spacing[\"spacing-8\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    position: relative;\n`;\nexport const hourDisplay = css`\n    position: absolute;\n    top: -18px;\n`;\n\nexport const timelineCircle = css`\n    ${tokens.timelineCircle.offset}: 0px;\n    position: absolute;\n    right: -6px;\n    top: calc(var(${tokens.timelineCircle.offset}) - 6px);\n    width: ${Spacing[\"spacing-12\"]};\n    height: ${Spacing[\"spacing-12\"]};\n    border-radius: ${Radius[\"full\"]};\n    background: ${Colour[\"icon-primary\"]};\n    z-index: 4;\n`;\n\nexport const timelineCircleWeekView = css`\n    display: none;\n`;\n"],"names":["tokens","timelineCircle","offset","timeColumnWrapper","timeColumn","timeLabel","hourDisplay","timelineCircleWeekView"],"mappings":"mFAQO,MAAMA,EAAS,CAClBC,eAAgB,CACZC,OAAQ,6DAIHC,EAAiB,WAKjBC,EAAU,UAQVC,EAAS,WAUTC,EAAW,WAKXL,EAAc,WAYdM,EAAsB"}

package/schedule/time-indicator/time-indicator.styles_1eaxyes.css

@@ -0,0 +1,6 @@
+@layer fds{.t1by6gzt{position:-webkit-sticky;position:sticky;z-index:3;}
+.twl5iae{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:42px;background:var(--fds-colour-bg);border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.t1eau6os{min-height:96px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;color:var(--fds-colour-text-subtler);padding-right:var(--fds-spacing-8);font-weight:var(--fds-font-weight-bold);position:relative;}
+.h1y5vs3p{position:absolute;top:-18px;}
+.t1juq8yz{--fds-internal-schedule-timeIndicator-timelineCircle-top:0px;position:absolute;right:-6px;top:calc(var(--fds-internal-schedule-timeIndicator-timelineCircle-top) - 6px);width:var(--fds-spacing-12);height:var(--fds-spacing-12);border-radius:var(--fds-radius-full);background:var(--fds-colour-icon-primary);z-index:4;}
+.t1wl3tbi{display:none;}}

package/schedule/types.d.ts

@@ -1,56 +1,185 @@
-import type { PopoverV2TriggerType } from "../popover-v2";
+import type { PopoverTriggerType } from "../popover";
+/**
+ * Visual state of a schedule time slot.
+ *
+ * - `"booked"` — the slot has confirmed bookings.
+ * - `"available"` — the slot is open for booking.
+ * - `"blocked"` — the slot is unavailable.
+ * - `"pending"` — the slot is under review or awaiting confirmation.
+ */
 export type ScheduleCellType = "booked" | "available" | "blocked" | "pending";
+/**
+ * The active layout for the schedule.
+ */
 export type ScheduleView = "day" | "week";
+/**
+ * A single entity displayed as a column or carousel item.
+ */
 export interface ScheduleEntityProps {
+    /** Unique identifier. */
     id: string;
+    /** Display name shown in the column header. */
     name: string;
+    /** All time slots belonging to this service across all dates. */
     slots: ScheduleSlotProps[];
 }
+/**
+ * Configuration for a popover attached to a schedule slot.
+ */
 export interface SchedulePopoverProps {
-    trigger: PopoverV2TriggerType;
+    /** Interaction type that opens the popover. */
+    trigger: PopoverTriggerType;
+    /** The popover body. */
     content: string | JSX.Element | (() => React.ReactNode);
+    /**
+     * Open and close delay in milliseconds.
+     */
     delay?: {
         open?: number;
         close?: number;
     } | undefined;
+    /** Distance in pixels between the slot element and the popover. */
     offset?: number | undefined;
 }
+/**
+ * Props for the `Schedule` component.
+ */
 export interface ScheduleProps {
     id?: string | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * The layout view.
+     *
+     * @default "day"
+     *
+     * @remarks `"week"` is automatically overridden to `"day"`
+     * on small screens.
+     */
     view?: ScheduleView | undefined;
+    /**
+     * The currently displayed date in `YYYY-MM-DD` format.
+     * Slots are filtered to match this date in the day view.
+     */
     date: string;
+    /**
+     * Message shown inside the empty-state illustration when `serviceData` is
+     * empty.
+     */
     emptyContentMessage?: string | undefined;
+    /**
+     * Array of service entities to render. Each entity maps to a column in the
+     * week view, or to a carousel item in the day view.
+     */
     serviceData: ScheduleEntityProps[];
+    /**
+     * When `true` the schedule renders a loading animation in place of slot
+     * content.
+     *
+     * @default false
+     */
     loading?: boolean | undefined;
+    /**
+     * Earliest time shown on the time axis, in `HH:mm` format.
+     *
+     * @default "00:00"
+     */
     minTime?: string | undefined;
+    /**
+     * Latest time shown on the time axis, in `HH:mm` format.
+     *
+     * @default "23:59"
+     */
     maxTime?: string | undefined;
+    /**
+     * Time the schedule scrolls to on first render, in `HH:mm` format.
+     *
+     * @remarks Falls back to `minTime` when not provided.
+     */
     initialScrollTime?: string | undefined;
+    /** Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format. */
     minDate?: string | undefined;
+    /** Latest selectable date in the calendar picker, in `YYYY-MM-DD` format. */
     maxDate?: string | undefined;
+    /**
+     * Called when the user navigates to the previous day.
+     *
+     * @param currentDate The date that was active before the navigation, in `YYYY-MM-DD` format.
+     */
     onPreviousDayClick: (currentDate: string) => void;
+    /**
+     * Called when the user navigates to the next day.
+     *
+     * @param currentDate The date that was active before the navigation, in `YYYY-MM-DD` format.
+     */
     onNextDayClick: (currentDate: string) => void;
+    /**
+     * Called when the user picks a date from the calendar popover.
+     *
+     * @param currentDate The selected date in `YYYY-MM-DD` format.
+     */
     onCalendarDateSelect: (currentDate: string) => void;
+    /** Called when the user clicks the "Today" button in the header. */
     onTodayClick: () => void;
+    /**
+     * Called when the user clicks a cell without any time slots in the day view.
+     *
+     * @param slot Details about the clicked empty slot.
+     */
     onEmptySlotClick?: ((slot: ScheduleEmptySlotProps) => void) | undefined;
+    /**
+     * When provided, a popover is attached to each empty slot in the day view
+     * instead of calling `onEmptySlotClick` directly.
+     */
     emptySlotPopover?: ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps) | undefined;
+    /** Message displayed inside blocked slots. */
     blockedMessage?: string | undefined;
+    /**
+     * Called in the week view when the user clicks a cell that contains hidden
+     * overflow slots.
+     *
+     * @param hiddenServices Names of the services whose slots are hidden in the
+     * clicked cell.
+     */
     onClickHiddenSlots?: ((hiddenServices: string[]) => void) | undefined;
 }
+/**
+ * A single bookable time slot within a `ScheduleEntityProps`.
+ */
 export interface ScheduleSlotProps {
+    /** Unique identifier for the slot. */
     id: string;
+    /** Slot start time in `HH:mm` format. */
     startTime: string;
+    /** Slot end time in `HH:mm` format. */
     endTime: string;
+    /** Visual state of the slot. */
     status: ScheduleCellType;
+    /** Total number of bookable places in this slot. */
     capacity?: number | undefined;
+    /** Date this slot belongs to in `YYYY-MM-DD` format. */
     date: string | undefined;
+    /** Number of confirmed bookings already made for this slot. */
     booked?: number | undefined;
+    /** Attaches a popover to this slot with custom configuration. */
     customPopover?: SchedulePopoverProps | undefined;
+    /**
+     * Called when the user clicks this slot.
+     *
+     * @param data The full slot data at the time of the click.
+     * @param e The originating mouse event.
+     */
     onClick?: ((data: ScheduleSlotProps, e: React.MouseEvent) => void) | undefined;
 }
+/**
+ * Describes an empty time slot passed to `onEmptySlotClick` and the
+ * `emptySlotPopover`.
+ */
 export interface ScheduleEmptySlotProps {
+    /** Slot start time in `HH:mm` format. */
     startTime: string;
+    /** Slot end time in `HH:mm` format. */
     endTime: string;
+    /** Name of the service this empty slot belongs to. */
     name: string;
 }

package/select-histogram/select-histogram.d.ts

@@ -1,2 +1,8 @@
 import type { SelectHistogramProps } from "./types";
+/**
+ * A form input that displays the selected range and reveals a histogram slider in a dropdown.
+ *
+ * Use `SelectHistogram` when users need to select a numeric range against a data distribution.
+ * @keywords bins, chart, distribution, field, form, input, range, visualization
+ */
 export declare const SelectHistogram: ({ alignment, className, disabled, dropdownZIndex, error, histogramSlider, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, onBlur, onChange, onChangeEnd, optionTruncationType, placeholder, rangeLabelPrefix, rangeLabelSuffix, readOnly, renderRangeLabel, value, dropdownRootNode, ...otherProps }: SelectHistogramProps) => JSX.Element;

package/select-histogram/select-histogram.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as a}from"react/jsx-runtime";import{useState as o,useRef as t,useEffect as n}from"react";import{HistogramSlider as i}from"../histogram-slider/histogram-slider.js";import"styled-components";import"../util/string-helper.js";import"../v3_theme/index.js";import"../shared/dropdown-list-v2/dropdown-label.styles.js";import"../shared/dropdown-list-v2/dropdown-list.js";import{DropdownListState as l}from"../shared/dropdown-list-v2/dropdown-list-state.js";import{ExpandableElement as d}from"../shared/dropdown-list-v2/expandable-element.js";import"@lifesg/react-icons/caret-right";import"react-virtuoso";import"../button/button.style.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as s}from"../util/simple-id-generator.js";import{LabelContainer as p}from"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as m}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../shared/dropdown-list-v2/dropdown-list.styles.js";import"../shared/dropdown-list-v2/dropdown-search.js";import"../shared/dropdown-list-v2/nested-dropdown-list.styles.js";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import{InputBox as h}from"../shared/input-wrapper/input-wrapper.js";import{Typography as c}from"../typography/index.js";import{HistogramSliderDropdownContainer as u,PlaceholderLabel as g,Label as b,Separator as f}from"./select-histogram.styles.js";const j=j=>{var{alignment:w="left",className:y,disabled:v,dropdownZIndex:x,error:T,histogramSlider:L,id:O,"aria-labelledby":C,"aria-describedby":_,"aria-invalid":B,onBlur:R,onChange:S,onChangeEnd:$,optionTruncationType:E="end",placeholder:N="Select",rangeLabelPrefix:I,rangeLabelSuffix:A,readOnly:F,renderRangeLabel:P,value:V,dropdownRootNode:Z}=j,k=e(j,["alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","aria-labelledby","aria-describedby","aria-invalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode"]);const{interval:D,bins:q=[],renderEmptyView:G,ariaLabels:H}=L,M=q.map((e=>e.minValue)),W=Math.min(...M),[z,J]=o(de()),[K,Q]=o(!1),[U,X]=o(!1),[Y]=o((()=>s.generate())),ee=t(null),re=t(null),ae=t(null),oe=k["data-testid"]||"select-histogram";n((()=>{V!==z&&J(de())}),[V]);const te=e=>{J(e),null==S||S(e)},ne=e=>{J(e),null==$||$(e)},ie=()=>{U||K||X(!0)},le=e=>{U&&!K&&ee.current&&!ee.current.contains(e.relatedTarget)&&(X(!1),null==R||R())};function de(){return null!=V?V:[W,W+D]}const se=e=>P?P(e):a(c.BodyBL,{children:[I,e,A]});return r(l,{children:r(m,{enabled:!F&&!v,isOpen:K,renderElement:()=>r(h,{className:y,"data-testid":oe,id:O,ref:ee,tabIndex:-1,onFocus:ie,onBlur:le,$focused:U,$disabled:v,$readOnly:F,$error:T,children:r(d,{ref:re,disabled:v,expanded:K,listboxId:Y,popupRole:"dialog",readOnly:F,variant:"default","aria-labelledby":C,"aria-describedby":_,"aria-invalid":B,children:r(p,{ref:ae,$disabled:v,children:M&&0!==M.length?a(b,{children:[se(z[0]),r(f,{children:"-"}),se(z[1])]}):r(g,{$truncateType:E,$variant:"default",children:N})})})}),renderDropdown:({elementWidth:e,styles:a,setFloatingRef:o,getFloatingProps:t})=>r(u,Object.assign({style:Object.assign(Object.assign({},a),{width:e}),ref:o},t(),{children:r(i,{interval:D,value:z,bins:q,onChange:te,onChangeEnd:ne,showRangeLabels:!1,renderEmptyView:G,ariaLabels:H})})),onOpen:()=>{Q(!0)},onClose:()=>{Q(!1)},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),Q(!1)},clickToToggle:!0,offset:8,alignment:w,fitAvailableHeight:!0,customZIndex:x,rootNode:Z})})};export{j as SelectHistogram};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as o}from"react/jsx-runtime";import i from"clsx";import{useState as t,useRef as a,useEffect as s}from"react";import{HistogramSlider as n}from"../histogram-slider/histogram-slider.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"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as l}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_mloii0.css";import"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as d}from"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as p}from"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as m}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputBox as c}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_konwm.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";import{labelContainer as h}from"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{Typography as u}from"../typography/index.js";import{histogramSliderDropdownContainer as g,placeholderLabel as f,placeholderLabelTruncateEnd as b,label as j,separator as w}from"./select-histogram.styles.js";const y=y=>{var{alignment:x="left",className:v,disabled:_,dropdownZIndex:T,error:C,histogramSlider:k,id:A,"aria-labelledby":N,"aria-describedby":L,"aria-invalid":I,onBlur:O,onChange:q,onChangeEnd:B,optionTruncationType:P="end",placeholder:R="Select",rangeLabelPrefix:S,rangeLabelSuffix:E,readOnly:G,renderRangeLabel:H,value:M,dropdownRootNode:F}=y,V=e(y,["alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","aria-labelledby","aria-describedby","aria-invalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode"]);const{interval:Z,bins:D=[],renderEmptyView:W,ariaLabels:$}=k,z=D.map((e=>e.minValue)),J=Math.min(...z),[K,Q]=t(pe()),[U,X]=t(!1),[Y,ee]=t(!1),re=l(),oe=a(null),ie=a(null),te=a(null),ae=V["data-testid"]||"select-histogram";s((()=>{M!==K&&Q(pe())}),[M]);const se=e=>{Q(e),null==q||q(e)},ne=e=>{Q(e),null==B||B(e)},le=()=>{Y||U||ee(!0)},de=e=>{Y&&!U&&oe.current&&!oe.current.contains(e.relatedTarget)&&(ee(!1),null==O||O())};function pe(){return null!=M?M:[J,J+Z]}const me=e=>H?H(e):o(u.BodyBL,{children:[S,e,E]});return r(d,{children:r(m,{enabled:!G&&!_,isOpen:U,renderElement:()=>r(c,{className:v,"data-testid":ae,id:A,ref:oe,tabIndex:-1,onFocus:le,onBlur:de,focused:Y,disabled:_,readOnly:G,error:C,children:r(p,{ref:ie,disabled:_,expanded:U,listboxId:re,popupRole:"dialog",readOnly:G,variant:"default","aria-labelledby":N,"aria-describedby":L,"aria-invalid":I,children:r("div",{className:h,ref:te,"data-disabled":_||void 0,children:z&&0!==z.length?o("div",{className:j,children:[me(K[0]),r("div",{className:w,children:"-"}),me(K[1])]}):r("div",{className:i(f,"middle"!==P&&b),children:R})})})}),renderDropdown:({elementWidth:e,styles:o,setFloatingRef:i,getFloatingProps:t})=>r("div",Object.assign({className:g,style:Object.assign(Object.assign({},o),{width:e}),ref:i,"data-testid":`${ae}-dropdown`},t(),{children:r(n,{interval:Z,value:K,bins:D,onChange:se,onChangeEnd:ne,showRangeLabels:!1,renderEmptyView:W,ariaLabels:$})})),onOpen:()=>{X(!0)},onClose:()=>{X(!1)},onDismiss:()=>{var e;null===(e=ie.current)||void 0===e||e.focus(),X(!1)},clickToToggle:!0,offset:8,alignment:x,fitAvailableHeight:!0,customZIndex:T,rootNode:F})})};export{y as SelectHistogram};
 //# sourceMappingURL=select-histogram.js.map

package/select-histogram/select-histogram.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-histogram.js","sources":["../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport {\n    DropdownListState,\n    ExpandableElement,\n} from \"../shared/dropdown-list-v2\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { LabelContainer } from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { SimpleIdGenerator } from \"../util\";\nimport {\n    HistogramSliderDropdownContainer,\n    Label,\n    PlaceholderLabel,\n    Separator,\n} from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\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 renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <PlaceholderLabel\n                $truncateType={optionTruncationType}\n                $variant=\"default\"\n            >\n                {placeholder}\n            </PlaceholderLabel>\n        ) : (\n            <Label>\n                {renderSelector(selection[0])}\n                <Separator>-</Separator>\n                {renderSelector(selection[1])}\n            </Label>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} $disabled={disabled}>\n            {getDisplayValue()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = ({\n        elementWidth,\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <HistogramSliderDropdownContainer\n            style={{ ...styles, width: elementWidth }}\n            ref={setFloatingRef}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </HistogramSliderDropdownContainer>\n    );\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["SelectHistogram","_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","ExpandableElement","expanded","listboxId","popupRole","variant","LabelContainer","length","Label","Separator","PlaceholderLabel","$truncateType","$variant","renderDropdown","elementWidth","styles","setFloatingRef","getFloatingProps","HistogramSliderDropdownContainer","Object","assign","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"select-histogram.js","sources":["../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport { DropdownListState, ExpandableElement } from \"../shared/dropdown-list\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport * as dropdownWrapperStyles from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\n// @catalog\n/**\n * A form input that displays the selected range and reveals a histogram slider in a dropdown.\n *\n * Use `SelectHistogram` when users need to select a numeric range against a data distribution.\n * @keywords bins, chart, distribution, field, form, input, range, visualization\n */\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\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 renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <div\n                className={clsx(\n                    styles.placeholderLabel,\n                    optionTruncationType !== \"middle\" &&\n                        styles.placeholderLabelTruncateEnd\n                )}\n            >\n                {placeholder}\n            </div>\n        ) : (\n            <div className={styles.label}>\n                {renderSelector(selection[0])}\n                <div className={styles.separator}>-</div>\n                {renderSelector(selection[1])}\n            </div>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <div\n            className={dropdownWrapperStyles.labelContainer}\n            ref={labelContainerRef}\n            data-disabled={disabled || undefined}\n        >\n            {getDisplayValue()}\n        </div>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = ({\n        elementWidth,\n        styles: floatingStyles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            className={styles.histogramSliderDropdownContainer}\n            style={{ ...floatingStyles, width: elementWidth }}\n            ref={setFloatingRef}\n            data-testid={`${testId}-dropdown`}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </div>\n    );\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["SelectHistogram","_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","variant","dropdownWrapperStyles.labelContainer","undefined","length","styles.label","styles.separator","clsx","styles.placeholderLabel","styles.placeholderLabelTruncateEnd","renderDropdown","elementWidth","styles","floatingStyles","setFloatingRef","getFloatingProps","Object","assign","styles.histogramSliderDropdownContainer","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

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

@@ -1,8 +1,5 @@
-import type { ValueLabelStyleProps } from "../shared/dropdown-wrapper/dropdown-wrapper.styles";
-export declare const HistogramSliderDropdownContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-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 ValueLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ValueLabelStyleProps>> & string;
-export declare const PlaceholderLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
+export declare const histogramSliderDropdownContainer: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const separator: import("@linaria/core").LinariaClassName;
+export declare const placeholderLabel: import("@linaria/core").LinariaClassName;
+export declare const placeholderLabelTruncateEnd: import("@linaria/core").LinariaClassName;

package/select-histogram/select-histogram.styles.js

@@ -1,38 +1,2 @@
-import i,{css as e}from"styled-components";import{lineClampCss as d}from"../shared/styles/index.js";import{V3_Border as r,V3_Colour as t,V3_Radius as a,V3_Spacing as o,V3_MediaQuery as s,V3_Breakpoint as n,V3_Font as l}from"../v3_theme/index.js";const m=i.div`
-    overflow: hidden;
-    border: ${r["width-010"]} ${r.solid}
-        ${t.border};
-    border-radius: ${a.sm};
-    background: ${t.bg};
-    padding: ${o["spacing-16"]};
-    min-width: 23rem;
-
-    ${s.MaxWidth.sm} {
-        min-width: unset;
-        width: calc(100vw - ${n["sm-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.xs} {
-        width: calc(100vw - ${n["xs-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.xxs} {
-        width: calc(100vw - ${n["xxs-margin"]}px * 2);
-    }
-`,x=i.div`
-    display: flex;
-    align-items: baseline;
-`,$=i.div`
-    margin: 0 0.5rem;
-    color: ${t.text};
-`,c=i.div`
-    ${i=>"small"===i.$variant?l["body-md-regular"]:l["body-baseline-regular"]}
-    text-align: left;
-    ${i=>{if("middle"!==i.$truncateType)return e`
-                    ${d(1)}
-                `}}
-    overflow: hidden;
-`,h=i(c)`
-    color: ${t["text-subtler"]};
-`;export{m as HistogramSliderDropdownContainer,x as Label,h as PlaceholderLabel,$ as Separator,c as ValueLabel};
+import"./select-histogram.styles_n260dy.css";const s="h1snxaxy",t="l1e4uw6e",e="s134rtp9",o="p11079xa",p="p1bydnw6";export{s as histogramSliderDropdownContainer,t as label,o as placeholderLabel,p as placeholderLabelTruncateEnd,e as separator};
 //# sourceMappingURL=select-histogram.styles.js.map

package/select-histogram/select-histogram.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-histogram.styles.js","sources":["../../src/select-histogram/select-histogram.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport type { ValueLabelStyleProps } from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    V3_Border,\n    V3_Breakpoint,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\nexport const HistogramSliderDropdownContainer = styled.div`\n    overflow: hidden;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    background: ${V3_Colour[\"bg\"]};\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    min-width: 23rem;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        min-width: unset;\n        width: calc(100vw - ${V3_Breakpoint[\"sm-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.xs} {\n        width: calc(100vw - ${V3_Breakpoint[\"xs-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        width: calc(100vw - ${V3_Breakpoint[\"xxs-margin\"]}px * 2);\n    }\n`;\n\nexport const Label = styled.div`\n    display: flex;\n    align-items: baseline;\n`;\n\nexport const Separator = styled.div`\n    margin: 0 0.5rem;\n    color: ${V3_Colour[\"text\"]};\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? V3_Font[\"body-md-regular\"]\n            : V3_Font[\"body-baseline-regular\"]}\n    text-align: left;\n    ${(props) => {\n        switch (props.$truncateType) {\n            case \"middle\":\n                break;\n            case \"end\":\n            default:\n                return css`\n                    ${lineClampCss(1)}\n                `;\n        }\n    }}\n    overflow: hidden;\n`;\n\nexport const PlaceholderLabel = styled(ValueLabel)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n"],"names":["HistogramSliderDropdownContainer","styled","div","V3_Border","V3_Colour","V3_Radius","V3_Spacing","V3_MediaQuery","MaxWidth","sm","V3_Breakpoint","xs","xxs","Label","Separator","ValueLabel","props","$variant","V3_Font","$truncateType","css","lineClampCss","PlaceholderLabel"],"mappings":"sPAcO,MAAMA,EAAmCC,EAAOC,GAAG;;cAE5CC,EAAU,gBAAgBA,EAAiB;UAC/CC,EAAkB;qBACPC,EAAc;kBACjBD,EAAc;eACjBE,EAAW;;;MAGpBC,EAAcC,SAASC;;8BAECC,EAAc;;;MAGtCH,EAAcC,SAASG;8BACCD,EAAc;;;MAGtCH,EAAcC,SAASI;8BACCF,EAAc;;EAI/BG,EAAQZ,EAAOC,GAAG;;;EAKlBY,EAAYb,EAAOC,GAAG;;aAEtBE,EAAgB;EAGhBW,EAAad,EAAOC,GAAyB;MACnDc,GACoB,UAAnBA,EAAMC,SACAC,EAAQ,mBACRA,EAAQ;;MAEfF,IACC,GACS,WADDA,EAAMG,cAKN,OAAOC,CAAG;sBACJC,EAAa;;;EAOtBC,EAAmBrB,EAAOc,EAAW;aACrCX,EAAU;"}
+{"version":3,"file":"select-histogram.styles.js","sources":["../../src/select-histogram/select-histogram.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme\";\n\nexport const histogramSliderDropdownContainer = css`\n    overflow: hidden;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n    padding: ${Spacing[\"spacing-16\"]};\n    min-width: 23rem;\n\n    ${MediaQuery.MaxWidth.sm} {\n        min-width: unset;\n        width: calc(100vw - ${Breakpoint[\"sm-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        width: calc(100vw - ${Breakpoint[\"xs-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: calc(100vw - ${Breakpoint[\"xxs-margin\"]} * 2);\n    }\n`;\n\nexport const label = css`\n    display: flex;\n    align-items: baseline;\n`;\n\nexport const separator = css`\n    margin: 0 0.5rem;\n    color: ${Colour[\"text\"]};\n`;\n\nexport const placeholderLabel = css`\n    ${Font[\"body-baseline-regular\"]}\n    text-align: left;\n    overflow: hidden;\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const placeholderLabelTruncateEnd = css`\n    ${lineClampCss(1)}\n`;\n"],"names":["histogramSliderDropdownContainer","label","separator","placeholderLabel","placeholderLabelTruncateEnd"],"mappings":"6EAaO,MAAMA,EAAgC,WAsBhCC,EAAK,WAKLC,EAAS,WAKTC,EAAgB,WAOhBC,EAA2B"}

package/select-histogram/select-histogram.styles_n260dy.css

@@ -0,0 +1,5 @@
+@layer fds{.h1snxaxy{overflow:hidden;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);padding:var(--fds-spacing-16);min-width:23rem;}:where(body.fds-breakpoint-sm-max) .h1snxaxy{min-width:unset;width:calc(100vw - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .h1snxaxy{width:calc(100vw - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .h1snxaxy{width:calc(100vw - var(--fds-breakpoint-margin-xxs) * 2);}
+.l1e4uw6e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}
+.s134rtp9{margin:0 0.5rem;color:var(--fds-colour-text);}
+.p11079xa{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);text-align:left;overflow:hidden;color:var(--fds-colour-text-subtler);}
+.p1bydnw6{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}}