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

package/cjs/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":"qRAOA,MAgCaA,OAAcC,QAAMC,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,EAAAA,OAAAX,EATjB,CAAA,WAAA,SAAA,WAAA,QAAA,OAAA,WAAA,wBAAA,YAaA,OACIY,EAAAA,KAACC,EAAAA,KAAIC,OAAAC,OAAA,CACDd,IAAKA,EAAGe,UACGT,EAAQU,UACRb,EAAQc,OACXb,EACRC,KAAMA,EAAI,gBACKC,EACfA,SAAUA,IAAaC,EACvBC,QAASF,OAAWY,EAAYV,GAC5BC,aAEJU,EAAAA,IAACC,EAAAA,kBAAiB,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":"mTAQA,MAwCaA,OAAcC,QAAMC,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,EAAAA,OAAAZ,EAVjB,CAAA,WAAA,YAAA,SAAA,WAAA,QAAA,OAAA,WAAA,wBAAA,YAcA,MAAMa,IAAqBL,IAAaC,EAExC,OACIK,EAAAA,KAAA,SAAAC,OAAAC,OAAA,CACIf,IAAKA,EACLM,KAAMA,EAAI,gBACKC,EACfA,SAAUK,EACVH,QAASF,OAAWS,EAAYP,EAChCP,UAAWe,EAAAA,QACPC,EAAAA,KACAd,GAAYe,mBACZf,GAAYgB,EAAAA,aACZf,GAASgB,EAAAA,UACTd,GAAYe,EAAAA,aACZpB,IAEAQ,EAAU,CAAAT,SAAA,CAEdsB,MAACC,EAAAA,kBAAiB,CAACC,IAAKtB,IACvBF,KACI"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./image-button.styles_qtt605.css");exports.main="mqb1plh",exports.mainDisabled="m1hsk0n5",exports.mainError="mz6wr40",exports.mainSelected="mroo32y",exports.mainSelectedText="mpjl8bn";
+//# sourceMappingURL=image-button.styles.js.map

package/cjs/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":[],"mappings":"kGAIiB,+BA4DQ,6BAVH,+BAVG,mCAJI"}

