@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

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-spinner/loading-spinner.js"),o=require("./animations/loading-dots/loading-dots.js"),i=require("./animations/loading-dots-spinner/loading-dots-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"),c=require("./countdown-timer/countdown-timer.js"),T=require("./data-table/data-table.js"),h=require("./date-input/date-input.js"),j=require("./date-navigator/date-navigator.js"),q=require("./date-range-input/date-range-input.js"),b=require("./divider/divider.js"),S=require("./drawer/drawer.js"),v=require("./e-signature/e-signature.js"),y=require("./error-display/error-display.js"),B=require("./error-display/helper.js"),k=require("./feedback-rating/feedback-rating.js"),I=require("./file-download/file-download.js"),_=require("./file-upload/file-upload.js"),C=require("./filter/filter.js"),M=require("./footer/footer.js"),V=require("./form/index.js"),P=require("./fullscreen-image-carousel/fullscreen-image-carousel.js"),w=require("./histogram-slider/histogram-slider.js"),D=require("./icon-button/icon-button.js"),f=require("./image-button/image-button.js"),L=require("./input/input.js"),R=require("./input-group/input-group.js"),F=require("./input-multi-select/input-multi-select.js"),G=require("./input-nested-multi-select/input-nested-multi-select.js"),N=require("./input-nested-select/input-nested-select.js"),W=require("./input-range-select/input-range-select.js"),A=require("./input-range-slider/input-range-slider.js"),O=require("./input-select/input-select.js"),H=require("./input-slider/input-slider.js"),E=require("./input-textarea/textarea.js"),U=require("./language-switcher/language-switcher.js"),Q=require("./layout/index.js"),K=require("./link-list/link-list.js"),z=require("./markup/markup.js"),J=require("./masked-input/masked-input.js"),X=require("./masonry/masonry.js"),Y=require("./masthead/masthead.js"),Z=require("./menu/menu.js"),$=require("./modal/index.js"),ee=require("./modal-v2/index.js"),re=require("./navbar/navbar.js"),te=require("./notification-banner/notification-banner.js"),oe=require("./notification-banner/notification-banner-hoc.js"),ie=require("./otp-input/otp-input.js"),se=require("./overlay/overlay.js"),ne=require("./pagination/pagination.js"),pe=require("./phone-number-input/phone-number-input.js"),ae=require("./pill/pill.js"),ue=require("./popover/popover-hoc.js"),le=require("./popover/popover.js"),xe=require("./popover-v2/popover.js"),de=require("./popover-v2/popover-inline/popover-inline.js"),me=require("./popover-v2/popover-trigger.js"),ge=require("./predictive-text-input/predictive-text-input.js"),ce=require("./progress-indicator/progress-indicator.js"),Te=require("./radio-button/radio-button.js"),he=require("./select-histogram/select-histogram.js"),je=require("./sidenav/sidenav.js"),qe=require("./singpass-button/singpass-button.js"),be=require("./smart-app-banner/smart-app-banner.js"),Se=require("./tab/tab.js"),ve=require("./table/table.js"),ye=require("./tag/tag.js"),Be=require("./text-list/index.js"),ke=require("./theme/index.js"),Ie=require("./time-range-picker/time-range-picker.js"),_e=require("./time-slot-bar/time-slot-bar.js"),Ce=require("./time-slot-bar-week/time-slot-bar-week.js"),Me=require("./time-slot-week-view/time-slot-week-view.js"),Ve=require("./timeline/timeline.js"),Pe=require("./timepicker/timepicker.js"),we=require("./timetable/timetable.js"),De=require("./toast/toast.js"),fe=require("./toggle/toggle.js"),Le=require("./tooltip/tooltip.js"),Re=require("./tooltip/tooltip-hoc.js"),Fe=require("./typography/typography.js"),Ge=require("./uneditable-section/index.js"),Ne=require("./unit-number/unit-number-input.js"),We=require("./v2_color/color.js"),Ae=require("./v2_design-token/design-token.js"),Oe=require("./v2_layout/index.js"),He=require("./v2_media/media.js"),Ee=require("./v2_text/helper.js"),Ue=require("./v2_text/text-style.js"),Qe=require("./v2_text/text.js"),Ke=require("./v2_text/types.js"),ze=require("./v2_text-list/index.js"),Je=require("./v2_theme/index.js"),Xe=require("./v2_transition/index.js"),Ye=require("./theme/ds-theme-provider.js"),Ze=require("./v2_theme/types.js"),$e=require("./theme/use-theme-mode.js");exports.Accordion=e.Accordion,exports.Alert=r.Alert,exports.LoadingSpinner=t.LoadingSpinner,exports.LoadingDots=o.LoadingDots,exports.LoadingDotsSpinner=i.LoadingDotsSpinner,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=c.CountdownTimer,exports.DataTable=T.DataTable,exports.DateInput=h.DateInput,exports.DateNavigator=j.DateNavigator,exports.DateRangeInput=q.DateRangeInput,exports.Divider=b.Divider,exports.Drawer=S.Drawer,exports.ESignature=v.ESignature,exports.ErrorDisplay=y.ErrorDisplay,Object.defineProperty(exports,"ErrorDisplayHelper",{enumerable:!0,get:function(){return B.ErrorDisplayHelper}}),exports.FeedbackRating=k.FeedbackRating,exports.FileDownload=I.FileDownload,exports.FileUpload=_.FileUpload,exports.Filter=C.Filter,exports.Footer=M.Footer,exports.Form=V.Form,exports.Component=P.Component,exports.FullscreenImageCarousel=P.FullscreenImageCarousel,exports.HistogramSlider=w.HistogramSlider,exports.IconButton=D.IconButton,exports.ImageButton=f.ImageButton,exports.Input=L.Input,exports.InputGroup=R.InputGroup,exports.InputMultiSelect=F.InputMultiSelect,exports.InputNestedMultiSelect=G.InputNestedMultiSelect,exports.InputNestedSelect=N.InputNestedSelect,exports.InputRangeSelect=W.InputRangeSelect,exports.InputRangeSlider=A.InputRangeSlider,exports.InputSelect=O.InputSelect,exports.InputSlider=H.InputSlider,exports.Textarea=E.Textarea,exports.LanguageSwitcher=U.LanguageSwitcher,exports.Layout=Q.Layout,exports.LinkList=K.LinkList,exports.Markup=z.Markup,exports.MaskedInput=J.MaskedInput,exports.Masonry=X.Masonry,exports.Masthead=Y.Masthead,exports.Menu=Z.Menu,exports.MenuTrigger=Z.MenuTrigger,exports.Modal=$.Modal,exports.ModalV2=ee.ModalV2,exports.Navbar=re.Navbar,exports.NBComponent=te.NBComponent,exports.NotificationBanner=te.NotificationBanner,exports.withNotificationBanner=oe.withNotificationBanner,exports.OtpInput=ie.OtpInput,exports.Overlay=se.Overlay,exports.Pagination=ne.Pagination,exports.PhoneNumberInput=pe.PhoneNumberInput,exports.Pill=ae.Pill,exports.withPopover=ue.withPopover,exports.Popover=le.Popover,exports.PopoverV2=xe.PopoverV2,exports.PopoverInline=de.PopoverInline,exports.PopoverTrigger=me.PopoverTrigger,exports.PredictiveTextInput=ge.PredictiveTextInput,exports.ProgressIndicator=ce.ProgressIndicator,exports.RadioButton=Te.RadioButton,exports.SelectHistogram=he.SelectHistogram,exports.Sidenav=je.Sidenav,exports.SingpassButton=qe.SingpassButton,exports.SmartAppBanner=be.SmartAppBanner,exports.Tab=Se.Tab,exports.Table=ve.Table,exports.Tag=ye.Tag,exports.TextList=Be.TextList,exports.A11yPlaygroundTheme=ke.A11yPlaygroundTheme,exports.BookingSGTheme=ke.BookingSGTheme,exports.Border=ke.Border,exports.Breakpoint=ke.Breakpoint,exports.CCubeTheme=ke.CCubeTheme,exports.CareerCompassTheme=ke.CareerCompassTheme,exports.Colour=ke.Colour,exports.Font=ke.Font,exports.IMDATheme=ke.IMDATheme,exports.LifeSGTheme=ke.LifeSGTheme,exports.MediaQuery=ke.MediaQuery,exports.Motion=ke.Motion,exports.MyLegacyTheme=ke.MyLegacyTheme,exports.OneServiceTheme=ke.OneServiceTheme,exports.PATheme=ke.PATheme,exports.RBSTheme=ke.RBSTheme,exports.Radius=ke.Radius,exports.SGWDigitalLobbyTheme=ke.SGWDigitalLobbyTheme,exports.SGWDigitalLobbyThemeBase=ke.SGWDigitalLobbyThemeBase,exports.SMGSTheme=ke.SMGSTheme,exports.SPFTheme=ke.SPFTheme,exports.Shadow=ke.Shadow,exports.Spacing=ke.Spacing,exports.SupportGoWhereTheme=ke.SupportGoWhereTheme,exports.SupportGoWhereThemeBase=ke.SupportGoWhereThemeBase,exports.ThemeComponent=ke.ThemeComponent,exports.ToteBoardTheme=ke.ToteBoardTheme,exports.TimeRangePicker=Ie.TimeRangePicker,exports.TimeSlotBar=_e.TimeSlotBar,exports.TimeSlotBarWeek=Ce.TimeSlotBarWeek,exports.TimeSlotWeekView=Me.TimeSlotWeekView,exports.Timeline=Ve.Timeline,exports.Timepicker=Pe.Timepicker,exports.TimeTable=we.TimeTable,exports.Toast=De.Toast,exports.Toggle=fe.Toggle,exports.Tooltip=Le.Tooltip,exports.withTooltip=Re.withTooltip,Object.defineProperty(exports,"Typography",{enumerable:!0,get:function(){return Fe.Typography}}),exports.UneditableSection=Ge.UneditableSection,exports.UnitNumberInput=Ne.UnitNumberInput,exports.V2_Color=We.V2_Color,exports.V2_DesignToken=Ae.V2_DesignToken,exports.V2_Layout=Oe.V2_Layout,exports.V2_MediaQuery=He.V2_MediaQuery,exports.V2_MediaWidths=He.V2_MediaWidths,exports.V2_TextStyleHelper=Ee.V2_TextStyleHelper,exports.V2_TextStyle=Ue.V2_TextStyle,Object.defineProperty(exports,"V2_Text",{enumerable:!0,get:function(){return Qe.V2_Text}}),Object.defineProperty(exports,"RedirectScope",{enumerable:!0,get:function(){return Ke.RedirectScope}}),exports.V2_TextList=ze.V2_TextList,exports.V2_BaseTheme=Je.V2_BaseTheme,exports.V2_BookingSGTheme=Je.V2_BookingSGTheme,exports.V2_CCubeTheme=Je.V2_CCubeTheme,exports.V2_MyLegacyTheme=Je.V2_MyLegacyTheme,exports.V2_OneServiceTheme=Je.V2_OneServiceTheme,exports.V2_RBSTheme=Je.V2_RBSTheme,exports.V2_Transition=Xe.V2_Transition,exports.DSThemeProvider=Ye.DSThemeProvider,Object.defineProperty(exports,"V2_ThemeContextKeys",{enumerable:!0,get:function(){return Ze.V2_ThemeContextKeys}}),exports.createThemeWithColourMode=$e.createThemeWithColourMode,exports.getSystemColourMode=$e.getSystemColourMode,exports.useDSTheme=$e.useDSTheme;
+"use strict";var e=require("./accordion/accordion.js"),r=require("./alert/alert.js"),t=require("./animations/loading-dots/loading-dots.js"),i=require("./animations/loading-dots-spinner/loading-dots-spinner.js"),o=require("./animations/loading-spinner/loading-spinner.js"),s=require("./animations/themed-loading-spinner/themed-loading-spinner.js"),n=require("./avatar/avatar.js"),a=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"),c=require("./dashed-border/dashed-border.js"),q=require("./data-table/data-table.js"),j=require("./date-input/date-input.js"),b=require("./date-navigator/date-navigator.js"),h=require("./date-range-input/date-range-input.js"),T=require("./divider/divider.js"),k=require("./drawer/drawer.js"),S=require("./e-signature/e-signature.js"),v=require("./error-display/error-display.js"),I=require("./error-display/helper.js"),y=require("./feedback-rating/feedback-rating.js"),B=require("./file-download/file-download.js"),M=require("./file-upload/file-upload.js"),w=require("./filter/filter.js"),D=require("./footer/footer.js"),P=require("./form/index.js"),f=require("./fullscreen-image-carousel/fullscreen-image-carousel.js"),C=require("./histogram-slider/histogram-slider.js"),F=require("./image-button/image-button.js"),L=require("./input/input.js"),N=require("./input-group/input-group.js"),R=require("./input-multi-select/input-multi-select.js"),E=require("./input-nested-multi-select/input-nested-multi-select.js"),A=require("./input-nested-select/input-nested-select.js"),H=require("./input-range-select/input-range-select.js"),Q=require("./input-range-slider/input-range-slider.js"),U=require("./input-select/input-select.js"),V=require("./input-slider/input-slider.js"),W=require("./input-textarea/textarea.js"),O=require("./language-switcher/language-switcher.js"),G=require("./layout/index.js"),Y=require("./link-list/link-list.js"),_=require("./markup/markup.js"),z=require("./masked-input/masked-input.js"),J=require("./masthead/masthead.js"),K=require("./menu/menu.js"),X=require("./modal/index.js"),Z=require("./modal-v2/modal-v2.js"),$=require("./navbar/navbar.js"),ee=require("./notification-banner/notification-banner.js"),re=require("./notification-banner/notification-banner-hoc.js"),te=require("./otp-input/otp-input.js"),ie=require("./overlay/overlay.js"),oe=require("./pagination/pagination.js"),se=require("./phone-number-input/phone-number-input.js"),ne=require("./pill/pill.js"),ae=require("./popover/popover.js"),pe=require("./popover/popover-inline/popover-inline.js"),ue=require("./popover/popover-trigger.js"),le=require("./predictive-text-input/predictive-text-input.js"),de=require("./progress-indicator/progress-indicator.js"),xe=require("./radio-button/radio-button.js"),me=require("./select-histogram/select-histogram.js"),ge=require("./sidenav/sidenav.js"),ce=require("./singpass-button/singpass-button.js"),qe=require("./smart-app-banner/smart-app-banner.js"),je=require("./tab/tab.js"),be=require("./table/table.js"),he=require("./tag/tag.js"),Te=require("./text-list/index.js"),ke=require("./theme/theme-provider/index.js"),Se=require("./theme/theme-provider/hooks.js"),ve=require("./theme/tokens/border.js"),Ie=require("./theme/tokens/breakpoint.js"),ye=require("./theme/tokens/colour.js"),Be=require("./theme/tokens/component.js"),Me=require("./theme/tokens/font.js"),we=require("./theme/tokens/media-query.js"),De=require("./theme/tokens/motion.js"),Pe=require("./theme/tokens/radius.js"),fe=require("./theme/tokens/shadow.js"),Ce=require("./theme/tokens/spacing.js"),Fe=require("./theme/types.js"),Le=require("./theme/utils/css-variable.js"),Ne=require("./theme/utils/use-apply-styles.js"),Re=require("./theme/utils/use-design-token.js"),Ee=require("./theme/utils/use-media-query.js"),Ae=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"),Ve=require("./timeline/timeline.js"),We=require("./timepicker/timepicker.js"),Oe=require("./timetable/timetable.js"),Ge=require("./toast/toast.js"),Ye=require("./toggle/toggle.js"),_e=require("./typography/index.js"),ze=require("./uneditable-section/index.js"),Je=require("./unit-number/unit-number-input.js");exports.Accordion=e.Accordion,exports.Alert=r.Alert,exports.LoadingDots=t.LoadingDots,exports.LoadingDotsSpinner=i.LoadingDotsSpinner,exports.LoadingSpinner=o.LoadingSpinner,exports.ThemedLoadingSpinner=s.ThemedLoadingSpinner,exports.Avatar=n.Avatar,exports.Badge=a.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=c.DashedBorder,exports.DataTable=q.DataTable,exports.DateInput=j.DateInput,exports.DateNavigator=b.DateNavigator,exports.DateRangeInput=h.DateRangeInput,exports.Divider=T.Divider,exports.Drawer=k.Drawer,exports.ESignature=S.ESignature,exports.ErrorDisplay=v.ErrorDisplay,exports.ErrorDisplayHelper=I.ErrorDisplayHelper,exports.FeedbackRating=y.FeedbackRating,exports.FileDownload=B.FileDownload,exports.FileUpload=M.FileUpload,exports.Filter=w.Filter,exports.Footer=D.Footer,exports.Form=P.Form,exports.Component=f.Component,exports.FullscreenImageCarousel=f.FullscreenImageCarousel,exports.HistogramSlider=C.HistogramSlider,exports.ImageButton=F.ImageButton,exports.Input=L.Input,exports.InputGroup=N.InputGroup,exports.InputMultiSelect=R.InputMultiSelect,exports.InputNestedMultiSelect=E.InputNestedMultiSelect,exports.InputNestedSelect=A.InputNestedSelect,exports.InputRangeSelect=H.InputRangeSelect,exports.InputRangeSlider=Q.InputRangeSlider,exports.InputSelect=U.InputSelect,exports.InputSlider=V.InputSlider,exports.Textarea=W.Textarea,exports.LanguageSwitcher=O.LanguageSwitcher,exports.Layout=G.Layout,exports.LinkList=Y.LinkList,exports.Markup=_.Markup,exports.MaskedInput=z.MaskedInput,exports.Masthead=J.Masthead,exports.Menu=K.Menu,exports.MenuTrigger=K.MenuTrigger,exports.Modal=X.Modal,exports.ModalV2=Z.ModalV2,exports.Navbar=$.Navbar,exports.NBComponent=ee.NBComponent,exports.NotificationBanner=ee.NotificationBanner,exports.withNotificationBanner=re.withNotificationBanner,exports.OtpInput=te.OtpInput,exports.Overlay=ie.Overlay,exports.Pagination=oe.Pagination,exports.PhoneNumberInput=se.PhoneNumberInput,exports.Pill=ne.Pill,exports.Popover=ae.Popover,exports.PopoverInline=pe.PopoverInline,exports.PopoverTrigger=ue.PopoverTrigger,exports.PredictiveTextInput=le.PredictiveTextInput,exports.ProgressIndicator=de.ProgressIndicator,exports.RadioButton=xe.RadioButton,exports.SelectHistogram=me.SelectHistogram,exports.Sidenav=ge.Sidenav,exports.SingpassButton=ce.SingpassButton,exports.SmartAppBanner=qe.SmartAppBanner,exports.Tab=je.Tab,exports.Table=be.Table,exports.Tag=he.Tag,exports.TextList=Te.TextList,exports.ThemeProvider=ke.ThemeProvider,exports.useInheritedThemeScope=Se.useInheritedThemeScope,exports.useTheme=Se.useTheme,exports.Border=ve.Border,exports.BorderStyle=ve.BorderStyle,exports.BorderThickness=ve.BorderThickness,exports.Breakpoint=Ie.Breakpoint,exports.Colour=ye.Colour,exports.PrimitiveColours=ye.PrimitiveColours,exports.SemanticColours=ye.SemanticColours,exports.ComponentToken=Be.ComponentToken,exports.Font=Me.Font,exports.FontSpec=Me.FontSpec,exports.MediaQuery=we.MediaQuery,exports.Motion=De.Motion,exports.Radius=Pe.Radius,exports.Shadow=fe.Shadow,exports.Spacing=Ce.Spacing,exports.THEME_TYPES=Fe.THEME_TYPES,exports.formatUnitValue=Le.formatUnitValue,exports.parsePxOrRemValue=Le.parsePxOrRemValue,exports.useApplyStyle=Ne.useApplyStyle,exports.useDesignToken=Re.useDesignToken,exports.useMaxWidthMediaQuery=Ee.useMaxWidthMediaQuery,exports.useMediaQuery=Ee.useMediaQuery,exports.useMinWidthMediaQuery=Ee.useMinWidthMediaQuery,exports.useResolvedBreakpointToken=Ee.useResolvedBreakpointToken,exports.TimeRangePicker=Ae.TimeRangePicker,exports.TimeSlotBar=He.TimeSlotBar,exports.TimeSlotBarWeek=Qe.TimeSlotBarWeek,exports.TimeSlotWeekView=Ue.TimeSlotWeekView,exports.Timeline=Ve.Timeline,exports.Timepicker=We.Timepicker,exports.TimeTable=Oe.TimeTable,exports.Toast=Ge.Toast,exports.Toggle=Ye.Toggle,exports.Typography=_e.Typography,exports.UneditableSection=ze.UneditableSection,exports.UnitNumberInput=Je.UnitNumberInput;
 //# 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"),t=require("react");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js"),require("../util/simple-id-generator.js");var a=require("../util/string-helper.js");require("@react-aria/live-announcer");var 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(t).default.forwardRef(((s,i)=>{var{value:u,spacing:o,type:d,error:p,disabled:c,readOnly:y,onChange:j,onClear:f,allowClear:h=!1,className:g,styleType:m="bordered"}=s,C=e.__rest(s,["value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType"]);const v=((e,r)=>"tel"===e&&!!r)(d,o),x=t.useRef(null);t.useImperativeHandle(i,(()=>x.current),[]);const b=l.useNextInputState({ref:x,formatter:e=>v?a.StringHelper.transformWithSpaces(e,o):e}),q=e=>{j&&(v?N(e):j(e))},$=()=>{f&&f(),x&&x.current&&x.current.focus()},N=e=>{const r=b();if(!r)return;const{nextValue:t,updateCaretPosition:a}=r,l=t.replace(/\s/g,"");e.target.value=l,null==j||j(e),a()},O=u?(e=>e?v?a.StringHelper.transformWithSpaces(e,o):e:"")(u):u,I=h&&!c&&!y&&!!u,S=()=>r.jsxs(r.Fragment,{children:[r.jsx(n.InputElement,Object.assign({"data-testid":"input",ref:x,"aria-disabled":c,value:O,onChange:q,type:d,readOnly:y||c,$showClear:I,$styleType:m,$visuallyReadOnly:y},C)),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:c,$error:p,$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\";\nimport { StringHelper, useNextInputState } from \"../util\";\nimport {\n    ClearButton,\n    ClearIcon,\n    DefaultWrapper,\n    InputElement,\n    NoBorderWrapper,\n} from \"./input.style\";\nimport { 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":"ueAWA,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\n// @catalog\n/**\n * A single-line text input field.\n *\n * Use `Input` for free-form text entry. It supports controlled and uncontrolled\n * usage.\n * @keywords field, form, input, text field\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,MAkLaA,OAAQC,QAAMC,YA3KT,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 @@
