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

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"),a=require("./avatar/avatar.js"),n=require("./badge/badge.js"),p=require("./box-container/box-container.js"),u=require("./breadcrumb/breadcrumb.js"),l=require("./button/button.js"),d=require("./calendar/calendar.js"),x=require("./card/card.js"),m=require("./checkbox/checkbox.js"),g=require("./countdown-timer/countdown-timer.js"),h=require("./dashed-border/dashed-border.js"),c=require("./data-table/data-table.js"),T=require("./date-input/date-input.js"),q=require("./date-navigator/date-navigator.js"),j=require("./date-range-input/date-range-input.js"),S=require("./divider/divider.js"),b=require("./drawer/drawer.js"),k=require("./e-signature/e-signature.js"),V=require("./error-display/error-display.js"),v=require("./error-display/helper.js"),_=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"),D=require("./form/index.js"),P=require("./fullscreen-image-carousel/fullscreen-image-carousel.js"),f=require("./histogram-slider/histogram-slider.js"),F=require("./image-button/image-button.js"),L=require("./input/input.js"),w=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"),N=require("./input-range-select/input-range-select.js"),W=require("./input-range-slider/input-range-slider.js"),G=require("./input-select/input-select.js"),O=require("./input-slider/input-slider.js"),H=require("./input-textarea/textarea.js"),Q=require("./language-switcher/language-switcher.js"),U=require("./layout/index.js"),z=require("./link-list/link-list.js"),K=require("./markup/markup.js"),X=require("./masked-input/masked-input.js"),Y=require("./masthead/masthead.js"),J=require("./menu/menu.js"),Z=require("./modal/index.js"),$=require("./modal-v2/index.js"),ee=require("./navbar/navbar.js"),re=require("./notification-banner/notification-banner.js"),te=require("./notification-banner/notification-banner-hoc.js"),oe=require("./otp-input/otp-input.js"),ie=require("./overlay/overlay.js"),se=require("./pagination/pagination.js"),ae=require("./phone-number-input/phone-number-input.js"),ne=require("./pill/pill.js"),pe=require("./popover/popover.js"),ue=require("./popover/popover-inline/popover-inline.js"),le=require("./popover/popover-trigger.js"),de=require("./predictive-text-input/predictive-text-input.js"),xe=require("./progress-indicator/progress-indicator.js"),me=require("./radio-button/radio-button.js"),ge=require("./select-histogram/select-histogram.js"),he=require("./sidenav/sidenav.js"),ce=require("./singpass-button/singpass-button.js"),Te=require("./smart-app-banner/smart-app-banner.js"),qe=require("./tab/tab.js"),je=require("./table/table.js"),Se=require("./tag/tag.js"),be=require("./text-list/index.js"),ke=require("./theme/theme-provider/index.js"),Ve=require("./theme/theme-provider/hooks.js"),ve=require("./theme/tokens/border.js"),_e=require("./theme/tokens/breakpoint.js"),ye=require("./theme/tokens/colour.js"),Be=require("./theme/tokens/component.js"),Ie=require("./theme/tokens/font.js"),Me=require("./theme/tokens/media-query.js"),Ce=require("./theme/tokens/motion.js"),De=require("./theme/tokens/radius.js"),Pe=require("./theme/tokens/shadow.js"),fe=require("./theme/tokens/spacing.js"),Fe=require("./theme/types.js"),Le=require("./theme/utils/css-variable.js"),we=require("./theme/utils/font.js"),Re=require("./theme/utils/token-resolver.js"),Ae=require("./theme/utils/use-apply-styles.js"),Ee=require("./theme/utils/use-design-token.js"),Ne=require("./theme/utils/use-media-query.js"),We=require("./time-range-picker/time-range-picker.js"),Ge=require("./time-slot-bar/time-slot-bar.js"),Oe=require("./time-slot-bar-week/time-slot-bar-week.js"),He=require("./time-slot-week-view/time-slot-week-view.js"),Qe=require("./timeline/timeline.js"),Ue=require("./timepicker/timepicker.js"),ze=require("./timetable/timetable.js"),Ke=require("./toast/toast.js"),Xe=require("./toggle/toggle.js"),Ye=require("./typography/index.js"),Je=require("./uneditable-section/index.js"),Ze=require("./unit-number/unit-number-input.js"),$e=require("./v3_theme/index.js"),er=require("./v3_theme/ds-theme-provider.js"),rr=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=a.Avatar,exports.Badge=n.Badge,exports.BoxContainer=p.BoxContainer,exports.Breadcrumb=u.Breadcrumb,exports.Button=l.Button,exports.Calendar=d.Calendar,exports.Card=x.Card,exports.Checkbox=m.Checkbox,exports.CountdownTimer=g.CountdownTimer,exports.DashedBorder=h.DashedBorder,exports.DataTable=c.DataTable,exports.DateInput=T.DateInput,exports.DateNavigator=q.DateNavigator,exports.DateRangeInput=j.DateRangeInput,exports.Divider=S.Divider,exports.Drawer=b.Drawer,exports.ESignature=k.ESignature,exports.ErrorDisplay=V.ErrorDisplay,exports.ErrorDisplayHelper=v.ErrorDisplayHelper,exports.Example=_.Example,exports.FeedbackRating=y.FeedbackRating,exports.FileDownload=B.FileDownload,exports.FileUpload=I.FileUpload,exports.Filter=M.Filter,exports.Footer=C.Footer,exports.Form=D.Form,exports.Component=P.Component,exports.FullscreenImageCarousel=P.FullscreenImageCarousel,exports.HistogramSlider=f.HistogramSlider,exports.ImageButton=F.ImageButton,exports.Input=L.Input,exports.InputGroup=w.InputGroup,exports.InputMultiSelect=R.InputMultiSelect,exports.InputNestedMultiSelect=A.InputNestedMultiSelect,exports.InputNestedSelect=E.InputNestedSelect,exports.InputRangeSelect=N.InputRangeSelect,exports.InputRangeSlider=W.InputRangeSlider,exports.InputSelect=G.InputSelect,exports.InputSlider=O.InputSlider,exports.Textarea=H.Textarea,exports.LanguageSwitcher=Q.LanguageSwitcher,exports.Layout=U.Layout,exports.LinkList=z.LinkList,exports.Markup=K.Markup,exports.MaskedInput=X.MaskedInput,exports.Masthead=Y.Masthead,exports.Menu=J.Menu,exports.MenuTrigger=J.MenuTrigger,exports.Modal=Z.Modal,exports.ModalV2=$.ModalV2,exports.Navbar=ee.Navbar,exports.NBComponent=re.NBComponent,exports.NotificationBanner=re.NotificationBanner,exports.withNotificationBanner=te.withNotificationBanner,exports.OtpInput=oe.OtpInput,exports.Overlay=ie.Overlay,exports.Pagination=se.Pagination,exports.PhoneNumberInput=ae.PhoneNumberInput,exports.Pill=ne.Pill,exports.Popover=pe.Popover,exports.PopoverInline=ue.PopoverInline,exports.PopoverTrigger=le.PopoverTrigger,exports.PredictiveTextInput=de.PredictiveTextInput,exports.ProgressIndicator=xe.ProgressIndicator,exports.RadioButton=me.RadioButton,exports.SelectHistogram=ge.SelectHistogram,exports.Sidenav=he.Sidenav,exports.SingpassButton=ce.SingpassButton,exports.SmartAppBanner=Te.SmartAppBanner,exports.Tab=qe.Tab,exports.Table=je.Table,exports.Tag=Se.Tag,exports.TextList=be.TextList,exports.ThemeProvider=ke.ThemeProvider,exports.useInheritedThemeScope=Ve.useInheritedThemeScope,exports.useTheme=Ve.useTheme,exports.Border=ve.Border,exports.BorderStyle=ve.BorderStyle,exports.BorderThickness=ve.BorderThickness,exports.Breakpoint=_e.Breakpoint,exports.Colour=ye.Colour,exports.PrimitiveColours=ye.PrimitiveColours,exports.SemanticColours=ye.SemanticColours,exports.ComponentToken=Be.ComponentToken,exports.Font=Ie.Font,exports.FontSpec=Ie.FontSpec,exports.MediaQuery=Me.MediaQuery,exports.Motion=Ce.Motion,exports.Radius=De.Radius,exports.Shadow=Pe.Shadow,exports.Spacing=fe.Spacing,exports.THEME_TYPES=Fe.THEME_TYPES,exports.extractFdsCssVariableName=Le.extractFdsCssVariableName,exports.formatUnitValue=Le.formatUnitValue,exports.getInheritedInlineCssVariables=Le.getInheritedInlineCssVariables,exports.normalizeCssLengthValue=Le.normalizeCssLengthValue,exports.parseCSSVariableValue=Le.parseCSSVariableValue,exports.parsePxOrRemValue=Le.parsePxOrRemValue,exports.generateFont=we.generateFont,exports.generateFontProperties=we.generateFontProperties,exports.getEffectiveTokenOrCustom=Re.getEffectiveTokenOrCustom,exports.getResolvedValue=Re.getResolvedValue,exports.getTokenOrDefault=Re.getTokenOrDefault,exports.isTokenFromSet=Re.isTokenFromSet,exports.isTokenWithPrefix=Re.isTokenWithPrefix,exports.toCssValue=Re.toCssValue,exports.useApplyStyle=Ae.useApplyStyle,exports.useDesignToken=Ee.useDesignToken,exports.useResolvedTokenValue=Ee.useResolvedTokenValue,exports.DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT=Ne.DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,exports.useMaxWidthMediaQuery=Ne.useMaxWidthMediaQuery,exports.useMediaQuery=Ne.useMediaQuery,exports.useMinWidthMediaQuery=Ne.useMinWidthMediaQuery,exports.useResolvedBreakpointToken=Ne.useResolvedBreakpointToken,exports.TimeRangePicker=We.TimeRangePicker,exports.TimeSlotBar=Ge.TimeSlotBar,exports.TimeSlotBarWeek=Oe.TimeSlotBarWeek,exports.TimeSlotWeekView=He.TimeSlotWeekView,exports.Timeline=Qe.Timeline,exports.Timepicker=Ue.Timepicker,exports.TimeTable=ze.TimeTable,exports.Toast=Ke.Toast,exports.Toggle=Xe.Toggle,exports.Typography=Ye.Typography,exports.UneditableSection=Je.UneditableSection,exports.UnitNumberInput=Ze.UnitNumberInput,exports.V3_A11yPlaygroundTheme=$e.V3_A11yPlaygroundTheme,exports.V3_BookingSGTheme=$e.V3_BookingSGTheme,exports.V3_Border=$e.V3_Border,exports.V3_Breakpoint=$e.V3_Breakpoint,exports.V3_CCubeTheme=$e.V3_CCubeTheme,exports.V3_Colour=$e.V3_Colour,exports.V3_Font=$e.V3_Font,exports.V3_IMDATheme=$e.V3_IMDATheme,exports.V3_LifeSGTheme=$e.V3_LifeSGTheme,exports.V3_MediaQuery=$e.V3_MediaQuery,exports.V3_Motion=$e.V3_Motion,exports.V3_MyLegacyTheme=$e.V3_MyLegacyTheme,exports.V3_OneServiceTheme=$e.V3_OneServiceTheme,exports.V3_PATheme=$e.V3_PATheme,exports.V3_RBSTheme=$e.V3_RBSTheme,exports.V3_Radius=$e.V3_Radius,exports.V3_SGWDigitalLobbyTheme=$e.V3_SGWDigitalLobbyTheme,exports.V3_SGWDigitalLobbyThemeBase=$e.V3_SGWDigitalLobbyThemeBase,exports.V3_SMGSTheme=$e.V3_SMGSTheme,exports.V3_SPFTheme=$e.V3_SPFTheme,exports.V3_Shadow=$e.V3_Shadow,exports.V3_Spacing=$e.V3_Spacing,exports.V3_SupportGoWhereTheme=$e.V3_SupportGoWhereTheme,exports.V3_SupportGoWhereThemeBase=$e.V3_SupportGoWhereThemeBase,exports.V3_DSThemeProvider=er.V3_DSThemeProvider,exports.createThemeWithColourMode=rr.createThemeWithColourMode,exports.getSystemColourMode=rr.getSystemColourMode,exports.useDSTheme=rr.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("../theme/utils/use-media-query.js"),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_1kt4zhf.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 j=(a,b)=>{var{addon:j,error:q,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:k,enableSearch:A,hideNoResultsDisplay:E,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}=j.attributes,{position:X="left"}=j,[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))},je=()=>{ae(!0),he(!0),se(!0)},qe=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:k,enableSearch:A,hideNoResultsDisplay:E,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:q,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:je,onClose:qe,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("div",{"data-position":X,className:x.default(h.fieldInput,g&&h.fieldInputNoBorder,f&&h.fieldInputReadOnly),children:r.jsx(s.Input,Object.assign({ref:b},R,{readOnly:f,disabled:y,error:q,onChange:e=>{m&&m(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":t.concatIds(I,ne),"aria-describedby":S,"aria-invalid":T}))})]})})},q=b(i).default.forwardRef(j);exports.Component=j,exports.InputGroupListAddon=q;
 //# 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":"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"}