package/cjs/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/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("./accordion/accordion.js"),r=require("./alert/alert.js"),t=require("./animations/loading-dots/loading-dots.js"),o=require("./animations/loading-dots-spinner/loading-dots-spinner.js"),i=require("./animations/loading-spinner/loading-spinner.js"),s=require("./animations/themed-loading-spinner/themed-loading-spinner.js"),n=require("./avatar/avatar.js"),p=require("./badge/badge.js"),a=require("./box-container/box-container.js"),u=require("./breadcrumb/breadcrumb.js"),l=require("./button/button.js"),x=require("./button-with-icon/button-with-icon.js"),d=require("./calendar/calendar.js"),m=require("./card/card.js"),g=require("./checkbox/checkbox.js"),h=require("./countdown-timer/countdown-timer.js"),c=require("./dashed-border/dashed-border.js"),T=require("./data-table/data-table.js"),j=require("./date-input/date-input.js"),q=require("./date-navigator/date-navigator.js"),V=require("./date-range-input/date-range-input.js"),S=require("./divider/divider.js"),b=require("./drawer/drawer.js"),_=require("./e-signature/e-signature.js"),v=require("./error-display/error-display.js"),k=require("./error-display/helper.js"),y=require("./example/example.js"),B=require("./feedback-rating/feedback-rating.js"),I=require("./file-download/file-download.js"),C=require("./file-upload/file-upload.js"),M=require("./filter/filter.js"),P=require("./footer/footer.js"),D=require("./form/index.js"),f=require("./fullscreen-image-carousel/fullscreen-image-carousel.js"),w=require("./histogram-slider/histogram-slider.js"),L=require("./icon-button/icon-button.js"),R=require("./image-button/image-button.js"),F=require("./input/input.js"),W=require("./input-group/input-group.js"),N=require("./input-multi-select/input-multi-select.js"),O=require("./input-nested-multi-select/input-nested-multi-select.js"),A=require("./input-nested-select/input-nested-select.js"),G=require("./input-range-select/input-range-select.js"),E=require("./input-range-slider/input-range-slider.js"),H=require("./input-select/input-select.js"),Q=require("./input-slider/input-slider.js"),U=require("./input-textarea/textarea.js"),K=require("./layout/index.js"),z=require("./link-list/link-list.js"),J=require("./markup/markup.js"),X=require("./masked-input/masked-input.js"),Y=require("./masonry/masonry.js"),Z=require("./masthead/masthead.js"),$=require("./menu/menu.js"),ee=require("./modal/index.js"),re=require("./modal-v2/index.js"),te=require("./navbar/navbar.js"),oe=require("./notification-banner/notification-banner.js"),ie=require("./notification-banner/notification-banner-hoc.js"),se=require("./otp-input/otp-input.js"),ne=require("./overlay/overlay.js"),pe=require("./pagination/pagination.js"),ae=require("./phone-number-input/phone-number-input.js"),ue=require("./pill/pill.js"),le=require("./popover/popover.js"),xe=require("./popover/popover-hoc.js"),de=require("./popover-v2/popover.js"),me=require("./popover-v2/popover-inline/popover-inline.js"),ge=require("./popover-v2/popover-trigger.js"),he=require("./predictive-text-input/predictive-text-input.js"),ce=require("./progress-indicator/progress-indicator.js"),Te=require("./radio-button/radio-button.js"),je=require("./select-histogram/select-histogram.js"),qe=require("./sidenav/sidenav.js"),Ve=require("./singpass-button/singpass-button.js"),Se=require("./smart-app-banner/smart-app-banner.js"),be=require("./tab/tab.js"),_e=require("./table/table.js"),ve=require("./tag/tag.js"),ke=require("./text-list/index.js"),ye=require("./theme/theme-provider/index.js"),Be=require("./theme/theme-provider/hooks.js"),Ie=require("./theme/tokens/border.js"),Ce=require("./theme/tokens/breakpoint.js"),Me=require("./theme/tokens/colour.js"),Pe=require("./theme/tokens/component.js"),De=require("./theme/tokens/font.js"),fe=require("./theme/tokens/media-query.js"),we=require("./theme/tokens/motion.js"),Le=require("./theme/tokens/radius.js"),Re=require("./theme/tokens/shadow.js"),Fe=require("./theme/tokens/spacing.js"),We=require("./theme/utils/css-variable.js"),Ne=require("./theme/utils/font.js"),Oe=require("./theme/utils/token-resolver.js"),Ae=require("./theme/utils/use-apply-styles.js"),Ge=require("./theme/utils/use-design-token.js"),Ee=require("./time-range-picker/time-range-picker.js"),He=require("./time-slot-bar/time-slot-bar.js"),Qe=require("./time-slot-bar-week/time-slot-bar-week.js"),Ue=require("./time-slot-week-view/time-slot-week-view.js"),Ke=require("./timeline/timeline.js"),ze=require("./timepicker/timepicker.js"),Je=require("./timetable/timetable.js"),Xe=require("./toast/toast.js"),Ye=require("./toggle/toggle.js"),Ze=require("./tooltip/tooltip.js"),$e=require("./tooltip/tooltip-hoc.js"),er=require("./typography/index.js"),rr=require("./uneditable-section/index.js"),tr=require("./unit-number/unit-number-input.js"),or=require("./v2_color/color.js"),ir=require("./v2_design-token/design-token.js"),sr=require("./v2_layout/index.js"),nr=require("./v2_media/media.js"),pr=require("./v2_text/helper.js"),ar=require("./v2_text/text.js"),ur=require("./v2_text/text-style.js"),lr=require("./v2_text/types.js"),xr=require("./v2_text-list/index.js"),dr=require("./v2_theme/index.js"),mr=require("./v2_transition/index.js"),gr=require("./v3_theme/index.js"),hr=require("./v2_theme/types.js"),cr=require("./v3_theme/ds-theme-provider.js"),Tr=require("./v3_theme/use-theme-mode.js");exports.Accordion=e.Accordion,exports.Alert=r.Alert,exports.LoadingDots=t.LoadingDots,exports.LoadingDotsSpinner=o.LoadingDotsSpinner,exports.LoadingSpinner=i.LoadingSpinner,exports.ThemedLoadingSpinner=s.ThemedLoadingSpinner,exports.Avatar=n.Avatar,exports.Badge=p.Badge,exports.BoxContainer=a.BoxContainer,exports.Breadcrumb=u.Breadcrumb,exports.Button=l.Button,exports.ButtonWithIcon=x.ButtonWithIcon,exports.Calendar=d.Calendar,exports.Card=m.Card,exports.Checkbox=g.Checkbox,exports.CountdownTimer=h.CountdownTimer,exports.DashedBorder=c.DashedBorder,exports.DataTable=T.DataTable,exports.DateInput=j.DateInput,exports.DateNavigator=q.DateNavigator,exports.DateRangeInput=V.DateRangeInput,exports.Divider=S.Divider,exports.Drawer=b.Drawer,exports.ESignature=_.ESignature,exports.ErrorDisplay=v.ErrorDisplay,exports.ErrorDisplayHelper=k.ErrorDisplayHelper,exports.Example=y.Example,exports.FeedbackRating=B.FeedbackRating,exports.FileDownload=I.FileDownload,exports.FileUpload=C.FileUpload,exports.Filter=M.Filter,exports.Footer=P.Footer,exports.Form=D.Form,exports.FullscreenImageCarousel=f.FullscreenImageCarousel,exports.HistogramSlider=w.HistogramSlider,exports.IconButton=L.IconButton,exports.ImageButton=R.ImageButton,exports.Input=F.Input,exports.InputGroup=W.InputGroup,exports.InputMultiSelect=N.InputMultiSelect,exports.InputNestedMultiSelect=O.InputNestedMultiSelect,exports.InputNestedSelect=A.InputNestedSelect,exports.InputRangeSelect=G.InputRangeSelect,exports.InputRangeSlider=E.InputRangeSlider,exports.InputSelect=H.InputSelect,exports.InputSlider=Q.InputSlider,exports.Textarea=U.Textarea,exports.Layout=K.Layout,exports.LinkList=z.LinkList,exports.Markup=J.Markup,exports.MaskedInput=X.MaskedInput,exports.Masonry=Y.Masonry,exports.Masthead=Z.Masthead,exports.Menu=$.Menu,exports.MenuTrigger=$.MenuTrigger,exports.Modal=ee.Modal,exports.ModalV2=re.ModalV2,exports.Navbar=te.Navbar,exports.NBComponent=oe.NBComponent,exports.NotificationBanner=oe.NotificationBanner,exports.withNotificationBanner=ie.withNotificationBanner,exports.OtpInput=se.OtpInput,exports.Overlay=ne.Overlay,exports.Pagination=pe.Pagination,exports.PhoneNumberInput=ae.PhoneNumberInput,exports.Pill=ue.Pill,exports.Popover=le.Popover,exports.withPopover=xe.withPopover,exports.PopoverV2=de.PopoverV2,exports.PopoverInline=me.PopoverInline,exports.PopoverTrigger=ge.PopoverTrigger,exports.PredictiveTextInput=he.PredictiveTextInput,exports.ProgressIndicator=ce.ProgressIndicator,exports.RadioButton=Te.RadioButton,exports.SelectHistogram=je.SelectHistogram,exports.Sidenav=qe.Sidenav,exports.SingpassButton=Ve.SingpassButton,exports.SmartAppBanner=Se.SmartAppBanner,exports.Tab=be.Tab,exports.Table=_e.Table,exports.Tag=ve.Tag,exports.TextList=ke.TextList,exports.ThemeProvider=ye.ThemeProvider,exports.useInheritedThemeScope=Be.useInheritedThemeScope,exports.useTheme=Be.useTheme,exports.Border=Ie.Border,exports.BorderStyle=Ie.BorderStyle,exports.BorderThickness=Ie.BorderThickness,exports.Breakpoint=Ce.Breakpoint,exports.Colour=Me.Colour,exports.PrimitiveColours=Me.PrimitiveColours,exports.SemanticColours=Me.SemanticColours,exports.ComponentToken=Pe.ComponentToken,exports.Font=De.Font,exports.FontSpec=De.FontSpec,exports.MediaQuery=fe.MediaQuery,exports.Motion=we.Motion,exports.Radius=Le.Radius,exports.Shadow=Re.Shadow,exports.Spacing=Fe.Spacing,exports.getInheritedInlineCssVariables=We.getInheritedInlineCssVariables,exports.parseCSSVariableValue=We.parseCSSVariableValue,exports.parsePxOrRemValue=We.parsePxOrRemValue,exports.generateFont=Ne.generateFont,exports.getEffectiveTokenOrCustom=Oe.getEffectiveTokenOrCustom,exports.getResolvedValue=Oe.getResolvedValue,exports.getTokenOrDefault=Oe.getTokenOrDefault,exports.isTokenFromSet=Oe.isTokenFromSet,exports.isTokenWithPrefix=Oe.isTokenWithPrefix,exports.toCssValue=Oe.toCssValue,exports.useApplyStyle=Ae.useApplyStyle,exports.useDesignToken=Ge.useDesignToken,exports.useResolvedTokenValue=Ge.useResolvedTokenValue,exports.TimeRangePicker=Ee.TimeRangePicker,exports.TimeSlotBar=He.TimeSlotBar,exports.TimeSlotBarWeek=Qe.TimeSlotBarWeek,exports.TimeSlotWeekView=Ue.TimeSlotWeekView,exports.Timeline=Ke.Timeline,exports.Timepicker=ze.Timepicker,exports.TimeTable=Je.TimeTable,exports.Toast=Xe.Toast,exports.Toggle=Ye.Toggle,exports.Tooltip=Ze.Tooltip,exports.withTooltip=$e.withTooltip,exports.Typography=er.Typography,exports.UneditableSection=rr.UneditableSection,exports.UnitNumberInput=tr.UnitNumberInput,exports.V2_Color=or.V2_Color,exports.V2_DesignToken=ir.V2_DesignToken,exports.V2_Layout=sr.V2_Layout,exports.V2_MediaQuery=nr.V2_MediaQuery,exports.V2_MediaWidths=nr.V2_MediaWidths,exports.V2_TextStyleHelper=pr.V2_TextStyleHelper,Object.defineProperty(exports,"V2_Text",{enumerable:!0,get:function(){return ar.V2_Text}}),exports.V2_TextStyle=ur.V2_TextStyle,Object.defineProperty(exports,"RedirectScope",{enumerable:!0,get:function(){return lr.RedirectScope}}),exports.V2_TextList=xr.V2_TextList,exports.V2_BaseTheme=dr.V2_BaseTheme,exports.V2_BookingSGTheme=dr.V2_BookingSGTheme,exports.V2_CCubeTheme=dr.V2_CCubeTheme,exports.V2_MyLegacyTheme=dr.V2_MyLegacyTheme,exports.V2_OneServiceTheme=dr.V2_OneServiceTheme,exports.V2_RBSTheme=dr.V2_RBSTheme,exports.V2_Transition=mr.V2_Transition,exports.V3_A11yPlaygroundTheme=gr.V3_A11yPlaygroundTheme,exports.V3_BookingSGTheme=gr.V3_BookingSGTheme,exports.V3_Border=gr.V3_Border,exports.V3_Breakpoint=gr.V3_Breakpoint,exports.V3_CCubeTheme=gr.V3_CCubeTheme,exports.V3_Colour=gr.V3_Colour,exports.V3_Font=gr.V3_Font,exports.V3_IMDATheme=gr.V3_IMDATheme,exports.V3_LifeSGTheme=gr.V3_LifeSGTheme,exports.V3_MediaQuery=gr.V3_MediaQuery,exports.V3_Motion=gr.V3_Motion,exports.V3_MyLegacyTheme=gr.V3_MyLegacyTheme,exports.V3_OneServiceTheme=gr.V3_OneServiceTheme,exports.V3_PATheme=gr.V3_PATheme,exports.V3_RBSTheme=gr.V3_RBSTheme,exports.V3_Radius=gr.V3_Radius,exports.V3_SGWDigitalLobbyTheme=gr.V3_SGWDigitalLobbyTheme,exports.V3_SGWDigitalLobbyThemeBase=gr.V3_SGWDigitalLobbyThemeBase,exports.V3_SPFTheme=gr.V3_SPFTheme,exports.V3_Shadow=gr.V3_Shadow,exports.V3_Spacing=gr.V3_Spacing,exports.V3_SupportGoWhereTheme=gr.V3_SupportGoWhereTheme,exports.V3_SupportGoWhereThemeBase=gr.V3_SupportGoWhereThemeBase,Object.defineProperty(exports,"V2_ThemeContextKeys",{enumerable:!0,get:function(){return hr.V2_ThemeContextKeys}}),exports.V3_DSThemeProvider=cr.V3_DSThemeProvider,exports.createThemeWithColourMode=Tr.createThemeWithColourMode,exports.getSystemColourMode=Tr.getSystemColourMode,exports.useDSTheme=Tr.useDSTheme;
+"use strict";var e=require("./accordion/accordion.js"),r=require("./alert/alert.js"),t=require("./animations/loading-dots/loading-dots.js"),o=require("./animations/loading-dots-spinner/loading-dots-spinner.js"),i=require("./animations/loading-spinner/loading-spinner.js"),s=require("./animations/themed-loading-spinner/themed-loading-spinner.js"),n=require("./avatar/avatar.js"),p=require("./badge/badge.js"),a=require("./box-container/box-container.js"),u=require("./breadcrumb/breadcrumb.js"),l=require("./button/button.js"),x=require("./calendar/calendar.js"),d=require("./card/card.js"),m=require("./checkbox/checkbox.js"),g=require("./countdown-timer/countdown-timer.js"),h=require("./dashed-border/dashed-border.js"),T=require("./data-table/data-table.js"),c=require("./date-input/date-input.js"),j=require("./date-navigator/date-navigator.js"),q=require("./date-range-input/date-range-input.js"),S=require("./divider/divider.js"),_=require("./drawer/drawer.js"),V=require("./e-signature/e-signature.js"),b=require("./error-display/error-display.js"),v=require("./error-display/helper.js"),k=require("./example/example.js"),y=require("./feedback-rating/feedback-rating.js"),B=require("./file-download/file-download.js"),I=require("./file-upload/file-upload.js"),M=require("./filter/filter.js"),C=require("./footer/footer.js"),P=require("./form/index.js"),D=require("./fullscreen-image-carousel/fullscreen-image-carousel.js"),f=require("./histogram-slider/histogram-slider.js"),L=require("./image-button/image-button.js"),w=require("./input/input.js"),F=require("./input-group/input-group.js"),R=require("./input-multi-select/input-multi-select.js"),A=require("./input-nested-multi-select/input-nested-multi-select.js"),E=require("./input-nested-select/input-nested-select.js"),W=require("./input-range-select/input-range-select.js"),O=require("./input-range-slider/input-range-slider.js"),N=require("./input-select/input-select.js"),G=require("./input-slider/input-slider.js"),H=require("./input-textarea/textarea.js"),Q=require("./language-switcher/language-switcher.js"),U=require("./layout/index.js"),K=require("./link-list/link-list.js"),X=require("./markup/markup.js"),Y=require("./masked-input/masked-input.js"),z=require("./masonry/masonry.js"),J=require("./masthead/masthead.js"),Z=require("./menu/menu.js"),$=require("./modal/index.js"),ee=require("./modal-v2/index.js"),re=require("./navbar/navbar.js"),te=require("./notification-banner/notification-banner.js"),oe=require("./notification-banner/notification-banner-hoc.js"),ie=require("./otp-input/otp-input.js"),se=require("./overlay/overlay.js"),ne=require("./pagination/pagination.js"),pe=require("./phone-number-input/phone-number-input.js"),ae=require("./pill/pill.js"),ue=require("./popover/popover.js"),le=require("./popover/popover-hoc.js"),xe=require("./popover-v2/popover.js"),de=require("./popover-v2/popover-inline/popover-inline.js"),me=require("./popover-v2/popover-trigger.js"),ge=require("./predictive-text-input/predictive-text-input.js"),he=require("./progress-indicator/progress-indicator.js"),Te=require("./radio-button/radio-button.js"),ce=require("./select-histogram/select-histogram.js"),je=require("./sidenav/sidenav.js"),qe=require("./singpass-button/singpass-button.js"),Se=require("./smart-app-banner/smart-app-banner.js"),_e=require("./tab/tab.js"),Ve=require("./table/table.js"),be=require("./tag/tag.js"),ve=require("./text-list/index.js"),ke=require("./theme/theme-provider/index.js"),ye=require("./theme/theme-provider/hooks.js"),Be=require("./theme/tokens/border.js"),Ie=require("./theme/tokens/breakpoint.js"),Me=require("./theme/tokens/colour.js"),Ce=require("./theme/tokens/component.js"),Pe=require("./theme/tokens/font.js"),De=require("./theme/tokens/media-query.js"),fe=require("./theme/tokens/motion.js"),Le=require("./theme/tokens/radius.js"),we=require("./theme/tokens/shadow.js"),Fe=require("./theme/tokens/spacing.js"),Re=require("./theme/types.js"),Ae=require("./theme/utils/css-variable.js"),Ee=require("./theme/utils/font.js"),We=require("./theme/utils/media-query.js"),Oe=require("./theme/utils/token-resolver.js"),Ne=require("./theme/utils/use-apply-styles.js"),Ge=require("./theme/utils/use-design-token.js"),He=require("./time-range-picker/time-range-picker.js"),Qe=require("./time-slot-bar/time-slot-bar.js"),Ue=require("./time-slot-bar-week/time-slot-bar-week.js"),Ke=require("./time-slot-week-view/time-slot-week-view.js"),Xe=require("./timeline/timeline.js"),Ye=require("./timepicker/timepicker.js"),ze=require("./timetable/timetable.js"),Je=require("./toast/toast.js"),Ze=require("./toggle/toggle.js"),$e=require("./tooltip/tooltip.js"),er=require("./tooltip/tooltip-hoc.js"),rr=require("./typography/index.js"),tr=require("./uneditable-section/index.js"),or=require("./unit-number/unit-number-input.js"),ir=require("./v2_color/color.js"),sr=require("./v2_design-token/design-token.js"),nr=require("./v2_layout/index.js"),pr=require("./v2_media/media.js"),ar=require("./v2_text/helper.js"),ur=require("./v2_text/text.js"),lr=require("./v2_text/text-style.js"),xr=require("./v2_text/types.js"),dr=require("./v2_text-list/index.js"),mr=require("./v2_theme/index.js"),gr=require("./v2_transition/index.js"),hr=require("./v3_theme/index.js"),Tr=require("./v2_theme/types.js"),cr=require("./v3_theme/ds-theme-provider.js"),jr=require("./v3_theme/use-theme-mode.js");exports.Accordion=e.Accordion,exports.Alert=r.Alert,exports.LoadingDots=t.LoadingDots,exports.LoadingDotsSpinner=o.LoadingDotsSpinner,exports.LoadingSpinner=i.LoadingSpinner,exports.ThemedLoadingSpinner=s.ThemedLoadingSpinner,exports.Avatar=n.Avatar,exports.Badge=p.Badge,exports.BoxContainer=a.BoxContainer,exports.Breadcrumb=u.Breadcrumb,exports.Button=l.Button,exports.Calendar=x.Calendar,exports.Card=d.Card,exports.Checkbox=m.Checkbox,exports.CountdownTimer=g.CountdownTimer,exports.DashedBorder=h.DashedBorder,exports.DataTable=T.DataTable,exports.DateInput=c.DateInput,exports.DateNavigator=j.DateNavigator,exports.DateRangeInput=q.DateRangeInput,exports.Divider=S.Divider,exports.Drawer=_.Drawer,exports.ESignature=V.ESignature,exports.ErrorDisplay=b.ErrorDisplay,exports.ErrorDisplayHelper=v.ErrorDisplayHelper,exports.Example=k.Example,exports.FeedbackRating=y.FeedbackRating,exports.FileDownload=B.FileDownload,exports.FileUpload=I.FileUpload,exports.Filter=M.Filter,exports.Footer=C.Footer,exports.Form=P.Form,exports.Component=D.Component,exports.FullscreenImageCarousel=D.FullscreenImageCarousel,exports.HistogramSlider=f.HistogramSlider,exports.ImageButton=L.ImageButton,exports.Input=w.Input,exports.InputGroup=F.InputGroup,exports.InputMultiSelect=R.InputMultiSelect,exports.InputNestedMultiSelect=A.InputNestedMultiSelect,exports.InputNestedSelect=E.InputNestedSelect,exports.InputRangeSelect=W.InputRangeSelect,exports.InputRangeSlider=O.InputRangeSlider,exports.InputSelect=N.InputSelect,exports.InputSlider=G.InputSlider,exports.Textarea=H.Textarea,exports.LanguageSwitcher=Q.LanguageSwitcher,exports.Layout=U.Layout,exports.LinkList=K.LinkList,exports.Markup=X.Markup,exports.MaskedInput=Y.MaskedInput,exports.Masonry=z.Masonry,exports.Masthead=J.Masthead,exports.Menu=Z.Menu,exports.MenuTrigger=Z.MenuTrigger,exports.Modal=$.Modal,exports.ModalV2=ee.ModalV2,exports.Navbar=re.Navbar,exports.NBComponent=te.NBComponent,exports.NotificationBanner=te.NotificationBanner,exports.withNotificationBanner=oe.withNotificationBanner,exports.OtpInput=ie.OtpInput,exports.Overlay=se.Overlay,exports.Pagination=ne.Pagination,exports.PhoneNumberInput=pe.PhoneNumberInput,exports.Pill=ae.Pill,exports.Popover=ue.Popover,exports.withPopover=le.withPopover,exports.PopoverV2=xe.PopoverV2,exports.PopoverInline=de.PopoverInline,exports.PopoverTrigger=me.PopoverTrigger,exports.PredictiveTextInput=ge.PredictiveTextInput,exports.ProgressIndicator=he.ProgressIndicator,exports.RadioButton=Te.RadioButton,exports.SelectHistogram=ce.SelectHistogram,exports.Sidenav=je.Sidenav,exports.SingpassButton=qe.SingpassButton,exports.SmartAppBanner=Se.SmartAppBanner,exports.Tab=_e.Tab,exports.Table=Ve.Table,exports.Tag=be.Tag,exports.TextList=ve.TextList,exports.ThemeProvider=ke.ThemeProvider,exports.useInheritedThemeScope=ye.useInheritedThemeScope,exports.useTheme=ye.useTheme,exports.Border=Be.Border,exports.BorderStyle=Be.BorderStyle,exports.BorderThickness=Be.BorderThickness,exports.Breakpoint=Ie.Breakpoint,exports.Colour=Me.Colour,exports.PrimitiveColours=Me.PrimitiveColours,exports.SemanticColours=Me.SemanticColours,exports.ComponentToken=Ce.ComponentToken,exports.Font=Pe.Font,exports.FontSpec=Pe.FontSpec,exports.MediaQuery=De.MediaQuery,exports.Motion=fe.Motion,exports.Radius=Le.Radius,exports.Shadow=we.Shadow,exports.Spacing=Fe.Spacing,exports.THEME_TYPES=Re.THEME_TYPES,exports.getInheritedInlineCssVariables=Ae.getInheritedInlineCssVariables,exports.parseCSSVariableValue=Ae.parseCSSVariableValue,exports.parsePxOrRemValue=Ae.parsePxOrRemValue,exports.generateFont=Ee.generateFont,exports.generateFontProperties=Ee.generateFontProperties,exports.DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT=We.DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,exports.useSafeMaxWidthMediaQuery=We.useSafeMaxWidthMediaQuery,exports.getEffectiveTokenOrCustom=Oe.getEffectiveTokenOrCustom,exports.getResolvedValue=Oe.getResolvedValue,exports.getTokenOrDefault=Oe.getTokenOrDefault,exports.isTokenFromSet=Oe.isTokenFromSet,exports.isTokenWithPrefix=Oe.isTokenWithPrefix,exports.toCssValue=Oe.toCssValue,exports.useApplyStyle=Ne.useApplyStyle,exports.useDesignToken=Ge.useDesignToken,exports.useResolvedTokenValue=Ge.useResolvedTokenValue,exports.TimeRangePicker=He.TimeRangePicker,exports.TimeSlotBar=Qe.TimeSlotBar,exports.TimeSlotBarWeek=Ue.TimeSlotBarWeek,exports.TimeSlotWeekView=Ke.TimeSlotWeekView,exports.Timeline=Xe.Timeline,exports.Timepicker=Ye.Timepicker,exports.TimeTable=ze.TimeTable,exports.Toast=Je.Toast,exports.Toggle=Ze.Toggle,exports.Tooltip=$e.Tooltip,exports.withTooltip=er.withTooltip,exports.Typography=rr.Typography,exports.UneditableSection=tr.UneditableSection,exports.UnitNumberInput=or.UnitNumberInput,exports.V2_Color=ir.V2_Color,exports.V2_DesignToken=sr.V2_DesignToken,exports.V2_Layout=nr.V2_Layout,exports.V2_MediaQuery=pr.V2_MediaQuery,exports.V2_MediaWidths=pr.V2_MediaWidths,exports.V2_TextStyleHelper=ar.V2_TextStyleHelper,Object.defineProperty(exports,"V2_Text",{enumerable:!0,get:function(){return ur.V2_Text}}),exports.V2_TextStyle=lr.V2_TextStyle,Object.defineProperty(exports,"RedirectScope",{enumerable:!0,get:function(){return xr.RedirectScope}}),exports.V2_TextList=dr.V2_TextList,exports.V2_BaseTheme=mr.V2_BaseTheme,exports.V2_BookingSGTheme=mr.V2_BookingSGTheme,exports.V2_CCubeTheme=mr.V2_CCubeTheme,exports.V2_MyLegacyTheme=mr.V2_MyLegacyTheme,exports.V2_OneServiceTheme=mr.V2_OneServiceTheme,exports.V2_RBSTheme=mr.V2_RBSTheme,exports.V2_Transition=gr.V2_Transition,exports.V3_A11yPlaygroundTheme=hr.V3_A11yPlaygroundTheme,exports.V3_BookingSGTheme=hr.V3_BookingSGTheme,exports.V3_Border=hr.V3_Border,exports.V3_Breakpoint=hr.V3_Breakpoint,exports.V3_CCubeTheme=hr.V3_CCubeTheme,exports.V3_Colour=hr.V3_Colour,exports.V3_Font=hr.V3_Font,exports.V3_IMDATheme=hr.V3_IMDATheme,exports.V3_LifeSGTheme=hr.V3_LifeSGTheme,exports.V3_MediaQuery=hr.V3_MediaQuery,exports.V3_Motion=hr.V3_Motion,exports.V3_MyLegacyTheme=hr.V3_MyLegacyTheme,exports.V3_OneServiceTheme=hr.V3_OneServiceTheme,exports.V3_PATheme=hr.V3_PATheme,exports.V3_RBSTheme=hr.V3_RBSTheme,exports.V3_Radius=hr.V3_Radius,exports.V3_SGWDigitalLobbyTheme=hr.V3_SGWDigitalLobbyTheme,exports.V3_SGWDigitalLobbyThemeBase=hr.V3_SGWDigitalLobbyThemeBase,exports.V3_SMGSTheme=hr.V3_SMGSTheme,exports.V3_SPFTheme=hr.V3_SPFTheme,exports.V3_Shadow=hr.V3_Shadow,exports.V3_Spacing=hr.V3_Spacing,exports.V3_SupportGoWhereTheme=hr.V3_SupportGoWhereTheme,exports.V3_SupportGoWhereThemeBase=hr.V3_SupportGoWhereThemeBase,Object.defineProperty(exports,"V2_ThemeContextKeys",{enumerable:!0,get:function(){return Tr.V2_ThemeContextKeys}}),exports.V3_DSThemeProvider=cr.V3_DSThemeProvider,exports.createThemeWithColourMode=jr.createThemeWithColourMode,exports.getSystemColourMode=jr.getSystemColourMode,exports.useDSTheme=jr.useDSTheme;
 //# sourceMappingURL=index.js.map