+@layer fds{.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("../theme/index.js"),require("../util/string-helper.js"),require("../shared/dropdown-list/dropdown-label.styles.js");var t=require("../shared/dropdown-list/dropdown-list.js"),s=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var l=require("../util/simple-id-generator.js");require("@react-aria/live-announcer");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list/dropdown-list.styles.js"),require("../shared/dropdown-list/dropdown-search.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"),require("../shared/dropdown-list/nested-dropdown-list.styles.js"),require("../shared/dropdown-list/virtuoso-components.js");var o=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),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":w,"aria-labelledby":f,"aria-describedby":v,"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:O,listExtractor:I,isOptionDisabled:D,enableSearch:R,hideNoResultsDisplay:T,noResultsDescription:E,searchPlaceholder:B,searchFunction:L,onSearch:_,placeholder:C="Select",displayValueExtractor:N,"data-selector-testid":F,options:V,selectedOption:H,onSelectOption:A,optionsLoadState:P,optionTruncationType:k,onRetry:W,onHideOptions:G,onShowOptions:Z,dropdownZIndex:z,dropdownRootNode:J,"aria-label":K}=p.attributes,{position:M}=p,[Q,U]=a.useState(H),[X,Y]=a.useState(!1),[ee,re]=a.useState(!1),ae=l.useId(),ie=`${ae}-listbox`,te=`${ae}-instruction`,se=`${ae}-combobox-label`,le=`${ae}-textbox-label`,de=a.useRef(null),oe=a.useRef(null);a.useEffect((()=>{U(H)}),[H]);const ne=()=>{if(Q)return N?N(Q):O?O(Q):Q.toString()},ue=e=>{e?null==Z||Z():null==G||G()},ce=(e,r)=>{var a;null===(a=oe.current)||void 0===a||a.focus(),U(e),Y(!1),ue(!1),null==A||A(e,r)},pe=()=>{X&&(Y(!1),ue(!1))},he=()=>{Y(!0),ue(!0),re(!0)},be=e=>{Y(!1),ue(!1),"click"!==e&&(re(!1),null==q||q())},xe=()=>{var e;null===(e=oe.current)||void 0===e||e.focus(),Y(!1),ue(!1)},je=()=>r.jsxs("div",{children:[r.jsx(n.StyledExpandableElement,{ref:oe,disabled:j,expanded:X,listboxId:ie,popupRole:"listbox",readOnly:x,"aria-labelledby":i.concatIds(f,se),"aria-describedby":i.concatIds(v,te),"aria-invalid":g,$noBorder:m,$position:M,children:r.jsx(o.LabelContainer,{$disabled:j,children:Q?r.jsx(o.ValueLabel,{children:ne()}):r.jsx(o.PlaceholderLabel,{children:C})})}),r.jsx(i.VisuallyHidden,{id:te,children:"Press space to open options"})]}),ye=()=>r.jsx(t.DropdownList,{listboxId:ie,listItems:V,onSelectItem:ce,onDismiss:pe,valueExtractor:O,listExtractor:I,isOptionDisabled:D,enableSearch:R,hideNoResultsDisplay:T,noResultsDescription:E,searchPlaceholder:B,searchFunction:L,onSearch:_,selectedItems:Q?[Q]:[],itemsLoadState:P,itemTruncationType:k,onRetry:W,matchElementWidth:!0});return r.jsx(s.DropdownListState,{children:r.jsxs(n.FieldWrapper,{$focused:ee,$disabled:j,$readOnly:x,$error:h,$position:M,ref:de,className:y,"data-testid":w,$noBorder:m,tabIndex:-1,onFocus:()=>{ee||X||re(!0)},onBlur:e=>{ee&&!X&&de.current&&!de.current.contains(e.relatedTarget)&&(re(!1),null==q||q())},children:[r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:se,children:K}),r.jsx(n.FieldSelector,{"data-testid":F,children:x?Q?r.jsx(n.SelectorReadOnly,{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":f,"aria-describedby":v,"aria-invalid":g,children:r.jsx(o.ValueLabel,{children:ne()})}):null:r.jsx(d.ElementWithDropdown,{enabled:!x&&!j,isOpen:X,renderElement:je,renderDropdown:ye,onOpen:he,onClose:be,onDismiss:xe,clickToToggle:!0,offset:8,alignment:"right"===M?"right":"left",fitAvailableHeight:!0,customZIndex:z,rootNode:J,positionRef:de})}),r.jsx(n.Divider,{$readOnly:x,$position:M}),r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:le,children:S}),r.jsx(n.FieldInput,Object.assign({ref:c},$,{$position:M,$noBorder:m,readOnly:x,disabled:j,error:h,onChange:e=>{b&&b(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":i.concatIds(f,le),"aria-describedby":v,"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"),i=require("clsx"),a=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_mloii0.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_konwm.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(i);const j=(i,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":O,"aria-label":T}=i,R=e.__rest(i,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:N,listExtractor:k,isOptionDisabled:A,enableSearch:D,hideNoResultsDisplay:E,noResultsDescription:B,searchPlaceholder:C,searchFunction:H,onSearch:L,placeholder:P="Select",displayValueExtractor:G,"data-selector-testid":V,options:M,selectedOption:$,onSelectOption:F,optionsLoadState:W,optionTruncationType:Z,onRetry:z,onHideOptions:J,onShowOptions:K,dropdownZIndex:Q,dropdownRootNode:U,"aria-label":X}=j.attributes,{position:Y="left"}=j,[ee,re]=a.useState($),[ie,ae]=a.useState(!1),[se,te]=a.useState(!1),le=l.useId(),de=`${le}-listbox`,oe=`${le}-instruction`,ne=`${le}-combobox-label`,ue=`${le}-textbox-label`,ce=a.useRef(null),pe=a.useRef(null);a.useEffect((()=>{re($)}),[$]);const he=()=>{if(ee)return G?G(ee):N?N(ee):ee.toString()},be=e=>{e?null==K||K():null==J||J()},xe=(e,r)=>{var i;null===(i=pe.current)||void 0===i||i.focus(),re(e),ae(!1),be(!1),null==F||F(e,r)},je=()=>{ie&&(ae(!1),be(!1))},qe=()=>{ae(!0),be(!0),te(!0)},me=e=>{ae(!1),be(!1),"click"!==e&&(te(!1),null==v||v())},fe=()=>{var e;null===(e=pe.current)||void 0===e||e.focus(),ae(!1),be(!1)},ye=()=>r.jsxs("div",{children:[r.jsx(n.ExpandableElement,{ref:pe,disabled:y,expanded:ie,listboxId:de,popupRole:"listbox",readOnly:f,"aria-labelledby":t.concatIds(I,ne),"aria-describedby":t.concatIds(S,oe),"aria-invalid":O,"data-position":Y,className:x.default(g&&h.expandableElementNoBorder),children:r.jsx(p.LabelContainer,{disabled:y,children:ee?r.jsx(p.ValueLabel,{children:he()}):r.jsx(p.PlaceholderLabel,{children:P})})}),r.jsx(t.VisuallyHidden,{id:oe,children:"Press space to open options"})]}),we=()=>r.jsx(d.DropdownList,{listboxId:de,listItems:M,onSelectItem:xe,onDismiss:je,valueExtractor:N,listExtractor:k,isOptionDisabled:A,enableSearch:D,hideNoResultsDisplay:E,noResultsDescription:B,searchPlaceholder:C,searchFunction:H,onSearch:L,selectedItems:ee?[ee]:[],itemsLoadState:W,itemTruncationType:Z,onRetry:z,matchElementWidth:!0});return r.jsx(o.DropdownListState,{children:r.jsxs(c.InputBox,{focused:se,disabled:y,readOnly:f,error:q,ref:ce,noBorder:g,"data-testid":_,tabIndex:-1,onFocus:()=>{se||ie||te(!0)},onBlur:e=>{se&&!ie&&ce.current&&!ce.current.contains(e.relatedTarget)&&(te(!1),null==v||v())},"data-position":Y,className:x.default(h.fieldWrapper,w),children:[r.jsx(t.VisuallyHidden,{"aria-hidden":!0,id:ne,children:X}),r.jsx("div",{"data-testid":V,className:h.fieldSelector,children:f?ee?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":O,className:h.selectorReadOnly,children:r.jsx(p.ValueLabel,{children:he()})}):null:r.jsx(u.ElementWithDropdown,{enabled:!f&&!y,isOpen:ie,renderElement:ye,renderDropdown:we,onOpen:qe,onClose:me,onDismiss:fe,clickToToggle:!0,offset:8,alignment:"right"===Y?"right":"left",fitAvailableHeight:!0,customZIndex:Q,rootNode:U,positionRef:ce})}),r.jsx("div",{"data-position":Y,className:x.default(h.divider,f&&h.dividerReadOnly)}),r.jsx(t.VisuallyHidden,{"aria-hidden":!0,id:ue,children:T}),r.jsx("div",{"data-position":Y,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,ue),"aria-describedby":S,"aria-invalid":O}))})]})})},q=b(a).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 { OpenChangeReason } from \"@floating-ui/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { useId } from \"../util\";\nimport {\n    Divider,\n    FieldInput,\n    FieldSelector,\n    FieldWrapper,\n    SelectorReadOnly,\n    StyledExpandableElement,\n} from \"./input-group-list-addon.style\";\nimport { 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        isOptionDisabled,\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 = 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 <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                isOptionDisabled={isOptionDisabled}\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","isOptionDisabled","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","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        isOptionDisabled,\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                isOptionDisabled={isOptionDisabled}\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","isOptionDisabled","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 @@
+@layer fds{.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"),a=require("react"),d=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var i=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var t=require("./input-group-list-addon.js"),s=require("./input-group.style.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=l(a).default.forwardRef(((a,l)=>{var{addon:n,error:o,className:u,"aria-label":c,"aria-labelledby":b}=a,p=e.__rest(a,["addon","error","className","aria-label","aria-labelledby"]);const y=i.useId(),j=`${y}-addon`,$=`${y}-ariaLabelId`,h=()=>r.jsx(s.NoAddonWrapper,{$disabled:p.disabled,$error:o,$readOnly:p.readOnly,"data-testid":p["data-testid"],className:u,$noBorder:p.noBorder,children:r.jsx(s.MainInput,Object.assign({ref:l},p,{"data-testid":"input",styleType:"no-border"}))});if(!n)return h();{const{type:e="label",position:a="left"}=n,{allowClear:i}=p;switch(e){case"list":{const e=n.attributes;return e.options&&e.options.length>0?r.jsx(t.InputGroupListAddon,Object.assign({ref:l,addon:n,error:o,className:u,noBorder:p.noBorder,"aria-label":c,"aria-labelledby":b},p)):h()}case"custom":{const e=n.attributes;return e.children?r.jsxs(s.AddonWrapper,{$error:o,$disabled:p.disabled,$readOnly:p.readOnly,"data-testid":p["data-testid"],$position:a,className:u,$noBorder:p.noBorder,children:[r.jsx(s.LabelAddonContainer,{"data-testid":"addon",id:j,$disabled:p.disabled,$readOnly:p.readOnly,$position:a,children:e.children}),r.jsx(d.VisuallyHidden,{"aria-hidden":!0,id:$,children:c}),r.jsx(s.MainInput,Object.assign({ref:l},p,{"aria-labelledby":d.concatIds($,b,j),allowClear:i&&"right"!==a,error:o,"data-testid":"input",styleType:"no-border"}))]}):h()}default:{const e=n.attributes;return e.value?r.jsxs(s.AddonWrapper,{$disabled:p.disabled,$error:o,$readOnly:p.readOnly,"data-testid":p["data-testid"],$position:a,className:u,$noBorder:p.noBorder,children:[r.jsx(s.LabelAddonContainer,{"data-testid":"addon",id:j,$disabled:p.disabled,$readOnly:p.readOnly,$position:a,children:e.value}),r.jsx(d.VisuallyHidden,{"aria-hidden":!0,id:$,children:c}),r.jsx(s.MainInput,Object.assign({ref:l},p,{"aria-labelledby":d.concatIds($,b,j),allowClear:i&&"right"!==a,error:o,"data-testid":"input",styleType:"no-border"}))]}):h()}}}}));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\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { InputGroupListAddon } from \"./input-group-list-addon\";\nimport {\n    AddonWrapper,\n    LabelAddonContainer,\n    MainInput,\n    NoAddonWrapper,\n} from \"./input-group.style\";\nimport { CustomAddon, InputGroupProps, LabelAddon, ListAddon } from \"./types\";\n\nconst Component = <T, V>(\n    {\n        addon,\n        error,\n        className,\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        <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                            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 (\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                                id={addonId}\n                                $disabled={otherProps.disabled}\n                                $readOnly={otherProps.readOnly}\n                                $position={position}\n                            >\n                                {customAddon.children}\n                            </LabelAddonContainer>\n                            <VisuallyHidden aria-hidden id={ariaLabelId}>\n                                {ariaLabel}\n                            </VisuallyHidden>\n                            <MainInput\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                        </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                                id={addonId}\n                                $disabled={otherProps.disabled}\n                                $readOnly={otherProps.readOnly}\n                                $position={position}\n                            >\n                                {labelAddon.value}\n                            </LabelAddonContainer>\n                            <VisuallyHidden aria-hidden id={ariaLabelId}>\n                                {ariaLabel}\n                            </VisuallyHidden>\n                            <MainInput\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                        </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","ariaLabel","ariaLabelledBy","otherProps","__rest","internalId","useId","addonId","ariaLabelId","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","LabelAddonContainer","id","VisuallyHidden","concatIds","labelAddon","value"],"mappings":"uhBAYA,MA8JaA,OAAaC,QAAMC,YA9Jd,CACdC,EAQAC,KARA,IAAAC,MACIA,EAAKC,MACLA,EAAKC,UACLA,EACA,aAAcC,EACd,kBAAmBC,GAAcN,EAC9BO,EAAUC,EAAAA,OAAAR,EANjB,8DAaA,MAAMS,EAAaC,EAAAA,QACbC,EAAU,GAAGF,UACbG,EAAc,GAAGH,gBAKjBI,EAAiB,IACnBC,MAACC,EAAAA,eAAc,CAAAC,UACAT,EAAWU,SAAQC,OACtBf,YACGI,EAAWY,SAAQ,cACjBZ,EAAW,eACxBH,UAAWA,YACAG,EAAWa,SAAQC,SAE9BP,EAAAA,IAACQ,EAAAA,UAASC,OAAAC,OAAA,CACNvB,IAAKA,GACDM,EAAU,CAAA,cACF,QACZkB,UAAU,iBAKtB,IAAIvB,EAmHA,OAAOW,IAnHA,CACP,MAAMa,KAAEA,EAAO,QAAOC,SAAEA,EAAW,QAAWzB,GACxC0B,WAAEA,GAAerB,EAEvB,OAAQmB,GACJ,IAAK,OAAQ,CACT,MAAMG,EAAY3B,EAAM4B,WACxB,OAAID,EAAUE,SAAWF,EAAUE,QAAQC,OAAS,EAE5ClB,EAAAA,IAACmB,sBAAmBV,OAAAC,OAAA,CAChBvB,IAAKA,EACLC,MAAOA,EACPC,MAAOA,EACPC,UAAWA,EACXgB,SAAUb,EAAWa,SAAQ,aACjBf,oBACKC,GACbC,IAILM,GAEf,CAEA,IAAK,SAAU,CACX,MAAMqB,EAAchC,EAAM4B,WAC1B,OAAII,EAAYb,SAERc,EAAAA,KAACC,EAAAA,aAAY,CAAAlB,OACDf,EAAKa,UACFT,EAAWU,SAAQoB,UACnB9B,EAAWY,SAAQ,cACjBZ,EAAW,eAAc+B,UAC3BX,EACXvB,UAAWA,YACAG,EAAWa,SAAQC,SAAA,CAE9BP,EAAAA,IAACyB,EAAAA,oBAAmB,CAAA,cACJ,QACZC,GAAI7B,YACOJ,EAAWU,SAAQoB,UACnB9B,EAAWY,SAAQmB,UACnBX,EAAQN,SAElBa,EAAYb,WAEjBP,MAAC2B,EAAAA,eAAc,CAAA,eAAA,EAAaD,GAAI5B,EAAWS,SACtChB,IAELS,EAAAA,IAACQ,EAAAA,UAASC,OAAAC,OAAA,CACNvB,IAAKA,GACDM,EAAU,CAAA,kBACGmC,EAAAA,UACb9B,EACAN,EACAK,GAEJiB,WAAYA,GAA2B,UAAbD,EAC1BxB,MAAOA,EAAK,cACA,QACZsB,UAAU,kBAKfZ,GAEf,CACA,QAAS,CACL,MAAM8B,EAAazC,EAAM4B,WACzB,OAAIa,EAAWC,MAEPT,EAAAA,KAACC,EAAAA,aAAY,CAAApB,UACET,EAAWU,SAAQC,OACtBf,EAAKkC,UACF9B,EAAWY,SAAQ,cACjBZ,EAAW,eAAc+B,UAC3BX,EACXvB,UAAWA,YACAG,EAAWa,SAAQC,SAAA,CAE9BP,EAAAA,IAACyB,EAAAA,oBAAmB,CAAA,cACJ,QACZC,GAAI7B,YACOJ,EAAWU,SAAQoB,UACnB9B,EAAWY,SAAQmB,UACnBX,EAAQN,SAElBsB,EAAWC,QAEhB9B,MAAC2B,EAAAA,eAAc,CAAA,eAAA,EAAaD,GAAI5B,EAAWS,SACtChB,IAELS,EAAAA,IAACQ,EAAAA,UAASC,OAAAC,OAAA,CACNvB,IAAKA,GACDM,EAAU,CAAA,kBACGmC,EAAAA,UACb9B,EACAN,EACAK,GAEJiB,WAAYA,GAA2B,UAAbD,EAC1BxB,MAAOA,EAAK,cACA,QACZsB,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\n// @catalog\n/**\n * A single-line text input optionally paired with a static label, a custom element, or a\n * dropdown list selector.\n *\n * Use `InputGroup` when the input needs contextual decoration such as a unit label,\n * a country-code dropdown, or a fully custom slot.\n * @keywords field, form, input, prefix, suffix\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,MA2JaA,OAAaC,QAAMC,YA3Jd,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_bqye6f.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_bqye6f.css

@@ -0,0 +1,3 @@
+@layer fds{.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-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);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("../theme/index.js"),require("../util/string-helper.js"),require("../shared/dropdown-list/dropdown-label.styles.js");var s=require("../shared/dropdown-list/dropdown-list.js"),l=require("../shared/dropdown-list/dropdown-list-state.js"),a=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var i=require("../util/simple-id-generator.js");require("@react-aria/live-announcer");var n=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list/dropdown-list.styles.js"),require("../shared/dropdown-list/dropdown-search.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"),require("../shared/dropdown-list/nested-dropdown-list.styles.js"),require("../shared/dropdown-list/virtuoso-components.js");var o=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),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":y,enableSearch:S=!1,searchFunction:g,searchPlaceholder:v,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:B,onBlur:_,variant:k="default",readOnly:F,alignment:P,dropdownZIndex:W,maxSelectable:H,dropdownRootNode:Z,dropdownWidth:G})=>{const{allSelectedLabel:M,multiSelectedLabel:V}=N||{},[z,J]=t.useState(u||[]),[K,Q]=t.useState(!1),[U,X]=t.useState(!1),Y=i.useId(),ee=t.useRef(null),re=t.useRef(null);t.useEffect((()=>{J(u||[])}),[u]);const te=()=>{z&&z.length>0||H?(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),ne(!1))},ae=()=>{U||K||X(!0)},ie=e=>{U&&!K&&ee.current&&!ee.current.contains(e.relatedTarget)&&(X(!1),null==_||_())},ne=e=>{!e&&D&&D(),e&&L&&L()},oe=e=>{T&&T(e)};return e.jsx(l.DropdownListState,{children:e.jsx(n.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:ie,$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":y,children:e.jsx(o.LabelContainer,{$disabled:h,children:z&&0!==z.length?e.jsx(o.ValueLabel,{$variant:k,children:p&&z.length===p.length?M||"All selected":V||`${z.length} selected`}):e.jsx(o.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:S,searchFunction:g,searchPlaceholder:v,multiSelect:!0,maxSelectable:H,selectedItems:z,onSelectAll:te,onRetry:E,itemsLoadState:R,itemTruncationType:O,renderListItem:$,hideNoResultsDisplay:A,noResultsDescription:C,customLabels:N,renderCustomCallToAction:B,variant:k,width:G,matchElementWidth:!0}),onOpen:()=>{Q(!0),ne(!0),X(!0)},onClose:e=>{Q(!1),ne(!1),"click"!==e&&(X(!1),null==_||_())},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),Q(!1),ne(!1)},clickToToggle:!0,offset:8,alignment:P,fitAvailableHeight:!0,customZIndex:W,rootNode:Z})})};
+"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_mloii0.css");var i=require("../shared/dropdown-list/dropdown-list.js"),l=require("../shared/dropdown-list/dropdown-list-state.js"),a=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_konwm.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":g,enableSearch:f=!1,searchFunction:y,searchPlaceholder:v,valueExtractor:_,listExtractor:S,onSelectOptions:T,onShowOptions:I,onHideOptions:A,onRetry:L,optionsLoadState:k="success",optionTruncationType:C="end",renderListItem:D,hideNoResultsDisplay:E,noResultsDescription:R,customLabels:O,renderCustomCallToAction:P,onBlur:H,variant:N="default",readOnly:B,alignment:G,dropdownZIndex:M,maxSelectable:F,dropdownRootNode:W,dropdownWidth:Z})=>{const{allSelectedLabel:V,multiSelectedLabel:$}=O||{},[z,J]=t.useState(u||[]),[K,Q]=t.useState(!1),[U,X]=t.useState(!1),Y=s.useId(),ee=t.useRef(null),re=t.useRef(null);t.useEffect((()=>{J(u||[])}),[u]);const te=()=>{z&&z.length>0||F?(J([]),oe([])):(J(p),oe(p))},se=(e,t)=>{const s=[...z],i=r.default(z,(e=>(_?_(e):e)===t));i>-1?s.splice(i,1):s.push(e),J(s),oe(s)},ie=()=>{K&&(Q(!1),ne(!1))},le=()=>{U||K||X(!0)},ae=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(l.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:le,onBlur:ae,focused:U,disabled:h,readOnly:B,error:m,children:e.jsx(a.ExpandableElement,{ref:re,disabled:h,expanded:K,listboxId:Y,popupRole:"listbox",readOnly:B,variant:N,"aria-labelledby":b,"aria-describedby":w,"aria-invalid":g,children:e.jsx(d.LabelContainer,{disabled:h,children:z&&0!==z.length?e.jsx(d.ValueLabel,{variant:N,truncateType:C,children:p&&z.length===p.length?V||"All selected":$||`${z.length} selected`}):e.jsx(d.PlaceholderLabel,{variant:N,truncateType:C,children:c})})})}),renderDropdown:()=>e.jsx(i.DropdownList,{listboxId:Y,listItems:p,onSelectItem:se,onDismiss:ie,valueExtractor:_,listExtractor:S,enableSearch:f,searchFunction:y,searchPlaceholder:v,multiSelect:!0,maxSelectable:F,selectedItems:z,onSelectAll:te,onRetry:L,itemsLoadState:k,itemTruncationType:C,renderListItem:D,hideNoResultsDisplay:E,noResultsDescription:R,customLabels:O,renderCustomCallToAction:P,variant:N,width:Z,matchElementWidth:!0}),onOpen:()=>{Q(!0),ne(!0),X(!0)},onClose:e=>{Q(!1),ne(!1),"click"!==e&&(X(!1),null==H||H())},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),Q(!1),ne(!1)},clickToToggle:!0,offset:8,alignment:G,fitAvailableHeight:!0,customZIndex:M,rootNode:W})})};
 //# sourceMappingURL=input-multi-select.js.map

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 { OpenChangeReason } from \"@floating-ui/react\";\nimport findIndex from \"lodash/findIndex\";\nimport React, { useEffect, useRef, useState } from \"react\";\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.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { 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                    $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","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","$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":"+hDAkBgC,EAC5BA,kBACAC,cAAc,SACdC,UACAC,WACAC,QACAC,YACA,cAAeC,EACfC,KACA,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAChBC,gBAAe,EACfC,iBACAC,oBACAC,iBACAC,gBACAC,kBACAC,gBACAC,gBACAC,UACAC,mBAAmB,UACnBC,uBAAuB,MACvBC,iBACAC,uBACAC,uBACAC,eACAC,2BACAC,SACAC,UAAU,UACVC,WACAC,YACAC,iBACAC,gBACAC,mBACAC,oBAKA,MAAMC,iBAAEA,EAAgBC,mBAAEA,GAAuBX,GAAgB,CAAA,GAC1DY,EAAUC,GAAeC,EAAAA,SAAcvC,GAAmB,KAC1DwC,EAAaC,GAAkBF,EAAAA,UAAkB,IACjDG,EAASC,GAAcJ,EAAAA,UAAkB,GAC1CK,EAAaC,EAAAA,QAEbC,GAAUC,EAAAA,OAAuB,MACjCC,GAAcD,EAAAA,OAA0B,MAK9CE,EAAAA,WAAU,KACNX,EAAYtC,GAAmB,GAAG,GACnC,CAACA,IAKJ,MAAMkD,GAAuB,KACpBb,GAAYA,EAASc,OAAS,GAAMnB,GACrCM,EAAY,IACZc,GAAuB,MAEvBd,EAAYpC,GACZkD,GAAuBlD,GAC3B,EAGEmD,GAAsB,CAACC,EAASC,KAClC,MAAMC,EAAe,IAAInB,GAGnBoB,EAAYC,EAAAA,QAAUrB,GAAWiB,IACZxC,EAAiBA,EAAewC,GAAQA,KACrCC,IAG1BE,GAAY,EAEZD,EAAaG,OAAOF,EAAW,GAG/BD,EAAaI,KAAKN,GAGtBhB,EAAYkB,GACZJ,GAAuBI,EAAa,EAGlCK,GAAoB,KAClBrB,IACAC,GAAe,GACfqB,IAA6B,GACjC,EAGEC,GAAkB,KACfrB,GAAYF,GACbG,GAAW,EACf,EAGEqB,GAAkBC,IAEhBvB,IACCF,GACDM,GAAQoB,UACPpB,GAAQoB,QAAQC,SAASF,EAAEG,iBAE5BzB,GAAW,GACXhB,SAAAA,IACJ,EAqCEmC,GAAgCO,KAC7BA,GAAQnD,GACTA,IAGAmD,GAAQpD,GACRA,GACJ,EAGEmC,GAA0BlD,IACxBc,GACAA,EAAgBd,EACpB,EA2FJ,OACIoE,EAAAA,IAACC,EAAAA,kBAAiB,CAAAC,SACdF,EAAAA,IAACG,EAAAA,oBAAmB,CAChBC,SAAU7C,IAAa1B,EACvBwE,OAAQnC,EACRoC,cArEU,IAEdN,MAACO,EAAAA,SAAQ,CACLxE,UAAWA,EAAS,cACPC,EACbC,GAAIA,EACJuE,IAAKhC,GACLiC,UAAU,EACVC,QAASjB,GACTpC,OAAQqC,GAAciB,SACZvC,EAAOwC,UACN/E,YACA0B,EAAQsD,OACX/E,EAAKoE,SAEbF,MAACc,EAAAA,kBAAiB,CACdN,IAAK9B,GACL7C,SAAUA,EACVkF,SAAU7C,EACV8C,UAAW1C,EACX2C,UAAU,UACV1D,SAAUA,EACVD,QAASA,oBACQpB,EAAc,mBACbC,EAAe,eACnBC,EAAW8D,SA5BrCF,EAAAA,IAACkB,iBAAc,CAAAN,UAAY/E,EAAQqE,SAjB9BnC,GAAgC,IAApBA,EAASc,OAWlBmB,EAAAA,IAACmB,EAAAA,WAAU,CAAAC,SAAW9D,WAtC1B1B,GAAWmC,EAASc,SAAWjD,EAAQiD,OAChChB,GAAoB,eAGxBC,GAAsB,GAAGC,EAASc,oBAyBjCmB,EAAAA,IAACqB,mBAAgB,CAAAC,cACEvE,EAAoBqE,SACzB9D,EAAO4C,SAEhBvE,UAoFL4F,eArCW,IAEfvB,MAACwB,EAAAA,aAAY,CACTR,UAAW1C,EACXmD,UAAW7F,EACX8F,aAAc3C,GACd4C,UAAWpC,GACX/C,eAAgBA,EAChBC,cAAeA,EACfJ,aAAcA,EACdC,eAAgBA,EAChBC,kBAAmBA,EACnBqF,eACAlE,cAAeA,EACfmE,cAAe9D,EACf+D,YAAalD,GACb/B,QAASA,EACTkF,eAAgBjF,EAChBkF,mBAAoBjF,EACpBC,eAAgBA,EAChBC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,aAAcA,EACdC,yBAA0BA,EAC1BE,QAASA,EACT2E,MAAOrE,EACPsE,mBAAiB,IAYjBC,OAjJO,KACfhE,GAAe,GACfqB,IAA6B,GAC7BnB,GAAW,EAAK,EA+IR+D,QA5ISC,IACjBlE,GAAe,GACfqB,IAA6B,GAGd,UAAX6C,IACAhE,GAAW,GACXhB,SAAAA,IACJ,EAqIQsE,UAlIU,WACC,QAAnBW,EAAA5D,GAAYkB,eAAO,IAAA0C,GAAAA,EAAEC,QACrBpE,GAAe,GACfqB,IAA6B,EAAM,EAgI3BgD,eAAa,EACbC,OAAQ,EACRjF,UAAWA,EACXkF,oBAAkB,EAClBC,aAAclF,EACdmF,SAAUjF,KAEE"}
+{"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\n// @catalog\n/**\n * A dropdown field that lets users select multiple options from a list.\n *\n * Use `InputMultiSelect` when users need to pick one or more items from a\n * predefined list.\n * @keywords combobox, dropdown, field, form, input, multi-value, multiple, select\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\";\nimport { 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":"4DAGA,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"}