+{"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                <div\n                    data-position={position}\n                    className={clsx(\n                        styles.fieldInput,\n                        noBorder && styles.fieldInputNoBorder,\n                        readOnly && styles.fieldInputReadOnly\n                    )}\n                >\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(\n                            ariaLabelledBy,\n                            textboxLabelId\n                        )}\n                        aria-describedby={ariaDescribedBy}\n                        aria-invalid={ariaInvalid}\n                    />\n                </div>\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","styles.fieldInput","styles.fieldInputNoBorder","styles.fieldInputReadOnly","Input","Object","assign","event","styleType","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_17iuqtw.css");exports.divider="d7gwol5",exports.dividerReadOnly="d181f48m",exports.expandableElementNoBorder="e135ws0j",exports.fieldInput="f96umbl",exports.fieldInputNoBorder="f3g4d0l",exports.fieldInputReadOnly="fioonlm",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 fieldInput = css`\n    width: 100%;\n\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 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 fieldInputReadOnly = css`\n    padding: 0;\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":"+GAiEoB,kCAeQ,6CAhEU,8BAcf,qCAYQ,qCAUA,gCA1BL,+BAnBD,mCAiDI"}

package/cjs/input-group/input-group-list-addon.styles_17iuqtw.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{width:100%;}.f96umbl[data-position="right"]{padding-left:var(--fds-spacing-16);}.f96umbl[data-position="left"]{padding-right:var(--fds-spacing-16);}
+.f3g4d0l[data-position="right"]{padding-left:0;}.f3g4d0l[data-position="left"]{padding-right:0;}
+.fioonlm{padding:0;}
+.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"),d=require("react"),t=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 l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=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 c=u(a);const p=u(d).default.forwardRef(((a,d)=>{var{addon:u,error:p,className:b,noBorder:y,"aria-label":j,"aria-labelledby":h}=a,f=e.__rest(a,["addon","error","className","noBorder","aria-label","aria-labelledby"]);const x=l.useId(),q=`${x}-addon`,m=`${x}-ariaLabelId`,v=()=>r.jsxs(s.InputBox,{disabled:f.disabled,error:p,readOnly:f.readOnly,noBorder:y,"data-testid":f["data-testid"],className:c.default(n.noAddonWrapper,b),"data-read-only":f.readOnly,"data-no-border":y,children:[r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:m,children:j}),r.jsx(t.Input,Object.assign({ref:d},f,{"data-testid":"input",styleType:"no-border","aria-labelledby":i.concatIds(m,h)}))]}),I=(e,a,l)=>r.jsxs(s.InputBox,{disabled:f.disabled,error:p,readOnly:f.readOnly,noBorder:y,"data-testid":f["data-testid"],className:c.default(n.addonWrapper,b),"data-read-only":f.readOnly,"data-no-border":y,"data-position":a,children:[r.jsx("div",{"data-testid":"addon",id:q,className:n.labelAddonContainer,"data-disabled":f.disabled,"data-read-only":f.readOnly,"data-position":a,children:e}),r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:m,children:j}),r.jsx(t.Input,Object.assign({ref:d},f,{"aria-labelledby":i.concatIds(m,h,q),allowClear:l&&"right"!==a,error:p,"data-testid":"input",styleType:"no-border"}))]});if(!u)return v();{const{type:e="label",position:a="left"}=u,{allowClear:t}=f;switch(e){case"list":{const e=u.attributes;return e.options&&e.options.length>0?r.jsx(o.InputGroupListAddon,Object.assign({ref:d,addon:u,error:p,className:b,noBorder:y,"aria-label":j,"aria-labelledby":h},f)):v()}case"custom":{const e=u.attributes;return e.children?I(e.children,a,t):v()}default:{const e=u.attributes;return e.value?I(e.value,a,t):v()}}}}));exports.InputGroup=p;
 //# 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            <VisuallyHidden aria-hidden id={ariaLabelId}>\n                {ariaLabel}\n            </VisuallyHidden>\n            <Input\n                ref={ref}\n                {...otherProps}\n                data-testid=\"input\"\n                styleType=\"no-border\"\n                aria-labelledby={concatIds(ariaLabelId, ariaLabelledBy)}\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","_jsxs","InputBox","disabled","readOnly","clsx","styles.noAddonWrapper","_jsx","VisuallyHidden","id","children","Input","Object","assign","styleType","concatIds","renderWithAddon","addonContent","position","allowClear","styles.addonWrapper","styles.labelAddonContainer","type","listAddon","attributes","options","length","InputGroupListAddon","customAddon","labelAddon","value"],"mappings":"0mBAgBA,MAkJaA,OAAaC,QAAMC,YAlJd,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,KAACC,EAAAA,SAAQ,CACLC,SAAUT,EAAWS,SACrBd,MAAOA,EACPe,SAAUV,EAAWU,SACrBb,SAAUA,gBACGG,EAAW,eACxBJ,UAAWe,EAAAA,QAAKC,EAAAA,eAAuBhB,oBACvBI,EAAWU,SAAQ,iBACnBb,YAEhBgB,MAACC,EAAAA,eAAc,CAAA,eAAA,EAAaC,GAAIV,EAAWW,SACtClB,IAELe,EAAAA,IAACI,EAAAA,MAAKC,OAAAC,OAAA,CACF1B,IAAKA,GACDO,iBACQ,QACZoB,UAAU,8BACOC,EAAAA,UAAUhB,EAAaN,SAK9CuB,EAAkB,CACpBC,EACAC,EACAC,IAEAlB,EAAAA,KAACC,EAAAA,SAAQ,CACLC,SAAUT,EAAWS,SACrBd,MAAOA,EACPe,SAAUV,EAAWU,SACrBb,SAAUA,EAAQ,cACLG,EAAW,eACxBJ,UAAWe,EAAAA,QAAKe,EAAAA,aAAqB9B,GAAU,iBAC/BI,EAAWU,SAAQ,iBACnBb,EAAQ,gBACT2B,EAAQR,SAAA,CAEvBH,MAAA,MAAA,CAAA,cACgB,QACZE,GAAIX,EACJR,UAAW+B,sBAA0B,gBACtB3B,EAAWS,SAAQ,iBAClBT,EAAWU,SAAQ,gBACpBc,EAAQR,SAEtBO,IAELV,EAAAA,IAACC,iBAAc,CAAA,eAAA,EAAaC,GAAIV,EAAWW,SACtClB,IAELe,MAACI,EAAAA,qBACGxB,IAAKA,GACDO,EAAU,CAAA,kBACGqB,EAAAA,UACbhB,EACAN,EACAK,GAEJqB,WAAYA,GAA2B,UAAbD,EAC1B7B,MAAOA,EAAK,cACA,QACZyB,UAAU,kBAKtB,IAAI1B,EAmDA,OAAOY,IAnDA,CACP,MAAMsB,KAAEA,EAAO,QAAOJ,SAAEA,EAAW,QAAW9B,GACxC+B,WAAEA,GAAezB,EAEvB,OAAQ4B,GACJ,IAAK,OAAQ,CACT,MAAMC,EAAYnC,EAAMoC,WACxB,OAAID,EAAUE,SAAWF,EAAUE,QAAQC,OAAS,EAE5CnB,EAAAA,IAACoB,sBAAmBf,OAAAC,OAAA,CAChB1B,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,EAAYlB,SACLM,EACHY,EAAYlB,SACZQ,EACAC,GAGGnB,GAEf,CACA,QAAS,CACL,MAAM6B,EAAazC,EAAMoC,WACzB,OAAIK,EAAWC,MACJd,EACHa,EAAWC,MACXZ,EACAC,GAGGnB,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("../theme/utils/use-media-query.js"),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_1kt4zhf.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:z,multiSelectedLabel:V}=O||{},[$,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=()=>{$&&$.length>0||F?(J([]),oe([])):(J(p),oe(p))},se=(e,t)=>{const s=[...$],i=r.default($,(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:$&&0!==$.length?e.jsx(d.ValueLabel,{variant:N,truncateType:C,children:p&&$.length===p.length?z||"All selected":V||`${$.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:$,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

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