package/cjs/input/input.js

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

package/cjs/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../src/input/input.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef } from \"react\";\n\nimport { StringHelper, useNextInputState } from \"../util\";\nimport {\n    ClearButton,\n    ClearIcon,\n    DefaultWrapper,\n    InputElement,\n    NoBorderWrapper,\n} from \"./input.style\";\nimport type { InputProps, InputRef } from \"./types\";\n\nconst shouldAllowSpacing = (\n    type: string | undefined,\n    spacing: number | undefined\n): spacing is number => {\n    return type === \"tel\" && !!spacing;\n};\n\nconst Component = (\n    {\n        value,\n        spacing,\n        type,\n        error,\n        disabled,\n        readOnly,\n        onChange,\n        onClear,\n        allowClear = false,\n        className,\n        styleType = \"bordered\",\n        ...otherProps\n    }: InputProps,\n    ref: InputRef\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const allowSpacing = shouldAllowSpacing(type, spacing);\n    const elementRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => elementRef.current!, []);\n\n    const getNextInputState = useNextInputState({\n        ref: elementRef,\n        formatter: (value) => {\n            return allowSpacing\n                ? StringHelper.transformWithSpaces(value, spacing)\n                : value;\n        },\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) {\n            if (allowSpacing) {\n                handleSpacingAndCaretPosition(event);\n            } else {\n                onChange(event);\n            }\n        }\n    };\n\n    const handleClear = () => {\n        if (onClear) onClear();\n\n        if (elementRef && elementRef.current) {\n            elementRef.current.focus();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const convertInputString = (value: string | number | readonly string[]) => {\n        if (!value) return \"\";\n        if (allowSpacing) {\n            return StringHelper.transformWithSpaces(value, spacing);\n        }\n        return value;\n    };\n\n    const handleSpacingAndCaretPosition = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        // Send to handler unspaced value\n        const valueWithoutSpace = nextValue.replace(/\\s/g, \"\");\n        event.target.value = valueWithoutSpace;\n        onChange?.(event);\n\n        updateCaretPosition();\n    };\n\n    const shouldShowClear = () => {\n        return allowClear && !disabled && !readOnly && !!value;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    /**\n     * To clear controlled input value, you have to pass in value as empty string,\n     * then set `updatedValue` to empty string.\n     * `updatedValue` for uncontrolled components remains as undefined such that the\n     * user is free to edit the field. (else the value of the InputElement will\n     * be set to empty string)\n     */\n    const updatedValue = value ? convertInputString(value) : value;\n    const showClear = shouldShowClear();\n\n    const renderInputElement = () => {\n        return (\n            <>\n                <InputElement\n                    data-testid=\"input\"\n                    ref={elementRef}\n                    aria-disabled={disabled}\n                    value={updatedValue}\n                    onChange={handleChange}\n                    type={type}\n                    readOnly={readOnly || disabled}\n                    $showClear={showClear}\n                    $styleType={styleType}\n                    $visuallyReadOnly={readOnly}\n                    {...otherProps}\n                />\n                {showClear && (\n                    <ClearButton\n                        onClick={handleClear}\n                        type=\"button\"\n                        aria-label=\"Clear input\"\n                        $styleType={styleType}\n                    >\n                        <ClearIcon aria-hidden />\n                    </ClearButton>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <>\n            {styleType === \"no-border\" ? (\n                <NoBorderWrapper className={className}>\n                    {renderInputElement()}\n                </NoBorderWrapper>\n            ) : (\n                <DefaultWrapper\n                    $disabled={disabled}\n                    $error={error}\n                    $readOnly={readOnly}\n                    className={className}\n                >\n                    {renderInputElement()}\n                </DefaultWrapper>\n            )}\n        </>\n    );\n};\n\nexport const Input = React.forwardRef(Component);\n"],"names":["Input","React","forwardRef","_a","ref","value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType","otherProps","__rest","allowSpacing","shouldAllowSpacing","elementRef","useRef","useImperativeHandle","current","getNextInputState","useNextInputState","formatter","StringHelper","transformWithSpaces","handleChange","event","handleSpacingAndCaretPosition","handleClear","focus","nextState","nextValue","updateCaretPosition","valueWithoutSpace","replace","target","updatedValue","convertInputString","showClear","renderInputElement","_jsxs","_Fragment","children","_jsx","InputElement","Object","assign","$showClear","$styleType","$visuallyReadOnly","ClearButton","onClick","ClearIcon","NoBorderWrapper","DefaultWrapper","$disabled","$error"],"mappings":"mXAYA,MA2JaA,OAAQC,QAAMC,YApJT,CACdC,EAcAC,KAdA,IAAAC,MACIA,EAAKC,QACLA,EAAOC,KACPA,EAAIC,MACJA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,WACPA,GAAa,EAAKC,UAClBA,EAASC,UACTA,EAAY,YAAUZ,EACnBa,EAAUC,EAAAA,OAAAd,EAZjB,oHAmBA,MAAMe,EA3BiB,EACvBX,EACAD,IAEgB,QAATC,KAAoBD,EAuBNa,CAAmBZ,EAAMD,GACxCc,EAAaC,EAAAA,OAAyB,MAC5CC,EAAAA,oBAAoBlB,GAAK,IAAMgB,EAAWG,SAAU,IAEpD,MAAMC,EAAoBC,EAAAA,kBAAkB,CACxCrB,IAAKgB,EACLM,UAAYrB,GACDa,EACDS,eAAaC,oBAAoBvB,EAAOC,GACxCD,IAORwB,EAAgBC,IACdnB,IACIO,EACAa,EAA8BD,GAE9BnB,EAASmB,GAEjB,EAGEE,EAAc,KACZpB,GAASA,IAETQ,GAAcA,EAAWG,SACzBH,EAAWG,QAAQU,OACvB,EAcEF,EACFD,IAEA,MAAMI,EAAYV,IAClB,IAAKU,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAGrCG,EAAoBF,EAAUG,QAAQ,MAAO,IACnDR,EAAMS,OAAOlC,MAAQgC,EACrB1B,SAAAA,EAAWmB,GAEXM,GAAqB,EAiBnBI,EAAenC,EAtCM,CAACA,GACnBA,EACDa,EACOS,eAAaC,oBAAoBvB,EAAOC,GAE5CD,EAJY,GAqCMoC,CAAmBpC,GAASA,EACnDqC,EAdK7B,IAAeJ,IAAaC,KAAcL,EAgB/CsC,EAAqB,IAEnBC,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,eAAYC,OAAAC,OAAA,CAAA,cACG,QACZ9C,IAAKgB,EAAU,gBACAX,EACfJ,MAAOmC,EACP7B,SAAUkB,EACVtB,KAAMA,EACNG,SAAUA,GAAYD,EAAQ0C,WAClBT,EAASU,WACTrC,EAASsC,kBACF3C,GACfM,IAEP0B,GACGK,EAAAA,IAACO,EAAAA,YAAW,CACRC,QAASvB,EACTzB,KAAK,SAAQ,aACF,yBACCQ,EAAS+B,SAErBC,EAAAA,IAACS,EAAAA,UAAS,CAAA,eAAA,SAO9B,OACIT,EAAAA,IAAAF,EAAAA,SAAA,CAAAC,SACmB,cAAd/B,EACGgC,EAAAA,IAACU,EAAAA,gBAAe,CAAC3C,UAAWA,WACvB6B,MAGLI,MAACW,EAAAA,eAAc,CAAAC,UACAlD,EAAQmD,OACXpD,YACGE,EACXI,UAAWA,WAEV6B,OAGV"}
+{"version":3,"file":"input.js","sources":["../../../src/input/input.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport React, { useImperativeHandle, useRef } from \"react\";\n\nimport { BasicButton, BasicInput, InputBox } from \"../shared/input-wrapper\";\nimport { StringHelper, useNextInputState } from \"../util\";\nimport * as styles from \"./input.styles\";\nimport type { InputProps, InputRef } from \"./types\";\n\nconst shouldAllowSpacing = (\n    type: string | undefined,\n    spacing: number | undefined\n): spacing is number => {\n    return type === \"tel\" && !!spacing;\n};\n\nconst Component = (\n    {\n        value,\n        spacing,\n        type,\n        error,\n        disabled,\n        readOnly,\n        onChange,\n        onClear,\n        allowClear = false,\n        className,\n        styleType = \"bordered\",\n        ...otherProps\n    }: InputProps,\n    ref: InputRef\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const allowSpacing = shouldAllowSpacing(type, spacing);\n    const elementRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => elementRef.current!, []);\n\n    const getNextInputState = useNextInputState({\n        ref: elementRef,\n        formatter: (value) => {\n            return allowSpacing\n                ? StringHelper.transformWithSpaces(value, spacing)\n                : value;\n        },\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) {\n            if (allowSpacing) {\n                handleSpacingAndCaretPosition(event);\n            } else {\n                onChange(event);\n            }\n        }\n    };\n\n    const handleClear = () => {\n        if (onClear) onClear();\n\n        if (elementRef && elementRef.current) {\n            elementRef.current.focus();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const convertInputString = (value: string | number | readonly string[]) => {\n        if (!value) return \"\";\n        if (allowSpacing) {\n            return StringHelper.transformWithSpaces(value, spacing);\n        }\n        return value;\n    };\n\n    const handleSpacingAndCaretPosition = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        // Send to handler unspaced value\n        const valueWithoutSpace = nextValue.replace(/\\s/g, \"\");\n        event.target.value = valueWithoutSpace;\n        onChange?.(event);\n\n        updateCaretPosition();\n    };\n\n    const shouldShowClear = () => {\n        return allowClear && !disabled && !readOnly && !!value;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    /**\n     * To clear controlled input value, you have to pass in value as empty string,\n     * then set `updatedValue` to empty string.\n     * `updatedValue` for uncontrolled components remains as undefined such that the\n     * user is free to edit the field. (else the value of the InputElement will\n     * be set to empty string)\n     */\n    const updatedValue = value ? convertInputString(value) : value;\n    const showClear = shouldShowClear();\n\n    const renderInputElement = () => {\n        const inputClassName = clsx(styles.inputElement, {\n            [styles.inputElementDisabled]: disabled,\n            [styles.inputElementPaddingLeft]:\n                styleType !== \"no-border\" && !readOnly,\n            [styles.inputElementPaddingRight]:\n                styleType !== \"no-border\" && !readOnly && !showClear,\n        });\n\n        const clearButtonClassName = clsx(\n            styles.clearButton,\n            styleType === \"no-border\" && styles.clearButtonNoBorder\n        );\n\n        return (\n            <>\n                <BasicInput\n                    data-testid=\"input\"\n                    ref={elementRef}\n                    aria-disabled={disabled}\n                    value={updatedValue}\n                    onChange={handleChange}\n                    type={type}\n                    readOnly={readOnly || disabled}\n                    className={inputClassName}\n                    {...otherProps}\n                />\n                {showClear && (\n                    <BasicButton\n                        onClick={handleClear}\n                        type=\"button\"\n                        aria-label=\"Clear input\"\n                        className={clearButtonClassName}\n                    >\n                        <CrossIcon className={styles.clearIcon} aria-hidden />\n                    </BasicButton>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <>\n            {styleType === \"no-border\" ? (\n                <div className={clsx(styles.noBorderWrapper, className)}>\n                    {renderInputElement()}\n                </div>\n            ) : (\n                <InputBox\n                    className={clsx(styles.defaultWrapper, className, {\n                        [styles.defaultWrapperDisabled]: disabled,\n                        [styles.defaultWrapperError]: error,\n                        [styles.defaultWrapperReadOnly]: readOnly,\n                    })}\n                    disabled={disabled}\n                    error={error}\n                    readOnly={readOnly}\n                >\n                    {renderInputElement()}\n                </InputBox>\n            )}\n        </>\n    );\n};\n\nexport const Input = React.forwardRef(Component);\n"],"names":["Input","React","forwardRef","_a","ref","value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType","otherProps","__rest","allowSpacing","shouldAllowSpacing","elementRef","useRef","useImperativeHandle","current","getNextInputState","useNextInputState","formatter","StringHelper","transformWithSpaces","handleChange","event","handleSpacingAndCaretPosition","handleClear","focus","nextState","nextValue","updateCaretPosition","valueWithoutSpace","replace","target","updatedValue","convertInputString","showClear","renderInputElement","inputClassName","clsx","styles.inputElement","styles.inputElementDisabled","styles.inputElementPaddingLeft","styles.inputElementPaddingRight","clearButtonClassName","styles.clearButton","styles.clearButtonNoBorder","_jsxs","_Fragment","children","_jsx","BasicInput","BasicButton","onClick","CrossIcon","styles.clearIcon","styles.noBorderWrapper","InputBox","styles.defaultWrapper","styles.defaultWrapperDisabled","styles.defaultWrapperError","styles.defaultWrapperReadOnly"],"mappings":"kkBASA,MA0KaA,OAAQC,QAAMC,YAnKT,CACdC,EAcAC,KAdA,IAAAC,MACIA,EAAKC,QACLA,EAAOC,KACPA,EAAIC,MACJA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,WACPA,GAAa,EAAKC,UAClBA,EAASC,UACTA,EAAY,YAAUZ,EACnBa,EAAUC,EAAAA,OAAAd,EAZjB,oHAmBA,MAAMe,EA3BiB,EACvBX,EACAD,IAEgB,QAATC,KAAoBD,EAuBNa,CAAmBZ,EAAMD,GACxCc,EAAaC,EAAAA,OAAyB,MAC5CC,EAAAA,oBAAoBlB,GAAK,IAAMgB,EAAWG,SAAU,IAEpD,MAAMC,EAAoBC,EAAAA,kBAAkB,CACxCrB,IAAKgB,EACLM,UAAYrB,GACDa,EACDS,eAAaC,oBAAoBvB,EAAOC,GACxCD,IAORwB,EAAgBC,IACdnB,IACIO,EACAa,EAA8BD,GAE9BnB,EAASmB,GAEjB,EAGEE,EAAc,KACZpB,GAASA,IAETQ,GAAcA,EAAWG,SACzBH,EAAWG,QAAQU,OACvB,EAcEF,EACFD,IAEA,MAAMI,EAAYV,IAClB,IAAKU,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAGrCG,EAAoBF,EAAUG,QAAQ,MAAO,IACnDR,EAAMS,OAAOlC,MAAQgC,EACrB1B,SAAAA,EAAWmB,GAEXM,GAAqB,EAiBnBI,EAAenC,EAtCM,CAACA,GACnBA,EACDa,EACOS,eAAaC,oBAAoBvB,EAAOC,GAE5CD,EAJY,GAqCMoC,CAAmBpC,GAASA,EACnDqC,EAdK7B,IAAeJ,IAAaC,KAAcL,EAgB/CsC,EAAqB,KACvB,MAAMC,EAAiBC,EAAAA,QAAKC,eAAqB,CAC7C,CAACC,EAAAA,sBAA8BtC,EAC/B,CAACuC,2BACiB,cAAdjC,IAA8BL,EAClC,CAACuC,EAAAA,0BACiB,cAAdlC,IAA8BL,IAAagC,IAG7CQ,EAAuBL,EAAAA,QACzBM,EAAAA,YACc,cAAdpC,GAA6BqC,EAAAA,qBAGjC,OACIC,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,0CACe,QACZrD,IAAKgB,EAAU,gBACAX,EACfJ,MAAOmC,EACP7B,SAAUkB,EACVtB,KAAMA,EACNG,SAAUA,GAAYD,EACtBK,UAAW8B,GACP5B,IAEP0B,GACGc,EAAAA,IAACE,EAAAA,YAAW,CACRC,QAAS3B,EACTzB,KAAK,sBACM,cACXO,UAAWoC,EAAoBK,SAE/BC,MAACI,EAAAA,WAAU9C,UAAW+C,YAAgB,eAAA,QAG/C,EAIX,OACIL,MAAAF,EAAAA,SAAA,CAAAC,SACmB,cAAdxC,EACGyC,EAAAA,IAAA,MAAA,CAAK1C,UAAW+B,UAAKiB,EAAAA,gBAAwBhD,GAAUyC,SAClDZ,MAGLa,EAAAA,IAACO,EAAAA,UACGjD,UAAW+B,UAAKmB,EAAAA,eAAuBlD,EAAW,CAC9C,CAACmD,EAAAA,wBAAgCxD,EACjC,CAACyD,EAAAA,qBAA6B1D,EAC9B,CAAC2D,EAAAA,wBAAgCzD,IAErCD,SAAUA,EACVD,MAAOA,EACPE,SAAUA,WAETiC,OAGV"}

package/cjs/input/input.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./input.styles_1cblor0.css");exports.clearButton="cw4xcs5",exports.clearButtonNoBorder="c12bgeeg",exports.clearIcon="c1v4p080",exports.defaultWrapper="d7twtqb",exports.defaultWrapperDisabled="d1rboro0",exports.defaultWrapperError="d6he67o",exports.defaultWrapperReadOnly="dtt8rz0",exports.inputElement="in7cu42",exports.inputElementDisabled="igi2hjf",exports.inputElementPaddingLeft="i13ih4tu",exports.inputElementPaddingRight="itgr0ej",exports.noBorderWrapper="n1rpxuv8";
+//# sourceMappingURL=input.styles.js.map

package/cjs/input/input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.styles.js","sources":["../../../src/input/input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputElement = css`\n    width: 100%;\n    height: calc(3rem - 2px); /* exclude top and bottom borders */\n`;\n\nexport const inputElementDisabled = css`\n    color: ${Colour[\"text-subtler\"]};\n\n    &:hover {\n        cursor: not-allowed;\n    }\n`;\n\nexport const inputElementPaddingLeft = css`\n    padding-left: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const inputElementPaddingRight = css`\n    padding-right: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const clearButton = css`\n    height: auto;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    cursor: pointer;\n    color: ${Colour.icon};\n`;\n\nexport const clearButtonNoBorder = css`\n    margin-right: calc(${Spacing[\"spacing-12\"]} * -1);\n`;\n\nexport const clearIcon = css`\n    height: 1.25rem;\n    width: 1.25rem;\n    vertical-align: middle;\n`;\n\nexport const noBorderWrapper = css`\n    display: flex;\n    width: 100%;\n`;\n\nexport const defaultWrapper = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n`;\n\nexport const defaultWrapperReadOnly = css`\n    border-color: transparent;\n    padding: 0;\n    background: transparent !important;\n\n    &:focus-within {\n        outline-color: ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const defaultWrapperDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n\n    &:focus-within {\n        outline-color: ${Colour[\"border-disabled\"]};\n    }\n`;\n\nexport const defaultWrapperError = css`\n    border-color: ${Colour[\"border-error\"]};\n\n    &:focus-within {\n        outline-color: ${Colour[\"border-error-focus\"]};\n    }\n`;\n"],"names":[],"mappings":"4FA4BwB,sCAOQ,6BAIV,kCAWK,yCAgBQ,uCASH,yCAnBG,+BAjDV,uCAKQ,0CAQG,4CAIC,kCAqBT"}

package/cjs/input/input.styles_1cblor0.css

@@ -0,0 +1,12 @@
+.in7cu42{width:100%;height:calc(3rem - 2px);}
+.igi2hjf{color:var(--fds-colour-text-subtler);}.igi2hjf:hover{cursor:not-allowed;}
+.i13ih4tu{padding-left:var(--fds-spacing-16);}
+.itgr0ej{padding-right:var(--fds-spacing-16);}
+.cw4xcs5{height:auto;padding:var(--fds-spacing-12) var(--fds-spacing-16);cursor:pointer;color:var(--fds-colour-icon);}
+.c12bgeeg{margin-right:calc(var(--fds-spacing-12) * -1);}
+.c1v4p080{height:1.25rem;width:1.25rem;vertical-align:middle;}
+.n1rpxuv8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}
+.d7twtqb{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;width:100%;}
+.dtt8rz0{border-color:transparent;padding:0;background:transparent!important;}.dtt8rz0:focus-within{outline-color:var(--fds-colour-border-focus);}
+.d1rboro0{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.d1rboro0:focus-within{outline-color:var(--fds-colour-border-disabled);}
+.d6he67o{border-color:var(--fds-colour-border-error);}.d6he67o:focus-within{outline-color:var(--fds-colour-border-error-focus);}

package/cjs/input-group/input-group-list-addon.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react"),i=require("../shared/accessibility/index.js");require("styled-components"),require("../util/string-helper.js"),require("../v3_theme/index.js"),require("../shared/dropdown-list-v2/dropdown-label.styles.js");var t=require("../shared/dropdown-list-v2/dropdown-list.js"),s=require("../shared/dropdown-list-v2/dropdown-list-state.js");require("../shared/dropdown-list-v2/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js"),d=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),o=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list-v2/dropdown-list.styles.js"),require("../shared/dropdown-list-v2/dropdown-search.js"),require("../shared/dropdown-list-v2/nested-dropdown-list.styles.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js");var n=require("./input-group-list-addon.style.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const c=(u,c)=>{var{addon:p,error:h,onChange:b,readOnly:x,disabled:j,className:y,onBlur:q,noBorder:m,"data-testid":v,"aria-labelledby":w,"aria-describedby":f,"aria-invalid":g,"aria-label":S}=u,$=e.__rest(u,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:I,listExtractor:O,enableSearch:R,hideNoResultsDisplay:T,noResultsDescription:D,searchPlaceholder:E,searchFunction:B,onSearch:_,placeholder:L="Select",displayValueExtractor:C,"data-selector-testid":N,options:F,selectedOption:V,onSelectOption:H,optionsLoadState:A,optionTruncationType:P,onRetry:k,onHideOptions:G,onShowOptions:W,dropdownZIndex:Z,dropdownRootNode:z,"aria-label":J}=p.attributes,{position:K}=p,[M,Q]=a.useState(V),[U,X]=a.useState(!1),[Y,ee]=a.useState(!1),[re]=a.useState((()=>l.SimpleIdGenerator.generate())),ae=`${re}-listbox`,ie=`${re}-instruction`,te=`${re}-combobox-label`,se=`${re}-textbox-label`,le=a.useRef(null),de=a.useRef(null);a.useEffect((()=>{Q(V)}),[V]);const oe=()=>{if(M)return C?C(M):I?I(M):M.toString()},ne=e=>{e?null==W||W():null==G||G()},ue=(e,r)=>{var a;null===(a=de.current)||void 0===a||a.focus(),Q(e),X(!1),ne(!1),null==H||H(e,r)},ce=()=>{U&&(X(!1),ne(!1))},pe=()=>{X(!0),ne(!0),ee(!0)},he=e=>{X(!1),ne(!1),"click"!==e&&(ee(!1),null==q||q())},be=()=>{var e;null===(e=de.current)||void 0===e||e.focus(),X(!1),ne(!1)},xe=()=>r.jsxs("div",{children:[r.jsx(n.StyledExpandableElement,{ref:de,disabled:j,expanded:U,listboxId:ae,popupRole:"listbox",readOnly:x,"aria-labelledby":i.concatIds(w,te),"aria-describedby":i.concatIds(f,ie),"aria-invalid":g,$noBorder:m,$position:K,children:r.jsx(d.LabelContainer,{$disabled:j,children:M?r.jsx(d.ValueLabel,{children:oe()}):r.jsx(d.PlaceholderLabel,{children:L})})}),r.jsx(i.VisuallyHidden,{id:ie,children:"Press space to open options"})]}),je=()=>r.jsx(t.DropdownList,{listboxId:ae,listItems:F,onSelectItem:ue,onDismiss:ce,valueExtractor:I,listExtractor:O,enableSearch:R,hideNoResultsDisplay:T,noResultsDescription:D,searchPlaceholder:E,searchFunction:B,onSearch:_,selectedItems:M?[M]:[],itemsLoadState:A,itemTruncationType:P,onRetry:k,matchElementWidth:!0});return r.jsx(s.DropdownListState,{children:r.jsxs(n.FieldWrapper,{$focused:Y,$disabled:j,$readOnly:x,$error:h,$position:K,ref:le,className:y,"data-testid":v,$noBorder:m,tabIndex:-1,onFocus:()=>{Y||U||ee(!0)},onBlur:e=>{Y&&!U&&le.current&&!le.current.contains(e.relatedTarget)&&(ee(!1),null==q||q())},children:[r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:te,children:J}),r.jsx(n.FieldSelector,{"data-testid":N,children:x?M?r.jsx(n.SelectorReadOnly,{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":w,"aria-describedby":f,"aria-invalid":g,children:r.jsx(d.ValueLabel,{children:oe()})}):null:r.jsx(o.ElementWithDropdown,{enabled:!x&&!j,isOpen:U,renderElement:xe,renderDropdown:je,onOpen:pe,onClose:he,onDismiss:be,clickToToggle:!0,offset:8,alignment:"right"===K?"right":"left",fitAvailableHeight:!0,customZIndex:Z,rootNode:z,positionRef:le})}),r.jsx(n.Divider,{$readOnly:x,$position:K}),r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:se,children:S}),r.jsx(n.FieldInput,Object.assign({ref:c},$,{$position:K,$noBorder:m,readOnly:x,disabled:j,error:h,onChange:e=>{b&&b(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":i.concatIds(w,se),"aria-describedby":f,"aria-invalid":g}))]})})},p=u(a).default.forwardRef(c);exports.Component=c,exports.InputGroupListAddon=p;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("clsx"),i=require("react"),s=require("../input/input.js"),t=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css");var d=require("../shared/dropdown-list/dropdown-list.js"),o=require("../shared/dropdown-list/dropdown-list-state.js"),n=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var u=require("../shared/dropdown-wrapper/element-with-dropdown.js"),c=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1qveyb9.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");var p=require("../shared/dropdown-wrapper/dropdown-wrapper.js"),h=require("./input-group-list-addon.styles.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=b(a);const q=(a,b)=>{var{addon:q,error:j,onChange:m,readOnly:f,disabled:y,className:w,onBlur:v,noBorder:g,"data-testid":_,"aria-labelledby":I,"aria-describedby":S,"aria-invalid":T,"aria-label":O}=a,R=e.__rest(a,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:N,listExtractor:A,enableSearch:E,hideNoResultsDisplay:k,noResultsDescription:B,searchPlaceholder:C,searchFunction:D,onSearch:H,placeholder:L="Select",displayValueExtractor:P,"data-selector-testid":G,options:V,selectedOption:M,onSelectOption:$,optionsLoadState:F,optionTruncationType:W,onRetry:Z,onHideOptions:z,onShowOptions:J,dropdownZIndex:K,dropdownRootNode:Q,"aria-label":U}=q.attributes,{position:X="left"}=q,[Y,ee]=i.useState(M),[re,ae]=i.useState(!1),[ie,se]=i.useState(!1),te=l.useId(),le=`${te}-listbox`,de=`${te}-instruction`,oe=`${te}-combobox-label`,ne=`${te}-textbox-label`,ue=i.useRef(null),ce=i.useRef(null);i.useEffect((()=>{ee(M)}),[M]);const pe=()=>{if(Y)return P?P(Y):N?N(Y):Y.toString()},he=e=>{e?null==J||J():null==z||z()},be=(e,r)=>{var a;null===(a=ce.current)||void 0===a||a.focus(),ee(e),ae(!1),he(!1),null==$||$(e,r)},xe=()=>{re&&(ae(!1),he(!1))},qe=()=>{ae(!0),he(!0),se(!0)},je=e=>{ae(!1),he(!1),"click"!==e&&(se(!1),null==v||v())},me=()=>{var e;null===(e=ce.current)||void 0===e||e.focus(),ae(!1),he(!1)},fe=()=>r.jsxs("div",{children:[r.jsx(n.ExpandableElement,{ref:ce,disabled:y,expanded:re,listboxId:le,popupRole:"listbox",readOnly:f,"aria-labelledby":t.concatIds(I,oe),"aria-describedby":t.concatIds(S,de),"aria-invalid":T,"data-position":X,className:x.default(g&&h.expandableElementNoBorder),children:r.jsx(p.LabelContainer,{disabled:y,children:Y?r.jsx(p.ValueLabel,{children:pe()}):r.jsx(p.PlaceholderLabel,{children:L})})}),r.jsx(t.VisuallyHidden,{id:de,children:"Press space to open options"})]}),ye=()=>r.jsx(d.DropdownList,{listboxId:le,listItems:V,onSelectItem:be,onDismiss:xe,valueExtractor:N,listExtractor:A,enableSearch:E,hideNoResultsDisplay:k,noResultsDescription:B,searchPlaceholder:C,searchFunction:D,onSearch:H,selectedItems:Y?[Y]:[],itemsLoadState:F,itemTruncationType:W,onRetry:Z,matchElementWidth:!0});return r.jsx(o.DropdownListState,{children:r.jsxs(c.InputBox,{focused:ie,disabled:y,readOnly:f,error:j,ref:ue,noBorder:g,"data-testid":_,tabIndex:-1,onFocus:()=>{ie||re||se(!0)},onBlur:e=>{ie&&!re&&ue.current&&!ue.current.contains(e.relatedTarget)&&(se(!1),null==v||v())},"data-position":X,className:x.default(h.fieldWrapper,w),children:[r.jsx(t.VisuallyHidden,{"aria-hidden":!0,id:oe,children:U}),r.jsx("div",{"data-testid":G,className:h.fieldSelector,children:f?Y?r.jsx("div",{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":I,"aria-describedby":S,"aria-invalid":T,className:h.selectorReadOnly,children:r.jsx(p.ValueLabel,{children:pe()})}):null:r.jsx(u.ElementWithDropdown,{enabled:!f&&!y,isOpen:re,renderElement:fe,renderDropdown:ye,onOpen:qe,onClose:je,onDismiss:me,clickToToggle:!0,offset:8,alignment:"right"===X?"right":"left",fitAvailableHeight:!0,customZIndex:K,rootNode:Q,positionRef:ue})}),r.jsx("div",{"data-position":X,className:x.default(h.divider,f&&h.dividerReadOnly)}),r.jsx(t.VisuallyHidden,{"aria-hidden":!0,id:ne,children:O}),r.jsx(s.Input,Object.assign({ref:b},R,{readOnly:f,disabled:y,error:j,onChange:e=>{m&&m(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":t.concatIds(I,ne),"aria-describedby":S,"aria-invalid":T,"data-position":X,className:x.default(f&&h.fieldInputReadOnly,!f&&g&&h.fieldInputNoBorder,!f&&!g&&h.fieldInputPosition)}))]})})},j=b(i).default.forwardRef(q);exports.Component=q,exports.InputGroupListAddon=j;
 //# sourceMappingURL=input-group-list-addon.js.map

package/cjs/input-group/input-group-list-addon.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group-list-addon.js","sources":["../../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { SimpleIdGenerator } from \"../util\";\nimport {\n    Divider,\n    FieldInput,\n    FieldSelector,\n    FieldWrapper,\n    SelectorReadOnly,\n    StyledExpandableElement,\n} from \"./input-group-list-addon.style\";\nimport type { InputGroupProps, ListAddon } from \"./types\";\n\nexport const Component = <T, V>(\n    {\n        addon,\n        error,\n        onChange,\n        readOnly,\n        disabled,\n        className,\n        onBlur,\n        noBorder,\n        \"data-testid\": testId,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": ariaInvalid,\n        \"aria-label\": textboxAriaLabel,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const {\n        /* display props */\n        valueExtractor,\n        listExtractor,\n        /* search props */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription,\n        searchPlaceholder,\n        searchFunction,\n        onSearch,\n        /* list addon props */\n        placeholder = \"Select\",\n        displayValueExtractor,\n        \"data-selector-testid\": selectorTestId,\n        options,\n        selectedOption,\n        onSelectOption,\n        optionsLoadState,\n        optionTruncationType,\n        onRetry,\n        onHideOptions,\n        onShowOptions,\n        dropdownZIndex,\n        dropdownRootNode,\n        \"aria-label\": comboboxAriaLabel,\n    } = addon!.attributes as ListAddon<T, V>;\n\n    const { position } = addon!;\n\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n    const listboxId = `${internalId}-listbox`;\n    const instructionId = `${internalId}-instruction`;\n    const comboboxLabelId = `${internalId}-combobox-label`;\n    const textboxLabelId = `${internalId}-textbox-label`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = () => {\n        if (!selected) return;\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            return valueExtractor(selected);\n        }\n\n        return selected.toString();\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) onChange(event);\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    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected) {\n            return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n        } else {\n            return <ValueLabel>{getDisplayValue()}</ValueLabel>;\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer $disabled={disabled}>{renderLabel()}</LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <div>\n                <StyledExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={listboxId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    aria-labelledby={concatIds(ariaLabelledBy, comboboxLabelId)}\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    aria-invalid={ariaInvalid}\n                    $noBorder={noBorder}\n                    $position={position}\n                >\n                    {renderSelectorContent()}\n                </StyledExpandableElement>\n                <VisuallyHidden id={instructionId}>\n                    Press space to open options\n                </VisuallyHidden>\n            </div>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={listboxId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                onSearch={onSearch}\n                selectedItems={selected ? [selected] : []}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                matchElementWidth\n            />\n        );\n    };\n\n    const renderSelector = () => {\n        if (readOnly) {\n            return selected ? (\n                <SelectorReadOnly\n                    data-testid=\"selector-label\"\n                    tabIndex={0}\n                    role=\"combobox\"\n                    aria-haspopup=\"listbox\"\n                    aria-readonly\n                    aria-expanded={false}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    <ValueLabel>{getDisplayValue()}</ValueLabel>\n                </SelectorReadOnly>\n            ) : null;\n        } else {\n            return (\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={position === \"right\" ? \"right\" : \"left\"}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                    positionRef={nodeRef}\n                />\n            );\n        }\n    };\n\n    return (\n        <DropdownListState>\n            <FieldWrapper\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n                $position={position}\n                ref={nodeRef}\n                className={className}\n                data-testid={testId}\n                $noBorder={noBorder}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n            >\n                <VisuallyHidden aria-hidden id={comboboxLabelId}>\n                    {comboboxAriaLabel}\n                </VisuallyHidden>\n                <FieldSelector data-testid={selectorTestId}>\n                    {renderSelector()}\n                </FieldSelector>\n                <Divider $readOnly={readOnly} $position={position} />\n                <VisuallyHidden aria-hidden id={textboxLabelId}>\n                    {textboxAriaLabel}\n                </VisuallyHidden>\n                <FieldInput\n                    ref={ref}\n                    {...otherProps}\n                    $position={position}\n                    $noBorder={noBorder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    error={error}\n                    onChange={handleInputChange}\n                    data-testid=\"input\"\n                    styleType=\"no-border\"\n                    aria-labelledby={concatIds(ariaLabelledBy, textboxLabelId)}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                />\n            </FieldWrapper>\n        </DropdownListState>\n    );\n};\n\nexport const InputGroupListAddon = React.forwardRef(Component);\n"],"names":["Component","_a","ref","addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","testId","ariaLabelledBy","ariaDescribedBy","ariaInvalid","textboxAriaLabel","otherProps","__rest","valueExtractor","listExtractor","enableSearch","hideNoResultsDisplay","noResultsDescription","searchPlaceholder","searchFunction","onSearch","placeholder","displayValueExtractor","selectorTestId","options","selectedOption","onSelectOption","optionsLoadState","optionTruncationType","onRetry","onHideOptions","onShowOptions","dropdownZIndex","dropdownRootNode","comboboxAriaLabel","attributes","position","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","listboxId","instructionId","comboboxLabelId","textboxLabelId","nodeRef","useRef","selectorRef","useEffect","getDisplayValue","toString","triggerOptionDisplayCallback","show","handleListItemClick","item","extractedValue","current","focus","handleListDismiss","handleOpen","handleClose","reason","handleDismiss","renderElement","_jsxs","children","_jsx","StyledExpandableElement","expanded","popupRole","concatIds","$noBorder","$position","LabelContainer","$disabled","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","FieldWrapper","$focused","$readOnly","$error","tabIndex","onFocus","e","contains","relatedTarget","FieldSelector","SelectorReadOnly","role","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","Divider","FieldInput","Object","assign","event","styleType","InputGroupListAddon","React","forwardRef"],"mappings":"mgDAsBaA,EAAY,CACrBC,EAgBAC,KAhBA,IAAAC,MACIA,EAAKC,MACLA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,UACRA,EAASC,OACTA,EAAMC,SACNA,EACA,cAAeC,EACf,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAChB,aAAcC,GAAgBd,EAC3Be,EAAUC,SAAAhB,EAdjB,mKAkBA,MAAMiB,eAEFA,EAAcC,cACdA,EAAaC,aAEbA,EAAYC,qBACZA,EAAoBC,qBACpBA,EAAoBC,kBACpBA,EAAiBC,eACjBA,EAAcC,SACdA,EAAQC,YAERA,EAAc,SAAQC,sBACtBA,EACA,uBAAwBC,EAAcC,QACtCA,EAAOC,eACPA,EAAcC,eACdA,EAAcC,iBACdA,EAAgBC,qBAChBA,EAAoBC,QACpBA,EAAOC,cACPA,EAAaC,cACbA,EAAaC,eACbA,EAAcC,iBACdA,EACA,aAAcC,GACdpC,EAAOqC,YAELC,SAAEA,GAAatC,GAKduC,EAAUC,GAAeC,EAAAA,SAAwBd,IACjDe,EAAaC,GAAkBF,EAAAA,UAAkB,IACjDG,EAASC,IAAcJ,EAAAA,UAAkB,IACzCK,IAAcL,EAAAA,UAAiB,IAAMM,EAAAA,kBAAkBC,aACxDC,GAAY,GAAGH,aACfI,GAAgB,GAAGJ,iBACnBK,GAAkB,GAAGL,oBACrBM,GAAiB,GAAGN,mBAEpBO,GAAUC,EAAAA,OAAuB,MACjCC,GAAcD,EAAAA,OAA0B,MAK9CE,EAAAA,WAAU,KACNhB,EAAYb,EAAe,GAC5B,CAACA,IAKJ,MAAM8B,GAAkB,KACpB,GAAKlB,EAEL,OAAIf,EACOA,EAAsBe,GAG7BxB,EACOA,EAAewB,GAGnBA,EAASmB,UAAU,EAGxBC,GAAgCC,IAC9BA,EACA3B,SAAAA,IAEAD,SAAAA,GACJ,EAME6B,GAAsB,CAACC,EAASC,WACf,QAAnBjE,EAAAyD,GAAYS,eAAO,IAAAlE,GAAAA,EAAEmE,QACrBzB,EAAYsB,GACZnB,GAAe,GACfgB,IAA6B,GAE7B/B,SAAAA,EAAiBkC,EAAMC,EAAe,EAGpCG,GAAoB,KAClBxB,IACAC,GAAe,GACfgB,IAA6B,GACjC,EAyBEQ,GAAa,KACfxB,GAAe,GACfgB,IAA6B,GAC7Bd,IAAW,EAAK,EAGduB,GAAeC,IACjB1B,GAAe,GACfgB,IAA6B,GAGd,UAAXU,IACAxB,IAAW,GACXvC,SAAAA,IACJ,EAGEgE,GAAgB,WACC,QAAnBxE,EAAAyD,GAAYS,eAAO,IAAAlE,GAAAA,EAAEmE,QACrBtB,GAAe,GACfgB,IAA6B,EAAM,EAkBjCY,GAAgB,IAEdC,EAAAA,KAAA,MAAA,CAAAC,SAAA,CACIC,MAACC,EAAAA,wBAAuB,CACpB5E,IAAKwD,GACLnD,SAAUA,EACVwE,SAAUlC,EACVO,UAAWA,GACX4B,UAAU,UACV1E,SAAUA,oBACO2E,EAAAA,UAAUrE,EAAgB0C,IAAgB,mBACzC2B,EAAAA,UAAUpE,EAAiBwC,IAAc,eAC7CvC,EAAWoE,UACdxE,EAAQyE,UACR1C,EAAQmC,SAjB/BC,EAAAA,IAACO,iBAAc,CAAAC,UAAY9E,EAAQqE,SAR9BlC,EAGMmC,EAAAA,IAACS,EAAAA,WAAU,CAAAV,SAAEhB,OAFbiB,EAAAA,IAACU,EAAAA,iBAAgB,CAAAX,SAAElD,QA4BtBmD,MAACW,EAAAA,eAAc,CAACC,GAAIpC,GAAauB,SAAA,mCAOvCc,GAAiB,IAEfb,EAAAA,IAACc,EAAAA,aAAY,CACTvC,UAAWA,GACXwC,UAAW/D,EACXgE,aAAc7B,GACd8B,UAAWzB,GACXnD,eAAgBA,EAChBC,cAAeA,EACfC,aAAcA,EACdC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,kBAAmBA,EACnBC,eAAgBA,EAChBC,SAAUA,EACVsE,cAAerD,EAAW,CAACA,GAAY,GACvCsD,eAAgBhE,EAChBiE,mBAAoBhE,EACpBC,QAASA,EACTgE,mBAAiB,IA4C7B,OACIrB,MAACsB,EAAAA,kBAAiB,CAAAvB,SACdD,EAAAA,KAACyB,EAAAA,aAAY,CAAAC,SACCtD,EAAOsC,UACN9E,EAAQ+F,UACRhG,EAAQiG,OACXnG,EAAK+E,UACF1C,EACXvC,IAAKsD,GACLhD,UAAWA,EAAS,cACPG,EAAMuE,UACRxE,EACX8F,UAAU,EACVC,QA7JY,KACf1D,GAAYF,GACbG,IAAW,EACf,EA2JQvC,OAxJYiG,IAEhB3D,IACCF,GACDW,GAAQW,UACPX,GAAQW,QAAQwC,SAASD,EAAEE,iBAE5B5D,IAAW,GACXvC,SAAAA,IACJ,EA+I8BmE,SAAA,CAEtBC,EAAAA,IAACW,iBAAc,CAAA,eAAA,EAAaC,GAAInC,GAAesB,SAC1CrC,IAELsC,EAAAA,IAACgC,EAAAA,cAAa,CAAA,cAAcjF,EAAcgD,SAzD9CtE,EACOoC,EACHmC,EAAAA,IAACiC,EAAAA,iBAAgB,CAAA,cACD,iBACZN,SAAU,EACVO,KAAK,2BACS,UAAS,iBAAA,EAAA,iBAER,EAAK,kBACHnG,EAAc,mBACbC,iBACJC,EAAW8D,SAEzBC,EAAAA,IAACS,EAAAA,WAAU,CAAAV,SAAEhB,SAEjB,KAGAiB,EAAAA,IAACmC,EAAAA,oBAAmB,CAChBC,SAAU3G,IAAaC,EACvB2G,OAAQrE,EACR6B,cAAeA,GACfgB,eAAgBA,GAChByB,OAAQ7C,GACR8C,QAAS7C,GACTuB,UAAWrB,GACX4C,eAAa,EACbC,OAAQ,EACRC,UAAwB,UAAb9E,EAAuB,QAAU,OAC5C+E,oBAAkB,EAClBC,aAAcpF,EACdqF,SAAUpF,EACVqF,YAAanE,OA4BjBqB,EAAAA,IAAC+C,EAAAA,QAAO,CAAAtB,UAAYhG,EAAQ6E,UAAa1C,IACzCoC,EAAAA,IAACW,EAAAA,eAAc,CAAA,eAAA,EAAaC,GAAIlC,GAAcqB,SACzC7D,IAEL8D,EAAAA,IAACgD,EAAAA,WAAUC,OAAAC,OAAA,CACP7H,IAAKA,GACDc,EAAU,CAAAmE,UACH1C,EAAQyC,UACRxE,EACXJ,SAAUA,EACVC,SAAUA,EACVH,MAAOA,EACPC,SAtLW2H,IACnB3H,GAAUA,EAAS2H,EAAM,EAqLU,cACf,QACZC,UAAU,YAAW,kBACJhD,EAAAA,UAAUrE,EAAgB2C,IAAe,mBACxC1C,EAAe,eACnBC,SAGN,EAIfoH,OAAsBC,QAAMC,WAAWpI"}
+{"version":3,"file":"input-group-list-addon.js","sources":["../../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    DropdownList,\n    DropdownListState,\n    ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group-list-addon.styles\";\nimport type { InputGroupProps, ListAddon } from \"./types\";\n\nexport const Component = <T, V>(\n    {\n        addon,\n        error,\n        onChange,\n        readOnly,\n        disabled,\n        className,\n        onBlur,\n        noBorder,\n        \"data-testid\": testId,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": ariaInvalid,\n        \"aria-label\": textboxAriaLabel,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const {\n        /* display props */\n        valueExtractor,\n        listExtractor,\n        /* search props */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription,\n        searchPlaceholder,\n        searchFunction,\n        onSearch,\n        /* list addon props */\n        placeholder = \"Select\",\n        displayValueExtractor,\n        \"data-selector-testid\": selectorTestId,\n        options,\n        selectedOption,\n        onSelectOption,\n        optionsLoadState,\n        optionTruncationType,\n        onRetry,\n        onHideOptions,\n        onShowOptions,\n        dropdownZIndex,\n        dropdownRootNode,\n        \"aria-label\": comboboxAriaLabel,\n    } = addon!.attributes as ListAddon<T, V>;\n\n    const { position = \"left\" } = addon!;\n\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n    const listboxId = `${internalId}-listbox`;\n    const instructionId = `${internalId}-instruction`;\n    const comboboxLabelId = `${internalId}-combobox-label`;\n    const textboxLabelId = `${internalId}-textbox-label`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = () => {\n        if (!selected) return;\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            return valueExtractor(selected);\n        }\n\n        return selected.toString();\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) onChange(event);\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    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (selected) {\n            return <ValueLabel>{getDisplayValue()}</ValueLabel>;\n        }\n\n        return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <div>\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={listboxId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    aria-labelledby={concatIds(ariaLabelledBy, comboboxLabelId)}\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    aria-invalid={ariaInvalid}\n                    data-position={position}\n                    className={clsx(\n                        noBorder && styles.expandableElementNoBorder\n                    )}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n                <VisuallyHidden id={instructionId}>\n                    Press space to open options\n                </VisuallyHidden>\n            </div>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={listboxId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                onSearch={onSearch}\n                selectedItems={selected ? [selected] : []}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                matchElementWidth\n            />\n        );\n    };\n\n    const renderSelector = () => {\n        if (readOnly) {\n            return selected ? (\n                <div\n                    data-testid=\"selector-label\"\n                    tabIndex={0}\n                    role=\"combobox\"\n                    aria-haspopup=\"listbox\"\n                    aria-readonly\n                    aria-expanded={false}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                    className={styles.selectorReadOnly}\n                >\n                    <ValueLabel>{getDisplayValue()}</ValueLabel>\n                </div>\n            ) : null;\n        } else {\n            return (\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={position === \"right\" ? \"right\" : \"left\"}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                    positionRef={nodeRef}\n                />\n            );\n        }\n    };\n\n    return (\n        <DropdownListState>\n            <InputBox\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n                ref={nodeRef}\n                noBorder={noBorder}\n                data-testid={testId}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                data-position={position}\n                className={clsx(styles.fieldWrapper, className)}\n            >\n                <VisuallyHidden aria-hidden id={comboboxLabelId}>\n                    {comboboxAriaLabel}\n                </VisuallyHidden>\n                <div\n                    data-testid={selectorTestId}\n                    className={styles.fieldSelector}\n                >\n                    {renderSelector()}\n                </div>\n                <div\n                    data-position={position}\n                    className={clsx(\n                        styles.divider,\n                        readOnly && styles.dividerReadOnly\n                    )}\n                />\n                <VisuallyHidden aria-hidden id={textboxLabelId}>\n                    {textboxAriaLabel}\n                </VisuallyHidden>\n                <Input\n                    ref={ref}\n                    {...otherProps}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    error={error}\n                    onChange={handleInputChange}\n                    data-testid=\"input\"\n                    styleType=\"no-border\"\n                    aria-labelledby={concatIds(ariaLabelledBy, textboxLabelId)}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                    data-position={position}\n                    className={clsx(\n                        readOnly && styles.fieldInputReadOnly,\n                        !readOnly && noBorder && styles.fieldInputNoBorder,\n                        !readOnly && !noBorder && styles.fieldInputPosition\n                    )}\n                />\n            </InputBox>\n        </DropdownListState>\n    );\n};\n\nexport const InputGroupListAddon = React.forwardRef(Component);\n"],"names":["Component","_a","ref","addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","testId","ariaLabelledBy","ariaDescribedBy","ariaInvalid","textboxAriaLabel","otherProps","__rest","valueExtractor","listExtractor","enableSearch","hideNoResultsDisplay","noResultsDescription","searchPlaceholder","searchFunction","onSearch","placeholder","displayValueExtractor","selectorTestId","options","selectedOption","onSelectOption","optionsLoadState","optionTruncationType","onRetry","onHideOptions","onShowOptions","dropdownZIndex","dropdownRootNode","comboboxAriaLabel","attributes","position","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","listboxId","instructionId","comboboxLabelId","textboxLabelId","nodeRef","useRef","selectorRef","useEffect","getDisplayValue","toString","triggerOptionDisplayCallback","show","handleListItemClick","item","extractedValue","current","focus","handleListDismiss","handleOpen","handleClose","reason","handleDismiss","renderElement","_jsxs","children","_jsx","ExpandableElement","expanded","popupRole","concatIds","clsx","styles.expandableElementNoBorder","LabelContainer","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","InputBox","tabIndex","onFocus","e","contains","relatedTarget","styles.fieldWrapper","styles.fieldSelector","role","styles.selectorReadOnly","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","styles.divider","styles.dividerReadOnly","Input","Object","assign","event","styleType","styles.fieldInputReadOnly","styles.fieldInputNoBorder","styles.fieldInputPosition","InputGroupListAddon","React","forwardRef"],"mappings":"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"}

package/cjs/input-group/input-group-list-addon.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./input-group-list-addon.styles_1my6j2v.css");exports.divider="d7gwol5",exports.dividerReadOnly="d181f48m",exports.expandableElementNoBorder="e135ws0j",exports.fieldInputNoBorder="f3g4d0l",exports.fieldInputPosition="fioonlm",exports.fieldInputReadOnly="f96umbl",exports.fieldSelector="faf95up",exports.fieldWrapper="fmhspm1",exports.selectorReadOnly="s1b40hsu";
+//# sourceMappingURL=input-group-list-addon.styles.js.map

package/cjs/input-group/input-group-list-addon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group-list-addon.styles.js","sources":["../../../src/input-group/input-group-list-addon.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const fieldWrapper = css`\n    display: flex;\n    align-items: center;\n\n    &[data-position=\"right\"] {\n        flex-direction: row-reverse;\n    }\n`;\n\nexport const expandableElementNoBorder = css`\n    &[data-position=\"right\"] {\n        padding-right: 0;\n    }\n\n    &[data-position=\"left\"] {\n        padding-left: 0;\n    }\n`;\n\nexport const fieldSelector = css`\n    flex: 0 0 auto;\n`;\n\nexport const fieldInputReadOnly = css`\n    padding: 0;\n`;\n\nexport const fieldInputNoBorder = css`\n    &[data-position=\"right\"] {\n        padding-left: 0;\n    }\n\n    &[data-position=\"left\"] {\n        padding-right: 0;\n    }\n`;\n\nexport const fieldInputPosition = css`\n    &[data-position=\"right\"] {\n        padding-left: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-position=\"left\"] {\n        padding-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const selectorReadOnly = css`\n    display: flex;\n    align-items: center;\n    padding: 0;\n    background: transparent;\n    margin-right: ${Spacing[\"spacing-12\"]};\n    color: ${Colour[\"text\"]};\n`;\n\nexport const divider = css`\n    width: 1px;\n    background: ${Colour[\"border\"]};\n    flex-shrink: 0;\n    height: 1.25rem;\n\n    &[data-position=\"right\"] {\n        margin-left: ${Spacing[\"spacing-12\"]};\n    }\n\n    &[data-position=\"left\"] {\n        margin-right: ${Spacing[\"spacing-12\"]};\n    }\n`;\n\nexport const dividerReadOnly = css`\n    display: none;\n`;\n"],"names":[],"mappings":"+GA+DoB,kCAeQ,6CA9DU,sCAkBP,qCAUA,qCAdA,gCAJL,+BAnBD,mCA+CI"}

package/cjs/input-group/input-group-list-addon.styles_1my6j2v.css

@@ -0,0 +1,9 @@
+.fmhspm1{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;}.fmhspm1[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.e135ws0j[data-position="right"]{padding-right:0;}.e135ws0j[data-position="left"]{padding-left:0;}
+.faf95up{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}
+.f96umbl{padding:0;}
+.f3g4d0l[data-position="right"]{padding-left:0;}.f3g4d0l[data-position="left"]{padding-right:0;}
+.fioonlm[data-position="right"]{padding-left:var(--fds-spacing-16);}.fioonlm[data-position="left"]{padding-right:var(--fds-spacing-16);}
+.s1b40hsu{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;padding:0;background:transparent;margin-right:var(--fds-spacing-12);color:var(--fds-colour-text);}
+.d7gwol5{width:1px;background:var(--fds-colour-border);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1.25rem;}.d7gwol5[data-position="right"]{margin-left:var(--fds-spacing-12);}.d7gwol5[data-position="left"]{margin-right:var(--fds-spacing-12);}
+.d181f48m{display:none;}

package/cjs/input-group/input-group.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),d=require("./input-group.style.js"),a=require("./input-group-list-addon.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=s(t).default.forwardRef(((t,s)=>{var{addon:n,error:o,className:i}=t,l=e.__rest(t,["addon","error","className"]);const u=()=>r.jsx(d.NoAddonWrapper,{$disabled:l.disabled,$error:o,$readOnly:l.readOnly,"data-testid":l["data-testid"],className:i,$noBorder:l.noBorder,children:r.jsx(d.MainInput,Object.assign({ref:s},l,{"data-testid":"input",styleType:"no-border"}))});if(!n)return u();{const{type:e="label",position:t="left"}=n,{allowClear:p}=l;switch(e){case"list":{const e=n.attributes;return e.options&&e.options.length>0?r.jsx(a.InputGroupListAddon,Object.assign({ref:s,addon:n,error:o,className:i,noBorder:l.noBorder},l)):u()}case"custom":{const e=n.attributes;return e.children?r.jsxs(d.AddonWrapper,{$error:o,$disabled:l.disabled,$readOnly:l.readOnly,"data-testid":l["data-testid"],$position:t,className:i,$noBorder:l.noBorder,children:[r.jsx(d.LabelAddonContainer,{"data-testid":"addon",$disabled:l.disabled,$readOnly:l.readOnly,$position:t,children:e.children}),r.jsx(d.MainInput,Object.assign({ref:s},l,{allowClear:p&&"right"!==t,error:o,"data-testid":"input",styleType:"no-border"}))]}):u()}default:{const e=n.attributes;return e.value?r.jsxs(d.AddonWrapper,{$disabled:l.disabled,$error:o,$readOnly:l.readOnly,"data-testid":l["data-testid"],$position:t,className:i,$noBorder:l.noBorder,children:[r.jsx(d.LabelAddonContainer,{"data-testid":"addon",$disabled:l.disabled,$readOnly:l.readOnly,$position:t,children:e.value}),r.jsx(d.MainInput,Object.assign({ref:s},l,{allowClear:p&&"right"!==t,error:o,"data-testid":"input",styleType:"no-border"}))]}):u()}}}}));exports.InputGroup=n;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("clsx"),t=require("react"),d=require("../input/input.js"),i=require("../shared/accessibility/index.js"),s=require("../shared/input-wrapper/input-wrapper.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var n=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./input-group.styles.js"),o=require("./input-group-list-addon.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=u(a);const c=u(t).default.forwardRef(((a,t)=>{var{addon:u,error:c,className:b,noBorder:y,"aria-label":j,"aria-labelledby":f}=a,h=e.__rest(a,["addon","error","className","noBorder","aria-label","aria-labelledby"]);const q=n.useId(),x=`${q}-addon`,m=`${q}-ariaLabelId`,v=()=>r.jsx(s.InputBox,{disabled:h.disabled,error:c,readOnly:h.readOnly,noBorder:y,"data-testid":h["data-testid"],className:p.default(l.noAddonWrapper,b),"data-read-only":h.readOnly,"data-no-border":y,children:r.jsx(d.Input,Object.assign({ref:t},h,{"data-testid":"input",styleType:"no-border"}))}),O=(e,a,n)=>r.jsxs(s.InputBox,{disabled:h.disabled,error:c,readOnly:h.readOnly,noBorder:y,"data-testid":h["data-testid"],className:p.default(l.addonWrapper,b),"data-read-only":h.readOnly,"data-no-border":y,"data-position":a,children:[r.jsx("div",{"data-testid":"addon",id:x,className:l.labelAddonContainer,"data-disabled":h.disabled,"data-read-only":h.readOnly,"data-position":a,children:e}),r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:m,children:j}),r.jsx(d.Input,Object.assign({ref:t},h,{"aria-labelledby":i.concatIds(m,f,x),allowClear:n&&"right"!==a,error:c,"data-testid":"input",styleType:"no-border"}))]});if(!u)return v();{const{type:e="label",position:a="left"}=u,{allowClear:d}=h;switch(e){case"list":{const e=u.attributes;return e.options&&e.options.length>0?r.jsx(o.InputGroupListAddon,Object.assign({ref:t,addon:u,error:c,className:b,noBorder:y,"aria-label":j,"aria-labelledby":f},h)):v()}case"custom":{const e=u.attributes;return e.children?O(e.children,a,d):v()}default:{const e=u.attributes;return e.value?O(e.value,a,d):v()}}}}));exports.InputGroup=c;
 //# sourceMappingURL=input-group.js.map

package/cjs/input-group/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","sources":["../../../src/input-group/input-group.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    AddonWrapper,\n    LabelAddonContainer,\n    MainInput,\n    NoAddonWrapper,\n} from \"./input-group.style\";\nimport { InputGroupListAddon } from \"./input-group-list-addon\";\nimport type {\n    CustomAddon,\n    InputGroupProps,\n    LabelAddon,\n    ListAddon,\n} from \"./types\";\n\nconst Component = <T, V>(\n    { addon, error, className, ...otherProps }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const renderNoAddons = () => (\n        <NoAddonWrapper\n            $disabled={otherProps.disabled}\n            $error={error}\n            $readOnly={otherProps.readOnly}\n            data-testid={otherProps[\"data-testid\"]}\n            className={className}\n            $noBorder={otherProps.noBorder}\n        >\n            <MainInput\n                ref={ref}\n                {...otherProps}\n                data-testid=\"input\"\n                styleType=\"no-border\"\n            />\n        </NoAddonWrapper>\n    );\n\n    if (addon) {\n        const { type = \"label\", position = \"left\" } = addon;\n        const { allowClear } = otherProps;\n\n        switch (type) {\n            case \"list\": {\n                const listAddon = addon.attributes as ListAddon<T, V>;\n                if (listAddon.options && listAddon.options.length > 0) {\n                    return (\n                        <InputGroupListAddon\n                            ref={ref}\n                            addon={addon}\n                            error={error}\n                            className={className}\n                            noBorder={otherProps.noBorder}\n                            {...otherProps}\n                        />\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n            case \"custom\": {\n                const customAddon = addon.attributes as CustomAddon;\n                if (customAddon.children) {\n                    return (\n                        <AddonWrapper\n                            $error={error}\n                            $disabled={otherProps.disabled}\n                            $readOnly={otherProps.readOnly}\n                            data-testid={otherProps[\"data-testid\"]}\n                            $position={position}\n                            className={className}\n                            $noBorder={otherProps.noBorder}\n                        >\n                            <LabelAddonContainer\n                                data-testid=\"addon\"\n                                $disabled={otherProps.disabled}\n                                $readOnly={otherProps.readOnly}\n                                $position={position}\n                            >\n                                {customAddon.children}\n                            </LabelAddonContainer>\n                            <MainInput\n                                ref={ref}\n                                {...otherProps}\n                                allowClear={allowClear && position !== \"right\"}\n                                error={error}\n                                data-testid=\"input\"\n                                styleType=\"no-border\"\n                            />\n                        </AddonWrapper>\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n            default: {\n                const labelAddon = addon.attributes as LabelAddon;\n                if (labelAddon.value) {\n                    return (\n                        <AddonWrapper\n                            $disabled={otherProps.disabled}\n                            $error={error}\n                            $readOnly={otherProps.readOnly}\n                            data-testid={otherProps[\"data-testid\"]}\n                            $position={position}\n                            className={className}\n                            $noBorder={otherProps.noBorder}\n                        >\n                            <LabelAddonContainer\n                                data-testid=\"addon\"\n                                $disabled={otherProps.disabled}\n                                $readOnly={otherProps.readOnly}\n                                $position={position}\n                            >\n                                {labelAddon.value}\n                            </LabelAddonContainer>\n                            <MainInput\n                                ref={ref}\n                                {...otherProps}\n                                allowClear={allowClear && position !== \"right\"}\n                                error={error}\n                                data-testid=\"input\"\n                                styleType=\"no-border\"\n                            />\n                        </AddonWrapper>\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n        }\n    } else {\n        return renderNoAddons();\n    }\n};\n\nexport const InputGroup = React.forwardRef(Component);\n"],"names":["InputGroup","React","forwardRef","_a","ref","addon","error","className","otherProps","__rest","renderNoAddons","_jsx","NoAddonWrapper","$disabled","disabled","$error","readOnly","noBorder","children","MainInput","Object","assign","styleType","type","position","allowClear","listAddon","attributes","options","length","InputGroupListAddon","customAddon","_jsxs","AddonWrapper","$readOnly","$position","$noBorder","LabelAddonContainer","labelAddon","value"],"mappings":"2PAgBA,MAwHaA,OAAaC,QAAMC,YAxHd,CACdC,EACAC,SADAC,MAAEA,EAAKC,MAAEA,EAAKC,UAAEA,KAAcC,EAAUC,EAAAA,OAAAN,EAAxC,CAAA,QAAA,QAAA,cAGA,MAAMO,EAAiB,IACnBC,MAACC,EAAAA,eAAc,CAAAC,UACAL,EAAWM,SAAQC,OACtBT,YACGE,EAAWQ,SAAQ,cACjBR,EAAW,eACxBD,UAAWA,YACAC,EAAWS,SAAQC,SAE9BP,EAAAA,IAACQ,EAAAA,UAASC,OAAAC,OAAA,CACNjB,IAAKA,GACDI,EAAU,CAAA,cACF,QACZc,UAAU,iBAKtB,IAAIjB,EA8FA,OAAOK,IA9FA,CACP,MAAMa,KAAEA,EAAO,QAAOC,SAAEA,EAAW,QAAWnB,GACxCoB,WAAEA,GAAejB,EAEvB,OAAQe,GACJ,IAAK,OAAQ,CACT,MAAMG,EAAYrB,EAAMsB,WACxB,OAAID,EAAUE,SAAWF,EAAUE,QAAQC,OAAS,EAE5ClB,EAAAA,IAACmB,EAAAA,oBAAmBV,OAAAC,OAAA,CAChBjB,IAAKA,EACLC,MAAOA,EACPC,MAAOA,EACPC,UAAWA,EACXU,SAAUT,EAAWS,UACjBT,IAILE,GAEf,CACA,IAAK,SAAU,CACX,MAAMqB,EAAc1B,EAAMsB,WAC1B,OAAII,EAAYb,SAERc,EAAAA,KAACC,EAAAA,aAAY,CAAAlB,OACDT,YACGE,EAAWM,SAAQoB,UACnB1B,EAAWQ,SAAQ,cACjBR,EAAW,eAAc2B,UAC3BX,EACXjB,UAAWA,EAAS6B,UACT5B,EAAWS,SAAQC,SAAA,CAE9BP,EAAAA,IAAC0B,EAAAA,oBAAmB,CAAA,cACJ,kBACD7B,EAAWM,SAAQoB,UACnB1B,EAAWQ,mBACXQ,EAAQN,SAElBa,EAAYb,WAEjBP,EAAAA,IAACQ,EAAAA,yBACGf,IAAKA,GACDI,EAAU,CACdiB,WAAYA,GAA2B,UAAbD,EAC1BlB,MAAOA,EAAK,cACA,QACZgB,UAAU,kBAKfZ,GAEf,CACA,QAAS,CACL,MAAM4B,EAAajC,EAAMsB,WACzB,OAAIW,EAAWC,MAEPP,EAAAA,KAACC,EAAAA,aAAY,CAAApB,UACEL,EAAWM,SAAQC,OACtBT,EAAK4B,UACF1B,EAAWQ,SAAQ,cACjBR,EAAW,eAAc2B,UAC3BX,EACXjB,UAAWA,EAAS6B,UACT5B,EAAWS,SAAQC,SAAA,CAE9BP,EAAAA,IAAC0B,EAAAA,oBAAmB,CAAA,cACJ,kBACD7B,EAAWM,SAAQoB,UACnB1B,EAAWQ,mBACXQ,EAAQN,SAElBoB,EAAWC,QAEhB5B,EAAAA,IAACQ,EAAAA,yBACGf,IAAKA,GACDI,EAAU,CACdiB,WAAYA,GAA2B,UAAbD,EAC1BlB,MAAOA,EAAK,cACA,QACZgB,UAAU,kBAKfZ,GAEf,EAER,CAEA"}
+{"version":3,"file":"input-group.js","sources":["../../../src/input-group/input-group.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group.styles\";\nimport { InputGroupListAddon } from \"./input-group-list-addon\";\nimport type {\n    CustomAddon,\n    InputGroupProps,\n    LabelAddon,\n    ListAddon,\n} from \"./types\";\n\nconst Component = <T, V>(\n    {\n        addon,\n        error,\n        className,\n        noBorder,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const internalId = useId();\n    const addonId = `${internalId}-addon`;\n    const ariaLabelId = `${internalId}-ariaLabelId`;\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderNoAddons = () => (\n        <InputBox\n            disabled={otherProps.disabled}\n            error={error}\n            readOnly={otherProps.readOnly}\n            noBorder={noBorder}\n            data-testid={otherProps[\"data-testid\"]}\n            className={clsx(styles.noAddonWrapper, className)}\n            data-read-only={otherProps.readOnly}\n            data-no-border={noBorder}\n        >\n            <Input\n                ref={ref}\n                {...otherProps}\n                data-testid=\"input\"\n                styleType=\"no-border\"\n            />\n        </InputBox>\n    );\n\n    const renderWithAddon = (\n        addonContent: React.ReactNode,\n        position: \"left\" | \"right\",\n        allowClear?: boolean\n    ) => (\n        <InputBox\n            disabled={otherProps.disabled}\n            error={error}\n            readOnly={otherProps.readOnly}\n            noBorder={noBorder}\n            data-testid={otherProps[\"data-testid\"]}\n            className={clsx(styles.addonWrapper, className)}\n            data-read-only={otherProps.readOnly}\n            data-no-border={noBorder}\n            data-position={position}\n        >\n            <div\n                data-testid=\"addon\"\n                id={addonId}\n                className={styles.labelAddonContainer}\n                data-disabled={otherProps.disabled}\n                data-read-only={otherProps.readOnly}\n                data-position={position}\n            >\n                {addonContent}\n            </div>\n            <VisuallyHidden aria-hidden id={ariaLabelId}>\n                {ariaLabel}\n            </VisuallyHidden>\n            <Input\n                ref={ref}\n                {...otherProps}\n                aria-labelledby={concatIds(\n                    ariaLabelId,\n                    ariaLabelledBy,\n                    addonId\n                )}\n                allowClear={allowClear && position !== \"right\"}\n                error={error}\n                data-testid=\"input\"\n                styleType=\"no-border\"\n            />\n        </InputBox>\n    );\n\n    if (addon) {\n        const { type = \"label\", position = \"left\" } = addon;\n        const { allowClear } = otherProps;\n\n        switch (type) {\n            case \"list\": {\n                const listAddon = addon.attributes as ListAddon<T, V>;\n                if (listAddon.options && listAddon.options.length > 0) {\n                    return (\n                        <InputGroupListAddon\n                            ref={ref}\n                            addon={addon}\n                            error={error}\n                            className={className}\n                            noBorder={noBorder}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            {...otherProps}\n                        />\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n\n            case \"custom\": {\n                const customAddon = addon.attributes as CustomAddon;\n                if (customAddon.children) {\n                    return renderWithAddon(\n                        customAddon.children,\n                        position,\n                        allowClear\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n            default: {\n                const labelAddon = addon.attributes as LabelAddon;\n                if (labelAddon.value) {\n                    return renderWithAddon(\n                        labelAddon.value,\n                        position,\n                        allowClear\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n        }\n    } else {\n        return renderNoAddons();\n    }\n};\n\nexport const InputGroup = React.forwardRef(Component);\n"],"names":["InputGroup","React","forwardRef","_a","ref","addon","error","className","noBorder","ariaLabel","ariaLabelledBy","otherProps","__rest","internalId","useId","addonId","ariaLabelId","renderNoAddons","_jsx","InputBox","disabled","readOnly","clsx","styles.noAddonWrapper","children","Input","Object","assign","styleType","renderWithAddon","addonContent","position","allowClear","_jsxs","styles.addonWrapper","id","styles.labelAddonContainer","VisuallyHidden","concatIds","type","listAddon","attributes","options","length","InputGroupListAddon","customAddon","labelAddon","value"],"mappings":"0mBAgBA,MA8IaA,OAAaC,QAAMC,YA9Id,CACdC,EASAC,SATAC,MACIA,EAAKC,MACLA,EAAKC,UACLA,EAASC,SACTA,EACA,aAAcC,EACd,kBAAmBC,GAAcP,EAC9BQ,EAAUC,EAAAA,OAAAT,EAPjB,yEAcA,MAAMU,EAAaC,EAAAA,QACbC,EAAU,GAAGF,UACbG,EAAc,GAAGH,gBAKjBI,EAAiB,IACnBC,EAAAA,IAACC,WAAQ,CACLC,SAAUT,EAAWS,SACrBd,MAAOA,EACPe,SAAUV,EAAWU,SACrBb,SAAUA,EAAQ,cACLG,EAAW,eACxBJ,UAAWe,EAAAA,QAAKC,iBAAuBhB,GAAU,iBACjCI,EAAWU,SAAQ,iBACnBb,EAAQgB,SAExBN,EAAAA,IAACO,QAAKC,OAAAC,OAAA,CACFvB,IAAKA,GACDO,EAAU,CAAA,cACF,QACZiB,UAAU,iBAKhBC,EAAkB,CACpBC,EACAC,EACAC,IAEAC,EAAAA,KAACd,EAAAA,SAAQ,CACLC,SAAUT,EAAWS,SACrBd,MAAOA,EACPe,SAAUV,EAAWU,SACrBb,SAAUA,EAAQ,cACLG,EAAW,eACxBJ,UAAWe,EAAAA,QAAKY,EAAAA,aAAqB3B,GAAU,iBAC/BI,EAAWU,SAAQ,iBACnBb,EAAQ,gBACTuB,EAAQP,SAAA,CAEvBN,MAAA,MAAA,CAAA,cACgB,QACZiB,GAAIpB,EACJR,UAAW6B,sBAA0B,gBACtBzB,EAAWS,SAAQ,iBAClBT,EAAWU,SAAQ,gBACpBU,EAAQP,SAEtBM,IAELZ,EAAAA,IAACmB,iBAAc,CAAA,eAAA,EAAaF,GAAInB,EAAWQ,SACtCf,IAELS,MAACO,EAAAA,qBACGrB,IAAKA,GACDO,EAAU,CAAA,kBACG2B,EAAAA,UACbtB,EACAN,EACAK,GAEJiB,WAAYA,GAA2B,UAAbD,EAC1BzB,MAAOA,EAAK,cACA,QACZsB,UAAU,kBAKtB,IAAIvB,EAmDA,OAAOY,IAnDA,CACP,MAAMsB,KAAEA,EAAO,QAAOR,SAAEA,EAAW,QAAW1B,GACxC2B,WAAEA,GAAerB,EAEvB,OAAQ4B,GACJ,IAAK,OAAQ,CACT,MAAMC,EAAYnC,EAAMoC,WACxB,OAAID,EAAUE,SAAWF,EAAUE,QAAQC,OAAS,EAE5CzB,EAAAA,IAAC0B,sBAAmBlB,OAAAC,OAAA,CAChBvB,IAAKA,EACLC,MAAOA,EACPC,MAAOA,EACPC,UAAWA,EACXC,SAAUA,EAAQ,aACNC,EAAS,kBACJC,GACbC,IAILM,GAEf,CAEA,IAAK,SAAU,CACX,MAAM4B,EAAcxC,EAAMoC,WAC1B,OAAII,EAAYrB,SACLK,EACHgB,EAAYrB,SACZO,EACAC,GAGGf,GAEf,CACA,QAAS,CACL,MAAM6B,EAAazC,EAAMoC,WACzB,OAAIK,EAAWC,MACJlB,EACHiB,EAAWC,MACXhB,EACAC,GAGGf,GAEf,EAER,CAEA"}