@@ -1 +1 @@
-{"version":3,"file":"input-multi-select.js","sources":["../../../src/input-multi-select/input-multi-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport findIndex from \"lodash/findIndex\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n    DropdownList,\n    DropdownListState,\n    ExpandableElement,\n} 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 { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator } from \"../util\";\nimport type { InputMultiSelectProps } from \"./types\";\n\nexport const InputMultiSelect = <T, V>({\n    selectedOptions,\n    placeholder = \"Select\",\n    options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    listExtractor,\n    onSelectOptions,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    renderListItem,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    renderCustomCallToAction,\n    onBlur,\n    variant = \"default\",\n    readOnly,\n    alignment,\n    dropdownZIndex,\n    maxSelectable,\n    dropdownRootNode,\n    dropdownWidth,\n}: InputMultiSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const { allSelectedLabel, multiSelectedLabel } = customLabels || {};\n    const [selected, setSelected] = useState<T[]>(selectedOptions || []);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOptions || []);\n    }, [selectedOptions]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelectAllClick = () => {\n        if ((selected && selected.length > 0) || maxSelectable) {\n            setSelected([]);\n            performOnSelectOptions([]);\n        } else {\n            setSelected(options);\n            performOnSelectOptions(options);\n        }\n    };\n\n    const handleListItemClick = (item: T, extractedValue: T | V) => {\n        const selectedCopy = [...selected];\n\n        // Check if it is a selection or deselection\n        const itemIndex = findIndex(selected, (item) => {\n            const valueToCompare = valueExtractor ? valueExtractor(item) : item;\n            return valueToCompare === extractedValue;\n        });\n\n        if (itemIndex > -1) {\n            // Item exists in selected. This indicates a deselection\n            selectedCopy.splice(itemIndex, 1);\n        } else {\n            // Item does not exist in selected. This indicates a selection\n            selectedCopy.push(item);\n        }\n\n        setSelected(selectedCopy);\n        performOnSelectOptions(selectedCopy);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\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    // HELPER FUNCTION\n    // =============================================================================\n    const getDisplayValue = () => {\n        if (options && selected.length === options.length) {\n            return allSelectedLabel || \"All selected\";\n        }\n\n        return multiSelectedLabel || `${selected.length} selected`;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show && onHideOptions) {\n            onHideOptions();\n        }\n\n        if (show && onShowOptions) {\n            onShowOptions();\n        }\n    };\n\n    const performOnSelectOptions = (options: T[]) => {\n        if (onSelectOptions) {\n            onSelectOptions(options);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected || selected.length === 0) {\n            return (\n                <PlaceholderLabel\n                    $truncateType={optionTruncationType}\n                    $variant={variant}\n                >\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else {\n            return (\n                <ValueLabel $variant={variant}>{getDisplayValue()}</ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer $disabled={disabled}>{renderLabel()}</LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={internalId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                searchFunction={searchFunction}\n                searchPlaceholder={searchPlaceholder}\n                multiSelect\n                maxSelectable={maxSelectable}\n                selectedItems={selected}\n                onSelectAll={handleSelectAllClick}\n                onRetry={onRetry}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                renderListItem={renderListItem}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                renderCustomCallToAction={renderCustomCallToAction}\n                variant={variant}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["selectedOptions","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","listExtractor","onSelectOptions","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","maxSelectable","dropdownRootNode","dropdownWidth","allSelectedLabel","multiSelectedLabel","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","nodeRef","useRef","selectorRef","useEffect","handleSelectAllClick","length","performOnSelectOptions","handleListItemClick","item","extractedValue","selectedCopy","itemIndex","findIndex","splice","push","handleListDismiss","triggerOptionDisplayCallback","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","$variant","PlaceholderLabel","$truncateType","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","multiSelect","selectedItems","onSelectAll","itemsLoadState","itemTruncationType","width","matchElementWidth","onOpen","onClose","reason","_a","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"input-multi-select.js","sources":["../../../src/input-multi-select/input-multi-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport findIndex from \"lodash/findIndex\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\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/input-wrapper\";\nimport { useId } from \"../util\";\nimport type { InputMultiSelectProps } from \"./types\";\n\nexport const InputMultiSelect = <T, V>({\n    selectedOptions,\n    placeholder = \"Select\",\n    options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    listExtractor,\n    onSelectOptions,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    renderListItem,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    renderCustomCallToAction,\n    onBlur,\n    variant = \"default\",\n    readOnly,\n    alignment,\n    dropdownZIndex,\n    maxSelectable,\n    dropdownRootNode,\n    dropdownWidth,\n}: InputMultiSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const { allSelectedLabel, multiSelectedLabel } = customLabels || {};\n    const [selected, setSelected] = useState<T[]>(selectedOptions || []);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOptions || []);\n    }, [selectedOptions]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelectAllClick = () => {\n        if ((selected && selected.length > 0) || maxSelectable) {\n            setSelected([]);\n            performOnSelectOptions([]);\n        } else {\n            setSelected(options);\n            performOnSelectOptions(options);\n        }\n    };\n\n    const handleListItemClick = (item: T, extractedValue: T | V) => {\n        const selectedCopy = [...selected];\n\n        // Check if it is a selection or deselection\n        const itemIndex = findIndex(selected, (item) => {\n            const valueToCompare = valueExtractor ? valueExtractor(item) : item;\n            return valueToCompare === extractedValue;\n        });\n\n        if (itemIndex > -1) {\n            // Item exists in selected. This indicates a deselection\n            selectedCopy.splice(itemIndex, 1);\n        } else {\n            // Item does not exist in selected. This indicates a selection\n            selectedCopy.push(item);\n        }\n\n        setSelected(selectedCopy);\n        performOnSelectOptions(selectedCopy);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\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    // HELPER FUNCTION\n    // =============================================================================\n    const getDisplayValue = () => {\n        if (options && selected.length === options.length) {\n            return allSelectedLabel || \"All selected\";\n        }\n\n        return multiSelectedLabel || `${selected.length} selected`;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show && onHideOptions) {\n            onHideOptions();\n        }\n\n        if (show && onShowOptions) {\n            onShowOptions();\n        }\n    };\n\n    const performOnSelectOptions = (options: T[]) => {\n        if (onSelectOptions) {\n            onSelectOptions(options);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected || selected.length === 0) {\n            return (\n                <PlaceholderLabel\n                    variant={variant}\n                    truncateType={optionTruncationType}\n                >\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else {\n            return (\n                <ValueLabel\n                    variant={variant}\n                    truncateType={optionTruncationType}\n                >\n                    {getDisplayValue()}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={internalId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                searchFunction={searchFunction}\n                searchPlaceholder={searchPlaceholder}\n                multiSelect\n                maxSelectable={maxSelectable}\n                selectedItems={selected}\n                onSelectAll={handleSelectAllClick}\n                onRetry={onRetry}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                renderListItem={renderListItem}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                renderCustomCallToAction={renderCustomCallToAction}\n                variant={variant}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["selectedOptions","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","listExtractor","onSelectOptions","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","maxSelectable","dropdownRootNode","dropdownWidth","allSelectedLabel","multiSelectedLabel","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","useEffect","handleSelectAllClick","length","performOnSelectOptions","handleListItemClick","item","extractedValue","selectedCopy","itemIndex","findIndex","splice","push","handleListDismiss","triggerOptionDisplayCallback","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","truncateType","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","multiSelect","selectedItems","onSelectAll","itemsLoadState","itemTruncationType","width","matchElementWidth","onOpen","onClose","reason","_a","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/cjs/input-nested-multi-select/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sources":["../../../src/input-nested-multi-select/helpers.ts"],"sourcesContent":["import isEmpty from \"lodash/isEmpty\";\n\nimport type { NestedDropdownListItemProps } from \"../shared/dropdown-list-v2\";\n\nconst findSelectedItem = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[] | undefined,\n    keyPath: string[]\n): NestedDropdownListItemProps<V1 | V2 | V3> | undefined => {\n    const [currentKey, ...nextKeyPath] = keyPath;\n\n    if (isEmpty(options) || !currentKey) {\n        return undefined;\n    }\n\n    const item = options!.find((item) => item.key === currentKey);\n\n    if (!item) {\n        return undefined;\n    }\n\n    if (!nextKeyPath.length) {\n        return item;\n    }\n\n    return findSelectedItem(item.subItems, nextKeyPath);\n};\n\nexport const getSelectedItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    keyPaths: string[][]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const selectedItems: SelectedItem<V1 | V2 | V3>[] = [];\n\n    for (let i = 0; i < keyPaths.length; i++) {\n        const keyPath = keyPaths[i];\n        const item = findSelectedItem(options, keyPath);\n\n        if (item) {\n            selectedItems.push({\n                value: item.value,\n                label: item.label,\n                keyPath: keyPath,\n            });\n        }\n    }\n\n    return selectedItems;\n};\n\nexport interface SelectedItem<T> {\n    label: string;\n    keyPath: string[];\n    value: T;\n}\n\nconst findSubItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    parentKeyPath: string[]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const selectedItems: SelectedItem<V1 | V2 | V3>[] = [];\n\n    for (const option of options) {\n        if (option.subItems) {\n            selectedItems.push(\n                ...findSubItems(option.subItems, [...parentKeyPath, option.key])\n            );\n        } else {\n            selectedItems.push({\n                value: option.value,\n                label: option.label,\n                keyPath: [...parentKeyPath, option.key],\n            });\n        }\n    }\n\n    return selectedItems;\n};\n\nexport const getSelectedSubItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    keyPath: string[]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const item = findSelectedItem(options, keyPath);\n\n    if (item && item.subItems) {\n        return findSubItems(item.subItems, keyPath);\n    }\n\n    return [];\n};\n"],"names":["findSelectedItem","options","keyPath","currentKey","nextKeyPath","isEmpty","item","find","key","length","subItems","findSubItems","parentKeyPath","selectedItems","option","push","value","label","keyPaths","i"],"mappings":"4DAIA,MAAMA,EAAmB,CACrBC,EACAC,KAEA,MAAOC,KAAeC,GAAeF,EAErC,GAAIG,UAAQJ,KAAaE,EACrB,OAGJ,MAAMG,EAAOL,EAASM,MAAMD,GAASA,EAAKE,MAAQL,IAElD,OAAKG,EAIAF,EAAYK,OAIVT,EAAiBM,EAAKI,SAAUN,GAH5BE,OALX,CAQmD,EA+BjDK,EAAe,CACjBV,EACAW,KAEA,MAAMC,EAA8C,GAEpD,IAAK,MAAMC,KAAUb,EACba,EAAOJ,SACPG,EAAcE,QACPJ,EAAaG,EAAOJ,SAAU,IAAIE,EAAeE,EAAON,OAG/DK,EAAcE,KAAK,CACfC,MAAOF,EAAOE,MACdC,MAAOH,EAAOG,MACdf,QAAS,IAAIU,EAAeE,EAAON,OAK/C,OAAOK,CAAa,2BAhDQ,CAC5BZ,EACAiB,KAEA,MAAML,EAA8C,GAEpD,IAAK,IAAIM,EAAI,EAAGA,EAAID,EAAST,OAAQU,IAAK,CACtC,MAAMjB,EAAUgB,EAASC,GACnBb,EAAON,EAAiBC,EAASC,GAEnCI,GACAO,EAAcE,KAAK,CACfC,MAAOV,EAAKU,MACZC,MAAOX,EAAKW,MACZf,QAASA,GAGrB,CAEA,OAAOW,CAAa,8BAgCW,CAC/BZ,EACAC,KAEA,MAAMI,EAAON,EAAiBC,EAASC,GAEvC,OAAII,GAAQA,EAAKI,SACNC,EAAaL,EAAKI,SAAUR,GAGhC,EAAE"}
+{"version":3,"file":"helpers.js","sources":["../../../src/input-nested-multi-select/helpers.ts"],"sourcesContent":["import isEmpty from \"lodash/isEmpty\";\n\nimport type { NestedDropdownListItemProps } from \"../shared/dropdown-list\";\n\nconst findSelectedItem = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[] | undefined,\n    keyPath: string[]\n): NestedDropdownListItemProps<V1 | V2 | V3> | undefined => {\n    const [currentKey, ...nextKeyPath] = keyPath;\n\n    if (isEmpty(options) || !currentKey) {\n        return undefined;\n    }\n\n    const item = options!.find((item) => item.key === currentKey);\n\n    if (!item) {\n        return undefined;\n    }\n\n    if (!nextKeyPath.length) {\n        return item;\n    }\n\n    return findSelectedItem(item.subItems, nextKeyPath);\n};\n\nexport const getSelectedItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    keyPaths: string[][]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const selectedItems: SelectedItem<V1 | V2 | V3>[] = [];\n\n    for (let i = 0; i < keyPaths.length; i++) {\n        const keyPath = keyPaths[i];\n        const item = findSelectedItem(options, keyPath);\n\n        if (item) {\n            selectedItems.push({\n                value: item.value,\n                label: item.label,\n                keyPath: keyPath,\n            });\n        }\n    }\n\n    return selectedItems;\n};\n\nexport interface SelectedItem<T> {\n    label: string;\n    keyPath: string[];\n    value: T;\n}\n\nconst findSubItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    parentKeyPath: string[]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const selectedItems: SelectedItem<V1 | V2 | V3>[] = [];\n\n    for (const option of options) {\n        if (option.subItems) {\n            selectedItems.push(\n                ...findSubItems(option.subItems, [...parentKeyPath, option.key])\n            );\n        } else {\n            selectedItems.push({\n                value: option.value,\n                label: option.label,\n                keyPath: [...parentKeyPath, option.key],\n            });\n        }\n    }\n\n    return selectedItems;\n};\n\nexport const getSelectedSubItems = <V1, V2, V3>(\n    options: NestedDropdownListItemProps<V1 | V2 | V3>[],\n    keyPath: string[]\n): SelectedItem<V1 | V2 | V3>[] => {\n    const item = findSelectedItem(options, keyPath);\n\n    if (item && item.subItems) {\n        return findSubItems(item.subItems, keyPath);\n    }\n\n    return [];\n};\n"],"names":["findSelectedItem","options","keyPath","currentKey","nextKeyPath","isEmpty","item","find","key","length","subItems","findSubItems","parentKeyPath","selectedItems","option","push","value","label","keyPaths","i"],"mappings":"4DAIA,MAAMA,EAAmB,CACrBC,EACAC,KAEA,MAAOC,KAAeC,GAAeF,EAErC,GAAIG,UAAQJ,KAAaE,EACrB,OAGJ,MAAMG,EAAOL,EAASM,MAAMD,GAASA,EAAKE,MAAQL,IAElD,OAAKG,EAIAF,EAAYK,OAIVT,EAAiBM,EAAKI,SAAUN,GAH5BE,OALX,CAQmD,EA+BjDK,EAAe,CACjBV,EACAW,KAEA,MAAMC,EAA8C,GAEpD,IAAK,MAAMC,KAAUb,EACba,EAAOJ,SACPG,EAAcE,QACPJ,EAAaG,EAAOJ,SAAU,IAAIE,EAAeE,EAAON,OAG/DK,EAAcE,KAAK,CACfC,MAAOF,EAAOE,MACdC,MAAOH,EAAOG,MACdf,QAAS,IAAIU,EAAeE,EAAON,OAK/C,OAAOK,CAAa,2BAhDQ,CAC5BZ,EACAiB,KAEA,MAAML,EAA8C,GAEpD,IAAK,IAAIM,EAAI,EAAGA,EAAID,EAAST,OAAQU,IAAK,CACtC,MAAMjB,EAAUgB,EAASC,GACnBb,EAAON,EAAiBC,EAASC,GAEnCI,GACAO,EAAcE,KAAK,CACfC,MAAOV,EAAKU,MACZC,MAAOX,EAAKW,MACZf,QAASA,GAGrB,CAEA,OAAOW,CAAa,8BAgCW,CAC/BZ,EACAC,KAEA,MAAMI,EAAON,EAAiBC,EAASC,GAEvC,OAAII,GAAQA,EAAKI,SACNC,EAAaL,EAAKI,SAAUR,GAGhC,EAAE"}