package/cjs/input-group/input-group.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./input-group.styles_fpy81r.css");exports.addonWrapper="afvd13",exports.labelAddonContainer="l1s6ick6",exports.noAddonWrapper="nx53mj4";
+//# sourceMappingURL=input-group.styles.js.map

package/cjs/input-group/input-group.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.styles.js","sources":["../../../src/input-group/input-group.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const addonWrapper = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    padding: 0 ${Spacing[\"spacing-16\"]};\n\n    &[data-read-only=\"true\"] {\n        padding: 0;\n    }\n\n    &[data-no-border=\"true\"] {\n        padding: 0;\n    }\n\n    &[data-position=\"right\"] {\n        flex-direction: row-reverse;\n    }\n`;\n\nexport const noAddonWrapper = css`\n    display: flex;\n    position: relative;\n    width: 100%;\n    padding: 0 ${Spacing[\"spacing-16\"]};\n\n    &[data-read-only=\"true\"] {\n        padding: 0;\n    }\n\n    &[data-no-border=\"true\"] {\n        padding: 0;\n    }\n`;\n\nexport const labelAddonContainer = css`\n    position: relative;\n    display: flex;\n    align-items: center;\n    margin-right: ${Spacing[\"spacing-12\"]};\n\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    /* SVG Icon */\n    svg {\n        height: 1em;\n        width: 1em;\n    }\n\n    &[data-disabled=\"true\"] {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    &[data-read-only=\"true\"] {\n        margin-right: ${Spacing[\"spacing-4\"]};\n    }\n\n    &[data-position=\"right\"] {\n        margin-right: 0;\n        margin-left: ${Spacing[\"spacing-12\"]};\n    }\n\n    &[data-position=\"right\"][data-read-only=\"true\"] {\n        margin-right: 0;\n        margin-left: ${Spacing[\"spacing-4\"]};\n    }\n`;\n"],"names":[],"mappings":"wGAOyB,qCAkCO,kCAfL"}

package/cjs/input-group/input-group.styles_fpy81r.css

@@ -0,0 +1,3 @@
+.afvd13{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;width:100%;padding:0 var(--fds-spacing-16);}.afvd13[data-read-only="true"]{padding:0;}.afvd13[data-no-border="true"]{padding:0;}.afvd13[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.nx53mj4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:100%;padding:0 var(--fds-spacing-16);}.nx53mj4[data-read-only="true"]{padding:0;}.nx53mj4[data-no-border="true"]{padding:0;}
+.l1s6ick6{position:relative;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;margin-right:var(--fds-spacing-12);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-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}.l1s6ick6 svg{height:1em;width:1em;}.l1s6ick6[data-disabled="true"]{color:var(--fds-colour-text-subtler);}.l1s6ick6[data-read-only="true"]{margin-right:var(--fds-spacing-4);}.l1s6ick6[data-position="right"]{margin-right:0;margin-left:var(--fds-spacing-12);}.l1s6ick6[data-position="right"][data-read-only="true"]{margin-right:0;margin-left:var(--fds-spacing-4);}

package/cjs/input-multi-select/input-multi-select.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("../external/lodash/findIndex.js"),t=require("react");require("styled-components"),require("../util/string-helper.js"),require("../v3_theme/index.js"),require("../shared/dropdown-list-v2/dropdown-label.styles.js");var s=require("../shared/dropdown-list-v2/dropdown-list.js"),l=require("../shared/dropdown-list-v2/dropdown-list-state.js"),a=require("../shared/dropdown-list-v2/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var n=require("../util/simple-id-generator.js"),i=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),o=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list-v2/dropdown-list.styles.js"),require("../shared/dropdown-list-v2/dropdown-search.js"),require("../shared/dropdown-list-v2/nested-dropdown-list.styles.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js");var d=require("../shared/input-wrapper/input-wrapper.js");exports.InputMultiSelect=({selectedOptions:u,placeholder:c="Select",options:p,disabled:h,error:m,className:x,"data-testid":j,id:b,"aria-labelledby":q,"aria-describedby":w,"aria-invalid":v,enableSearch:y=!1,searchFunction:S,searchPlaceholder:g,valueExtractor:f,listExtractor:I,onSelectOptions:T,onShowOptions:L,onHideOptions:D,onRetry:E,optionsLoadState:R="success",optionTruncationType:O="end",renderListItem:$,hideNoResultsDisplay:A,noResultsDescription:C,customLabels:N,renderCustomCallToAction:_,onBlur:B,variant:k="default",readOnly:F,alignment:P,dropdownZIndex:W,maxSelectable:G,dropdownRootNode:H,dropdownWidth:Z})=>{const{allSelectedLabel:M,multiSelectedLabel:V}=N||{},[z,J]=t.useState(u||[]),[K,Q]=t.useState(!1),[U,X]=t.useState(!1),[Y]=t.useState((()=>n.SimpleIdGenerator.generate())),ee=t.useRef(null),re=t.useRef(null);t.useEffect((()=>{J(u||[])}),[u]);const te=()=>{z&&z.length>0||G?(J([]),oe([])):(J(p),oe(p))},se=(e,t)=>{const s=[...z],l=r.default(z,(e=>(f?f(e):e)===t));l>-1?s.splice(l,1):s.push(e),J(s),oe(s)},le=()=>{K&&(Q(!1),ie(!1))},ae=()=>{U||K||X(!0)},ne=e=>{U&&!K&&ee.current&&!ee.current.contains(e.relatedTarget)&&(X(!1),null==B||B())},ie=e=>{!e&&D&&D(),e&&L&&L()},oe=e=>{T&&T(e)};return e.jsx(l.DropdownListState,{children:e.jsx(o.ElementWithDropdown,{enabled:!F&&!h,isOpen:K,renderElement:()=>e.jsx(d.InputBox,{className:x,"data-testid":j,id:b,ref:ee,tabIndex:-1,onFocus:ae,onBlur:ne,$focused:U,$disabled:h,$readOnly:F,$error:m,children:e.jsx(a.ExpandableElement,{ref:re,disabled:h,expanded:K,listboxId:Y,popupRole:"listbox",readOnly:F,variant:k,"aria-labelledby":q,"aria-describedby":w,"aria-invalid":v,children:e.jsx(i.LabelContainer,{$disabled:h,children:z&&0!==z.length?e.jsx(i.ValueLabel,{$variant:k,children:p&&z.length===p.length?M||"All selected":V||`${z.length} selected`}):e.jsx(i.PlaceholderLabel,{$truncateType:O,$variant:k,children:c})})})}),renderDropdown:()=>e.jsx(s.DropdownList,{listboxId:Y,listItems:p,onSelectItem:se,onDismiss:le,valueExtractor:f,listExtractor:I,enableSearch:y,searchFunction:S,searchPlaceholder:g,multiSelect:!0,maxSelectable:G,selectedItems:z,onSelectAll:te,onRetry:E,itemsLoadState:R,itemTruncationType:O,renderListItem:$,hideNoResultsDisplay:A,noResultsDescription:C,customLabels:N,renderCustomCallToAction:_,variant:k,width:Z,matchElementWidth:!0}),onOpen:()=>{Q(!0),ie(!0),X(!0)},onClose:e=>{Q(!1),ie(!1),"click"!==e&&(X(!1),null==B||B())},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),Q(!1),ie(!1)},clickToToggle:!0,offset:8,alignment:P,fitAvailableHeight:!0,customZIndex:W,rootNode:H})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("../external/lodash/findIndex.js"),t=require("react");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css");var i=require("../shared/dropdown-list/dropdown-list.js"),a=require("../shared/dropdown-list/dropdown-list-state.js"),l=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../_virtual/_tslib.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var n=require("../shared/dropdown-wrapper/element-with-dropdown.js"),o=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1qveyb9.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");var d=require("../shared/dropdown-wrapper/dropdown-wrapper.js");exports.InputMultiSelect=({selectedOptions:u,placeholder:c="Select",options:p,disabled:h,error:m,className:q,"data-testid":x,id:j,"aria-labelledby":b,"aria-describedby":w,"aria-invalid":f,enableSearch:g=!1,searchFunction:y,searchPlaceholder:v,valueExtractor:_,listExtractor:S,onSelectOptions:T,onShowOptions:I,onHideOptions:A,onRetry:L,optionsLoadState:k="success",optionTruncationType:C="end",renderListItem:D,hideNoResultsDisplay:E,noResultsDescription:R,customLabels:O,renderCustomCallToAction:P,onBlur:H,variant:N="default",readOnly:B,alignment:G,dropdownZIndex:M,maxSelectable:F,dropdownRootNode:W,dropdownWidth:Z})=>{const{allSelectedLabel:V,multiSelectedLabel:$}=O||{},[z,J]=t.useState(u||[]),[K,Q]=t.useState(!1),[U,X]=t.useState(!1),Y=s.useId(),ee=t.useRef(null),re=t.useRef(null);t.useEffect((()=>{J(u||[])}),[u]);const te=()=>{z&&z.length>0||F?(J([]),oe([])):(J(p),oe(p))},se=(e,t)=>{const s=[...z],i=r.default(z,(e=>(_?_(e):e)===t));i>-1?s.splice(i,1):s.push(e),J(s),oe(s)},ie=()=>{K&&(Q(!1),ne(!1))},ae=()=>{U||K||X(!0)},le=e=>{U&&!K&&ee.current&&!ee.current.contains(e.relatedTarget)&&(X(!1),null==H||H())},ne=e=>{!e&&A&&A(),e&&I&&I()},oe=e=>{T&&T(e)};return e.jsx(a.DropdownListState,{children:e.jsx(n.ElementWithDropdown,{enabled:!B&&!h,isOpen:K,renderElement:()=>e.jsx(o.InputBox,{className:q,"data-testid":x,id:j,ref:ee,tabIndex:-1,onFocus:ae,onBlur:le,focused:U,disabled:h,readOnly:B,error:m,children:e.jsx(l.ExpandableElement,{ref:re,disabled:h,expanded:K,listboxId:Y,popupRole:"listbox",readOnly:B,variant:N,"aria-labelledby":b,"aria-describedby":w,"aria-invalid":f,children:e.jsx(d.LabelContainer,{disabled:h,children:z&&0!==z.length?e.jsx(d.ValueLabel,{variant:N,truncateType:C,children:p&&z.length===p.length?V||"All selected":$||`${z.length} selected`}):e.jsx(d.PlaceholderLabel,{variant:N,truncateType:C,children:c})})})}),renderDropdown:()=>e.jsx(i.DropdownList,{listboxId:Y,listItems:p,onSelectItem:se,onDismiss:ie,valueExtractor:_,listExtractor:S,enableSearch:g,searchFunction:y,searchPlaceholder:v,multiSelect:!0,maxSelectable:F,selectedItems:z,onSelectAll:te,onRetry:L,itemsLoadState:k,itemTruncationType:C,renderListItem:D,hideNoResultsDisplay:E,noResultsDescription:R,customLabels:O,renderCustomCallToAction:P,variant:N,width:Z,matchElementWidth:!0}),onOpen:()=>{Q(!0),ne(!0),X(!0)},onClose:e=>{Q(!1),ne(!1),"click"!==e&&(X(!1),null==H||H())},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),Q(!1),ne(!1)},clickToToggle:!0,offset:8,alignment:G,fitAvailableHeight:!0,customZIndex:M,rootNode:W})})};
 //# sourceMappingURL=input-multi-select.js.map