@lifesg/react-design-system 4.0.0-alpha.4 → 4.0.0-alpha.6

package/form/index.d.ts

@@ -1,27 +1,84 @@
 export * from "./types";
+/**
+ * A collection of form field components that each combine a label, input
+ * control, and inline error message with consistent ARIA wiring.
+ *
+ * Use `Form.*` sub-components to build accessible forms. Use `Form.CustomField` to wrap any
+ * bespoke input element in the same layout.
+ *
+ * Sub-components:
+ * - `Form.CustomField` — layout shell for wrapping custom input elements.
+ * - `Form.DateInput` — single date picker.
+ * - `Form.DateRangeInput` — date range picker.
+ * - `Form.ESignature` — e-signature capture field.
+ * - `Form.HistogramSlider` — range slider with histogram overlay.
+ * - `Form.Input` — single-line text input field.
+ * - `Form.InputGroup` — grouped inputs with shared label and error state.
+ * - `Form.Label` — standalone label for use outside a `Form.*` field.
+ * - `Form.MaskedInput` — text input with a character-level input mask.
+ * - `Form.MultiSelect` — multi-value dropdown select.
+ * - `Form.NestedMultiSelect` — hierarchical multi-value select.
+ * - `Form.NestedSelect` — hierarchical single-value select.
+ * - `Form.OtpVerification` — OTP send-and-verify flow.
+ * - `Form.PhoneNumberInput` — phone number input with country code selection.
+ * - `Form.PredictiveTextInput` — text input with predictive suggestions.
+ * - `Form.RangeSelect` — dual-value range dropdown select.
+ * - `Form.RangeSlider` — dual-handle range slider.
+ * - `Form.Select` — single-value dropdown select.
+ * - `Form.SelectHistogram` — select control with histogram.
+ * - `Form.Slider` — single-value range slider.
+ * - `Form.Textarea` — multi-line text area.
+ * - `Form.Timepicker` — time picker.
+ * - `Form.TimeRangePicker` — time range picker.
+ * - `Form.UnitNumberInput` — structured unit number input.
+ */
 export declare const Form: {
+    /** Layout shell that wraps any custom input element with label, subtitle, and error message. */
+    CustomField: ({ id, "data-error-testid": errorTestId, "data-testid": testId, children, ...otherProps }: import("./types").FormCustomFieldProps) => JSX.Element;
+    /** Single date picker with form layout. */
     DateInput: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormDateInputProps) => JSX.Element;
+    /** Date range picker with form layout. */
     DateRangeInput: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormDateRangeInputProps) => JSX.Element;
+    /** E-signature capture field with form layout. */
     ESignature: (props: import("./types").FormESignatureProps) => import("react/jsx-runtime").JSX.Element;
+    /** Range slider with histogram overlay and form layout. */
     HistogramSlider: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormHistogramSliderProps) => JSX.Element;
+    /** Single-line text input field with form layout. */
     Input: (props: import("./types").FormInputProps & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;
+    /** Grouped inputs with shared label, error state, and form layout. */
     InputGroup: <T, V>(props: import("./types").FormInputGroupProps<T, V> & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;
-    MaskedInput: (props: import("./types").FormMaskedInputProps & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;
+    /** Standalone label element for use outside a `Form.*` field with optional subtitle and addon icon. */
     Label: ({ id, children, addon, subtitle, "data-testid": testId, className, style, ...otherProps }: import("./types").FormLabelProps) => JSX.Element;
+    /** Text input with a character-level input mask and form layout. */
+    MaskedInput: (props: import("./types").FormMaskedInputProps & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;
+    /** Multi-value dropdown select with form layout. */
     MultiSelect: <T, V>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, enableSearch, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, variant, ...otherProps }: import("./types").FormMultiSelectProps<T, V>) => JSX.Element;
-    NestedSelect: <V1, V2, V3>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormNestedSelectProps<V1, V2, V3>) => JSX.Element;
+    /** Hierarchical multi-value select with form layout. */
     NestedMultiSelect: <V1, V2, V3>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormNestedMultiSelectProps<V1, V2, V3>) => JSX.Element;
+    /** Hierarchical single-value select with form layout. */
+    NestedSelect: <V1, V2, V3>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormNestedSelectProps<V1, V2, V3>) => JSX.Element;
+    /** OTP send-and-verify flow with form layout. */
+    OtpVerification: ({ label, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("../otp-verification").FormOtpVerificationProps) => JSX.Element;
+    /** Phone number input with country code selection and form layout. */
+    PhoneNumberInput: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormPhoneNumberInputProps) => JSX.Element;
+    /** Text input with predictive suggestions and form layout. */
+    PredictiveTextInput: <T, V>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormPredictiveTextInputProps<T, V>) => JSX.Element;
+    /** Dual-value range dropdown select with form layout. */
+    RangeSelect: <T, V>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, enableSearch, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormInputRangeSelectProps<T, V>) => JSX.Element;
+    /** Dual-handle range slider with form layout. */
+    RangeSlider: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormRangeSliderProps) => JSX.Element;
+    /** Single-value dropdown select with form layout. */
     Select: <T, V>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, enableSearch, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, variant, ...otherProps }: import("./types").FormInputSelectProps<T, V>) => JSX.Element;
+    /** Select control with histogram and form layout. */
     SelectHistogram: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, histogramSlider, ...otherProps }: import("./types").FormSelectHistogramProps) => JSX.Element;
+    /** Single-value range slider with form layout. */
     Slider: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormSliderProps) => JSX.Element;
-    RangeSlider: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormRangeSliderProps) => JSX.Element;
-    RangeSelect: <T, V>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, enableSearch, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormInputRangeSelectProps<T, V>) => JSX.Element;
+    /** Multi-line text area with form layout. */
     Textarea: (props: import("./types").FormTextareaProps & import("react").RefAttributes<HTMLTextAreaElement>) => React.ReactElement | null;
+    /** Time picker with form layout. */
     Timepicker: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormTimepickerProps) => JSX.Element;
+    /** Time range picker with form layout. */
     TimeRangePicker: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormTimeRangePickerProps) => JSX.Element;
-    CustomField: ({ id, "data-error-testid": errorTestId, "data-testid": testId, children, ...otherProps }: import("./types").FormCustomFieldProps) => JSX.Element;
+    /** Structured unit number input with form layout. */
     UnitNumberInput: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormUnitNumberInputProps) => JSX.Element;
-    PhoneNumberInput: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormPhoneNumberInputProps) => JSX.Element;
-    PredictiveTextInput: <T, V>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormPredictiveTextInputProps<T, V>) => JSX.Element;
-    OtpVerification: ({ label, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("../otp-verification").FormOtpVerificationProps) => JSX.Element;
 };

package/form/index.js

@@ -1,2 +1,2 @@
-import{FormCustomField as r}from"./form-custom-field.js";import{FormDateInput as t}from"./form-date-input.js";import{FormDateRangeInput as m}from"./form-date-range-input.js";import{FormESignature as o}from"./form-e-signature.js";import{FormHistogramSlider as e}from"./form-histogram.js";import{FormInput as i}from"./form-input.js";import{FormInputGroup as f}from"./form-input-group.js";import{FormLabel as p}from"./form-label.js";import{FormMaskedInput as s}from"./form-masked-input.js";import{FormMultiSelect as n}from"./form-multi-select.js";import{FormNestedMultiSelect as u}from"./form-nested-multi-select.js";import{FormNestedSelect as a}from"./form-nested-select.js";import{FormOtpVerification as l}from"./form-otp-verification.js";import{FormPhoneNumberInput as j}from"./form-phone-number-input.js";import{FormPredictiveTextInput as c}from"./form-predictive-text-input.js";import{FormRangeSelect as d}from"./form-range-select.js";import{FormRangeSlider as g}from"./form-range-slider.js";import{FormSelect as S}from"./form-select.js";import{FormSelectHistogram as I}from"./form-select-histogram.js";import{FormSlider as b}from"./form-slider.js";import{FormTextarea as k}from"./form-textarea.js";import{FormTimeRangePicker as x}from"./form-time-range-picker.js";import{FormTimepicker as h}from"./form-timepicker.js";import{FormUnitNumberInput as N}from"./form-unit-number-input.js";const R={DateInput:t,DateRangeInput:m,ESignature:o,HistogramSlider:e,Input:i,InputGroup:f,MaskedInput:s,Label:p,MultiSelect:n,NestedSelect:a,NestedMultiSelect:u,Select:S,SelectHistogram:I,Slider:b,RangeSlider:g,RangeSelect:d,Textarea:k,Timepicker:h,TimeRangePicker:x,CustomField:r,UnitNumberInput:N,PhoneNumberInput:j,PredictiveTextInput:c,OtpVerification:l};export{R as Form};
+import{FormCustomField as r}from"./form-custom-field.js";import{FormDateInput as t}from"./form-date-input.js";import{FormDateRangeInput as m}from"./form-date-range-input.js";import{FormESignature as o}from"./form-e-signature.js";import{FormHistogramSlider as e}from"./form-histogram.js";import{FormInput as i}from"./form-input.js";import{FormInputGroup as f}from"./form-input-group.js";import{FormLabel as p}from"./form-label.js";import{FormMaskedInput as s}from"./form-masked-input.js";import{FormMultiSelect as n}from"./form-multi-select.js";import{FormNestedMultiSelect as u}from"./form-nested-multi-select.js";import{FormNestedSelect as a}from"./form-nested-select.js";import{FormOtpVerification as l}from"./form-otp-verification.js";import{FormPhoneNumberInput as j}from"./form-phone-number-input.js";import{FormPredictiveTextInput as c}from"./form-predictive-text-input.js";import{FormRangeSelect as d}from"./form-range-select.js";import{FormRangeSlider as g}from"./form-range-slider.js";import{FormSelect as S}from"./form-select.js";import{FormSelectHistogram as I}from"./form-select-histogram.js";import{FormSlider as b}from"./form-slider.js";import{FormTextarea as k}from"./form-textarea.js";import{FormTimeRangePicker as x}from"./form-time-range-picker.js";import{FormTimepicker as h}from"./form-timepicker.js";import{FormUnitNumberInput as N}from"./form-unit-number-input.js";const R={CustomField:r,DateInput:t,DateRangeInput:m,ESignature:o,HistogramSlider:e,Input:i,InputGroup:f,Label:p,MaskedInput:s,MultiSelect:n,NestedMultiSelect:u,NestedSelect:a,OtpVerification:l,PhoneNumberInput:j,PredictiveTextInput:c,RangeSelect:d,RangeSlider:g,Select:S,SelectHistogram:I,Slider:b,Textarea:k,Timepicker:h,TimeRangePicker:x,UnitNumberInput:N};export{R as Form};
 //# sourceMappingURL=index.js.map

package/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/form/index.ts"],"sourcesContent":["import { FormCustomField } from \"./form-custom-field\";\nimport { FormDateInput } from \"./form-date-input\";\nimport { FormDateRangeInput } from \"./form-date-range-input\";\nimport { FormESignature } from \"./form-e-signature\";\nimport { FormHistogramSlider } from \"./form-histogram\";\nimport { FormInput } from \"./form-input\";\nimport { FormInputGroup } from \"./form-input-group\";\nimport { FormLabel } from \"./form-label\";\nimport { FormMaskedInput } from \"./form-masked-input\";\nimport { FormMultiSelect } from \"./form-multi-select\";\nimport { FormNestedMultiSelect } from \"./form-nested-multi-select\";\nimport { FormNestedSelect } from \"./form-nested-select\";\nimport { FormOtpVerification } from \"./form-otp-verification\";\nimport { FormPhoneNumberInput } from \"./form-phone-number-input\";\nimport { FormPredictiveTextInput } from \"./form-predictive-text-input\";\nimport { FormRangeSelect } from \"./form-range-select\";\nimport { FormRangeSlider } from \"./form-range-slider\";\nimport { FormSelect } from \"./form-select\";\nimport { FormSelectHistogram } from \"./form-select-histogram\";\nimport { FormSlider } from \"./form-slider\";\nimport { FormTextarea } from \"./form-textarea\";\nimport { FormTimeRangePicker } from \"./form-time-range-picker\";\nimport { FormTimepicker } from \"./form-timepicker\";\nimport { FormUnitNumberInput } from \"./form-unit-number-input\";\n\nexport * from \"./types\";\n\nexport const Form = {\n    DateInput: FormDateInput,\n    DateRangeInput: FormDateRangeInput,\n    ESignature: FormESignature,\n    HistogramSlider: FormHistogramSlider,\n    Input: FormInput,\n    InputGroup: FormInputGroup,\n    MaskedInput: FormMaskedInput,\n    Label: FormLabel,\n    MultiSelect: FormMultiSelect,\n    NestedSelect: FormNestedSelect,\n    NestedMultiSelect: FormNestedMultiSelect,\n    Select: FormSelect,\n    SelectHistogram: FormSelectHistogram,\n    Slider: FormSlider,\n    RangeSlider: FormRangeSlider,\n    RangeSelect: FormRangeSelect,\n    Textarea: FormTextarea,\n    Timepicker: FormTimepicker,\n    TimeRangePicker: FormTimeRangePicker,\n    CustomField: FormCustomField,\n    UnitNumberInput: FormUnitNumberInput,\n    PhoneNumberInput: FormPhoneNumberInput,\n    PredictiveTextInput: FormPredictiveTextInput,\n    OtpVerification: FormOtpVerification,\n};\n"],"names":["Form","DateInput","FormDateInput","DateRangeInput","FormDateRangeInput","ESignature","FormESignature","HistogramSlider","FormHistogramSlider","Input","FormInput","InputGroup","FormInputGroup","MaskedInput","FormMaskedInput","Label","FormLabel","MultiSelect","FormMultiSelect","NestedSelect","FormNestedSelect","NestedMultiSelect","FormNestedMultiSelect","Select","FormSelect","SelectHistogram","FormSelectHistogram","Slider","FormSlider","RangeSlider","FormRangeSlider","RangeSelect","FormRangeSelect","Textarea","FormTextarea","Timepicker","FormTimepicker","TimeRangePicker","FormTimeRangePicker","CustomField","FormCustomField","UnitNumberInput","FormUnitNumberInput","PhoneNumberInput","FormPhoneNumberInput","PredictiveTextInput","FormPredictiveTextInput","OtpVerification","FormOtpVerification"],"mappings":"22CA2BO,MAAMA,EAAO,CAChBC,UAAWC,EACXC,eAAgBC,EAChBC,WAAYC,EACZC,gBAAiBC,EACjBC,MAAOC,EACPC,WAAYC,EACZC,YAAaC,EACbC,MAAOC,EACPC,YAAaC,EACbC,aAAcC,EACdC,kBAAmBC,EACnBC,OAAQC,EACRC,gBAAiBC,EACjBC,OAAQC,EACRC,YAAaC,EACbC,YAAaC,EACbC,SAAUC,EACVC,WAAYC,EACZC,gBAAiBC,EACjBC,YAAaC,EACbC,gBAAiBC,EACjBC,iBAAkBC,EAClBC,oBAAqBC,EACrBC,gBAAiBC"}
+{"version":3,"file":"index.js","sources":["../../src/form/index.ts"],"sourcesContent":["import { FormCustomField } from \"./form-custom-field\";\nimport { FormDateInput } from \"./form-date-input\";\nimport { FormDateRangeInput } from \"./form-date-range-input\";\nimport { FormESignature } from \"./form-e-signature\";\nimport { FormHistogramSlider } from \"./form-histogram\";\nimport { FormInput } from \"./form-input\";\nimport { FormInputGroup } from \"./form-input-group\";\nimport { FormLabel } from \"./form-label\";\nimport { FormMaskedInput } from \"./form-masked-input\";\nimport { FormMultiSelect } from \"./form-multi-select\";\nimport { FormNestedMultiSelect } from \"./form-nested-multi-select\";\nimport { FormNestedSelect } from \"./form-nested-select\";\nimport { FormOtpVerification } from \"./form-otp-verification\";\nimport { FormPhoneNumberInput } from \"./form-phone-number-input\";\nimport { FormPredictiveTextInput } from \"./form-predictive-text-input\";\nimport { FormRangeSelect } from \"./form-range-select\";\nimport { FormRangeSlider } from \"./form-range-slider\";\nimport { FormSelect } from \"./form-select\";\nimport { FormSelectHistogram } from \"./form-select-histogram\";\nimport { FormSlider } from \"./form-slider\";\nimport { FormTextarea } from \"./form-textarea\";\nimport { FormTimeRangePicker } from \"./form-time-range-picker\";\nimport { FormTimepicker } from \"./form-timepicker\";\nimport { FormUnitNumberInput } from \"./form-unit-number-input\";\n\nexport * from \"./types\";\n\n/**\n * A collection of form field components that each combine a label, input\n * control, and inline error message with consistent ARIA wiring.\n *\n * Use `Form.*` sub-components to build accessible forms. Use `Form.CustomField` to wrap any\n * bespoke input element in the same layout.\n *\n * Sub-components:\n * - `Form.CustomField` — layout shell for wrapping custom input elements.\n * - `Form.DateInput` — single date picker.\n * - `Form.DateRangeInput` — date range picker.\n * - `Form.ESignature` — e-signature capture field.\n * - `Form.HistogramSlider` — range slider with histogram overlay.\n * - `Form.Input` — single-line text input field.\n * - `Form.InputGroup` — grouped inputs with shared label and error state.\n * - `Form.Label` — standalone label for use outside a `Form.*` field.\n * - `Form.MaskedInput` — text input with a character-level input mask.\n * - `Form.MultiSelect` — multi-value dropdown select.\n * - `Form.NestedMultiSelect` — hierarchical multi-value select.\n * - `Form.NestedSelect` — hierarchical single-value select.\n * - `Form.OtpVerification` — OTP send-and-verify flow.\n * - `Form.PhoneNumberInput` — phone number input with country code selection.\n * - `Form.PredictiveTextInput` — text input with predictive suggestions.\n * - `Form.RangeSelect` — dual-value range dropdown select.\n * - `Form.RangeSlider` — dual-handle range slider.\n * - `Form.Select` — single-value dropdown select.\n * - `Form.SelectHistogram` — select control with histogram.\n * - `Form.Slider` — single-value range slider.\n * - `Form.Textarea` — multi-line text area.\n * - `Form.Timepicker` — time picker.\n * - `Form.TimeRangePicker` — time range picker.\n * - `Form.UnitNumberInput` — structured unit number input.\n */\nexport const Form = {\n    /** Layout shell that wraps any custom input element with label, subtitle, and error message. */\n    CustomField: FormCustomField,\n\n    /** Single date picker with form layout. */\n    DateInput: FormDateInput,\n\n    /** Date range picker with form layout. */\n    DateRangeInput: FormDateRangeInput,\n\n    /** E-signature capture field with form layout. */\n    ESignature: FormESignature,\n\n    /** Range slider with histogram overlay and form layout. */\n    HistogramSlider: FormHistogramSlider,\n\n    /** Single-line text input field with form layout. */\n    Input: FormInput,\n\n    /** Grouped inputs with shared label, error state, and form layout. */\n    InputGroup: FormInputGroup,\n\n    /** Standalone label element for use outside a `Form.*` field with optional subtitle and addon icon. */\n    Label: FormLabel,\n\n    /** Text input with a character-level input mask and form layout. */\n    MaskedInput: FormMaskedInput,\n\n    /** Multi-value dropdown select with form layout. */\n    MultiSelect: FormMultiSelect,\n\n    /** Hierarchical multi-value select with form layout. */\n    NestedMultiSelect: FormNestedMultiSelect,\n\n    /** Hierarchical single-value select with form layout. */\n    NestedSelect: FormNestedSelect,\n\n    /** OTP send-and-verify flow with form layout. */\n    OtpVerification: FormOtpVerification,\n\n    /** Phone number input with country code selection and form layout. */\n    PhoneNumberInput: FormPhoneNumberInput,\n\n    /** Text input with predictive suggestions and form layout. */\n    PredictiveTextInput: FormPredictiveTextInput,\n\n    /** Dual-value range dropdown select with form layout. */\n    RangeSelect: FormRangeSelect,\n\n    /** Dual-handle range slider with form layout. */\n    RangeSlider: FormRangeSlider,\n\n    /** Single-value dropdown select with form layout. */\n    Select: FormSelect,\n\n    /** Select control with histogram and form layout. */\n    SelectHistogram: FormSelectHistogram,\n\n    /** Single-value range slider with form layout. */\n    Slider: FormSlider,\n\n    /** Multi-line text area with form layout. */\n    Textarea: FormTextarea,\n\n    /** Time picker with form layout. */\n    Timepicker: FormTimepicker,\n\n    /** Time range picker with form layout. */\n    TimeRangePicker: FormTimeRangePicker,\n\n    /** Structured unit number input with form layout. */\n    UnitNumberInput: FormUnitNumberInput,\n};\n"],"names":["Form","CustomField","FormCustomField","DateInput","FormDateInput","DateRangeInput","FormDateRangeInput","ESignature","FormESignature","HistogramSlider","FormHistogramSlider","Input","FormInput","InputGroup","FormInputGroup","Label","FormLabel","MaskedInput","FormMaskedInput","MultiSelect","FormMultiSelect","NestedMultiSelect","FormNestedMultiSelect","NestedSelect","FormNestedSelect","OtpVerification","FormOtpVerification","PhoneNumberInput","FormPhoneNumberInput","PredictiveTextInput","FormPredictiveTextInput","RangeSelect","FormRangeSelect","RangeSlider","FormRangeSlider","Select","FormSelect","SelectHistogram","FormSelectHistogram","Slider","FormSlider","Textarea","FormTextarea","Timepicker","FormTimepicker","TimeRangePicker","FormTimeRangePicker","UnitNumberInput","FormUnitNumberInput"],"mappings":"22CA4DO,MAAMA,EAAO,CAEhBC,YAAaC,EAGbC,UAAWC,EAGXC,eAAgBC,EAGhBC,WAAYC,EAGZC,gBAAiBC,EAGjBC,MAAOC,EAGPC,WAAYC,EAGZC,MAAOC,EAGPC,YAAaC,EAGbC,YAAaC,EAGbC,kBAAmBC,EAGnBC,aAAcC,EAGdC,gBAAiBC,EAGjBC,iBAAkBC,EAGlBC,oBAAqBC,EAGrBC,YAAaC,EAGbC,YAAaC,EAGbC,OAAQC,EAGRC,gBAAiBC,EAGjBC,OAAQC,EAGRC,SAAUC,EAGVC,WAAYC,EAGZC,gBAAiBC,EAGjBC,gBAAiBC"}

package/form/types.d.ts

@@ -20,79 +20,228 @@ import type { SelectHistogramProps } from "../select-histogram";
 import type { TimeRangePickerProps } from "../time-range-picker/types";
 import type { TimepickerProps } from "../timepicker/types";
 import type { UnitNumberInputProps } from "../unit-number/types";
+/**
+ * Display mechanism for the form label addon.
+ *
+ * - `"popover"` renders an icon that triggers a popover.
+ * - `"tooltip"` is currently unsupported.
+ */
 export type FormLabelAddonType = "tooltip" | "popover";
-export interface FormLabelAddonTriggerProps {
-    addonType?: FormLabelAddonType | undefined;
-    icon?: JSX.Element | undefined;
-    "data-testid"?: string | undefined;
-}
+/**
+ * Configuration for an informational icon rendered inline with a form label.
+ */
 export interface FormLabelAddonProps {
+    /** Text or element displayed inside the popover overlay. */
     content: string | JSX.Element;
+    /**
+     * Display mechanism for the addon.
+     * Omit to render no addon icon.
+     */
     type?: FormLabelAddonType | undefined;
+    /**
+     * Custom icon element.
+     *
+     * @default <ICircleFillIcon />
+     */
     icon?: JSX.Element | undefined;
     id?: string | undefined;
+    /** Stacking order of the popover overlay. */
     zIndex?: number | undefined;
     "data-testid"?: string | undefined;
 }
+/**
+ * Props for a form field label or `Form.Label` component.
+ */
 export interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /** Informational icon and popover rendered inline with the label text. */
     addon?: FormLabelAddonProps | undefined;
+    /** Supporting description rendered below the label. */
     subtitle?: string | JSX.Element | undefined;
     "data-testid"?: string | undefined;
 }
+/**
+ * Controls how a form field's outer container is rendered.
+ *
+ * - `"flex"` — plain `div` with no column constraints.
+ * - `"grid"` — `ColDiv` that accepts responsive column span props from `ColProps`.
+ */
 export type FormElementLayoutType = "flex" | "grid";
+/**
+ * Common props shared by all `Form.*` field components.
+ */
 export interface BaseFormElementProps extends ColProps {
+    /**
+     * Label rendered above the input. Accepts a plain string or a
+     * `FormLabelProps` object to provide additional configuration.
+     */
     label?: FormLabelProps | string | undefined;
+    /**
+     * Inline error text rendered below the input.
+     */
     errorMessage?: string | React.ReactNode | undefined;
     "data-testid"?: string | undefined;
     "data-error-testid"?: string | undefined;
-    /** The layout type. Values: "flex" | "grid" */
+    /**
+     * Controls whether the container uses flex layout or a responsive column grid.
+     */
     layoutType?: FormElementLayoutType | undefined;
 }
+/**
+ * Props for the `FormWrapper` layout container.
+ */
 export interface FormWrapperProps extends BaseFormElementProps {
     children: JSX.Element | JSX.Element[];
+    /**
+     * Base ID used to derive ARIA label, subtitle, and error-message element
+     * IDs. A generated ID is used when omitted.
+     */
     id?: string | undefined;
 }
+/**
+ * Props for `Form.Input`, combining text input props with the shared form
+ * field layout.
+ */
 export interface FormInputProps extends InputPartialProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.InputGroup`, combining input group props with the shared
+ * form field layout.
+ *
+ * `T` is the option item type. `V` is the selected value type.
+ */
 export interface FormInputGroupProps<T, V> extends InputGroupPartialProps<T, V>, BaseFormElementProps {
 }
+/**
+ * Props for `Form.MaskedInput`, combining masked input props with the shared
+ * form field layout.
+ */
 export interface FormMaskedInputProps extends MaskedInputPartialProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.Textarea`, combining textarea props with the shared form
+ * field layout.
+ */
 export interface FormTextareaProps extends TextareaPartialProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.CustomField`, which wraps any custom input element with a
+ * shared label, subtitle, and inline error message layout.
+ */
 export interface FormCustomFieldProps extends FormWrapperProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.Select`, combining single-select input props with the shared
+ * form field layout.
+ *
+ * `T` is the option item type. `V` is the selected value type.
+ */
 export interface FormInputSelectProps<T, V> extends InputSelectPartialProps<T, V>, BaseFormElementProps {
 }
+/**
+ * Props for `Form.RangeSelect`, combining range-select input props with the
+ * shared form field layout.
+ *
+ * `T` is the option item type. `V` is the selected value type.
+ */
 export interface FormInputRangeSelectProps<T, V> extends InputRangeSelectPartialProps<T, V>, BaseFormElementProps {
 }
+/**
+ * Props for `Form.MultiSelect`, combining multi-select input props with the
+ * shared form field layout.
+ *
+ * `T` is the option item type. `V` is the selected value type.
+ */
 export interface FormMultiSelectProps<T, V> extends InputMultiSelectPartialProps<T, V>, BaseFormElementProps {
 }
+/**
+ * Props for `Form.NestedSelect`, combining nested single-select input props
+ * with the shared form field layout.
+ *
+ * `V1`, `V2`, and `V3` are the value types for the first, second, and third
+ * nesting levels respectively.
+ */
 export interface FormNestedSelectProps<V1, V2, V3> extends InputNestedSelectPartialProps<V1, V2, V3>, BaseFormElementProps {
 }
+/**
+ * Props for `Form.NestedMultiSelect`, combining nested multi-select input
+ * props with the shared form field layout.
+ *
+ * `V1`, `V2`, and `V3` are the value types for the first, second, and third
+ * nesting levels respectively.
+ */
 export interface FormNestedMultiSelectProps<V1, V2, V3> extends InputNestedMultiSelectPartialProps<V1, V2, V3>, BaseFormElementProps {
 }
+/**
+ * Props for `Form.DateInput`, combining date input props with the shared form
+ * field layout.
+ */
 export interface FormDateInputProps extends DateInputProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.DateRangeInput`, combining date-range input props with the
+ * shared form field layout.
+ */
 export interface FormDateRangeInputProps extends DateRangeInputProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.Timepicker`, combining time picker props with the shared
+ * form field layout.
+ */
 export interface FormTimepickerProps extends TimepickerProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.UnitNumberInput`, combining unit-number input props with the
+ * shared form field layout.
+ */
 export interface FormUnitNumberInputProps extends UnitNumberInputProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.PhoneNumberInput`, combining phone-number input props with
+ * the shared form field layout.
+ */
 export interface FormPhoneNumberInputProps extends PhoneNumberInputProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.TimeRangePicker`, combining time-range picker props with the
+ * shared form field layout.
+ */
 export interface FormTimeRangePickerProps extends TimeRangePickerProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.PredictiveTextInput`, combining predictive text input props
+ * with the shared form field layout.
+ *
+ * `T` is the suggestion item type. `V` is the selected value type.
+ */
 export interface FormPredictiveTextInputProps<T, V> extends PredictiveTextInputProps<T, V>, BaseFormElementProps {
 }
+/**
+ * Props for `Form.Slider`, combining single-value slider props with the shared
+ * form field layout.
+ */
 export interface FormSliderProps extends InputSliderProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.RangeSlider`, combining range slider props with the shared
+ * form field layout.
+ */
 export interface FormRangeSliderProps extends InputRangeSliderProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.HistogramSlider`, combining histogram slider props with the
+ * shared form field layout.
+ */
 export interface FormHistogramSliderProps extends HistogramSliderProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.ESignature`, combining e-signature props with the shared
+ * form field layout.
+ */
 export interface FormESignatureProps extends EsignatureProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.SelectHistogram`, combining select-histogram props with the
+ * shared form field layout.
+ */
 export interface FormSelectHistogramProps extends SelectHistogramProps, BaseFormElementProps {
 }

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

@@ -1,3 +1,10 @@
 import type { FullscreenImageCarouselProps, FullscreenImageCarouselRef } from "./types";
 export declare const Component: ({ items, initialActiveItemIndex, hideThumbnail, hideNavigation, hideCounter, hideMagnifier, onDelete, onClose, insets, show, ...otherProps }: FullscreenImageCarouselProps, ref: React.Ref<FullscreenImageCarouselRef>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A fullscreen modal carousel for browsing images and custom media items.
+ *
+ * Use to present a collection of images or custom content in an overlay with
+ * navigation controls, zoom support, and an optional thumbnail strip.
+ * The top info bar is rendered only when at least one item provides some file metadata.
+ */
 export declare const FullscreenImageCarousel: (props: FullscreenImageCarouselProps & import("react").RefAttributes<FullscreenImageCarouselRef>) => React.ReactElement | null;

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

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as i,jsxs as t,Fragment as l}from"react/jsx-runtime";import{ChevronLeftIcon as r,ChevronRightIcon as o,MagnifierPlusIcon as n,MagnifierMinusIcon as a,CrossIcon as s}from"@lifesg/react-icons";import{BinIcon as d}from"@lifesg/react-icons/bin";import{clearAnnouncer as c,announce as m}from"@react-aria/live-announcer";import u from"clsx";import{forwardRef as h,useState as v,useRef as p,useMemo as f,useCallback as g,useImperativeHandle as b,useEffect as N}from"react";import{TransformWrapper as j,TransformComponent as x}from"react-zoom-pan-pinch";import{ModalV2 as k}from"../modal-v2/index.js";import{ClickableIcon as y}from"../shared/clickable-icon/clickable-icon.js";import{useStateCallback as w}from"../shared/hooks/use-state-callback.js";import{ImagePlaceholder as C}from"../shared/image-placeholder/image-placeholder.js";import"../theme/theme-provider/index.js";import{formatUnitValue as I}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as T}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as $}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import{useEventListener as B}from"../util/use-event-listener.js";import{tokens as S,carouselModalContent as A,imageGalleryContainer as L,imageGalleryWrapper as D,imageGallerySwipe as M,iconButton as z,arrowButton as X,arrowButtonLeft as Z,arrowButtonRight as O,boxChip as R,chip as W,topActionButtons as q,iconButtonError as E,imageGallerySlides as P,imageGallerySlide as V,focusableImageRegion as _,slidePlaceholderImage as F,slideImage as H,thumbnailContainer as G,thumbnailWrapper as J,thumbnailItemContainer as K,thumbnailItem as Q,thumbnailImage as U,fileInfoFileName as Y,fileInfoFileSize as ee,fileInfoTextWrapper as ie,fileInfoTextWrapperCentered as te}from"./fullscreen-image-carousel.styles.js";import{StatefulImage as le}from"./stateful-image.js";const re=e=>!!e&&"custom"===e.type,oe=(h,oe)=>{var ne,{items:ae,initialActiveItemIndex:se,hideThumbnail:de=!1,hideNavigation:ce=!1,hideCounter:me=!1,hideMagnifier:ue=!1,onDelete:he,onClose:ve,insets:pe,show:fe}=h,ge=e(h,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[be,Ne]=w(null!=se?se:0),[je,xe]=v({}),[ke,ye]=v(1),[we,Ce]=v(),[Ie,Te]=v(),$e=p(null),Be=p([]),Se=p([]),Ae=p(null),Le=p(null),De=p(null),Me=p(null),ze=p(null),Xe=we&&Ie?we-Ie:0,Ze=ae[be],Oe=ae.some((e=>{var i;return re(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),Re=Oe?"item":"image",We=f((()=>ae.some((e=>{var i,t;return(null===(i=e.fileName)||void 0===i?void 0:i.trim())||(null===(t=e.fileSize)||void 0===t?void 0:t.trim())}))),[ae]);T(Le,{[S.topActionButtons.insetTop]:I(null==pe?void 0:pe.top,"px"),[S.topActionButtons.insetLeft]:I(null==pe?void 0:pe.left,"px"),[S.topActionButtons.insetRight]:I(null==pe?void 0:pe.right,"px")}),T(De,{[S.arrowButton.insetLeft]:I(null==pe?void 0:pe.left,"px")}),T(Me,{[S.arrowButton.insetRight]:I(null==pe?void 0:pe.right,"px")}),T(ze,{[S.thumbnailContainer.insetBottom]:I(null==pe?void 0:pe.bottom,"px")});const qe=g((e=>{var i,t;const l=ae[e],r=Oe?"Item":"Image",o=re(l)?(null===(i=l.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=l.alt)||void 0===t?void 0:t.trim())||"",n=`${r} ${e+1} of ${ae.length}.`;return o?`${o}. ${n}`:n}),[ae,Oe]);b(oe,(()=>({currentItemIndex:be,setCurrentItem:He,goToPrevItem:_e,goToNextItem:Fe}))),B("keydown",(function(e){"ArrowRight"===e.key?Fe():"ArrowLeft"===e.key?_e():"Escape"===e.key&&(null==ve||ve())}),"document"),N((()=>{var e;fe&&(null===(e=Ae.current)||void 0===e||e.focus())}),[fe]),N((()=>{0!==ae.length?be>ae.length-1&&Ne(ae.length-1):Ne(0)}),[be,ae.length,Ne]),N((()=>{var e,i;null===(i=null===(e=Be.current)||void 0===e?void 0:e[be])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),ye(1)}),[be]);const Ee=e=>{ye(e.state.scale)};const Pe=({src:e,height:i,width:t})=>{xe((l=>Object.assign(Object.assign({},l),{[e]:{height:i,width:t}})))},Ve=()=>{if(!Ze||re(Ze))return;const e=je[Ze.src];if($e.current&&e){const{clientHeight:i,clientWidth:t}=$e.current,{width:l,height:r}=e,o=r/l<i/t;return l<t&&r<i?o?t/l:i/r:o?i/(r/(l/t)):t/(l/(r/i))}},_e=()=>{var e,i;null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.resetTransform(),Ne((e=>0===e?ae.length-1:e-1),(e=>{c("polite"),m(qe(e),"polite")}))},Fe=()=>{var e,i;null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.resetTransform(),Ne((e=>e===ae.length-1?0:e+1),(e=>{c("polite"),m(qe(e),"polite")}))},He=e=>{var i,t;null===(t=null===(i=Se.current)||void 0===i?void 0:i[be])||void 0===t||t.resetTransform(),Ne(e)};return i(k,Object.assign({},ge,{"data-testid":"image-carousel-modal","aria-label":Oe?"Carousel":"Image carousel",show:fe,disableInitialFocus:!0,children:t("div",{className:A,children:[t("div",{className:L,children:[t("div",{className:D,children:[i("div",{className:M,ref:$e,onTouchStart:e=>{ke<=1&&Ce(e.touches[0].clientX)},onTouchMove:e=>{!we||ke>1||Te(e.touches[0].clientX)},onTouchEnd:()=>{$e.current&&(Math.abs(Xe)>$e.current.offsetWidth/3&&(Xe>0?Fe():_e()),Ce(void 0),Te(void 0))},children:i("div",{className:P,style:{transform:`translateX(calc(${100*-be}% - ${Xe}px))`},children:ae.map(((e,t)=>{const l=t===be,r=Math.abs(t-be)<=1||0===be&&t===ae.length-1||be===ae.length-1&&0===t;return i("div",{className:V,"data-testid":"slide-item",children:i("div",{className:_,ref:l?Ae:null,tabIndex:l?0:-1,children:re(e)?r?e.renderContent():i(C,{className:F}):i(j,{ref:e=>Se.current[t]=e,panning:{disabled:ke<=1},initialScale:1,onZoom:Ee,onZoomStop:Ee,onWheel:Ee,children:i(x,{children:i(le,{className:H,src:e.src,alt:qe(t),placeholder:i(C,{className:F}),fit:"scale-down",retrieveImageDimension:!0,setDimension:Pe})})})})},t)}))})}),!ce&&t(l,{children:[i(y,{className:u(z,X,Z),ref:De,"aria-label":`Previous ${Re}`,"data-testid":"prev-btn",onClick:_e,children:i(r,{"aria-hidden":!0})}),i(y,{className:u(z,X,O),ref:Me,"aria-label":`Next ${Re}`,"data-testid":"forward-btn",onClick:Fe,children:i(o,{"aria-hidden":!0})})]}),!me&&i("div",{className:R,"aria-hidden":"true",children:i($.BodyXS,{className:W,weight:"semibold","data-testid":"carousel-counter",children:`${be+1}/${ae.length}`})})]}),!de&&i("div",{className:G,ref:ze,"aria-hidden":"true","data-testid":"thumbnail-container",children:i("div",{className:J,children:ae.map(((e,t)=>{var l;const r=re(e)?e.thumbnailSrc:null!==(l=e.thumbnailSrc)&&void 0!==l?l:e.src;return i("div",{className:K,children:i("div",{className:Q,"data-active":t===be,"data-testid":"thumbnail-item",onClick:()=>He(t),ref:e=>Be.current[t]=e,children:r?i(le,{className:U,src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i(C,{className:F})})},t)}))})})]}),t("div",{className:q,ref:Le,"data-has-file-info":We,children:[We&&(()=>{const{fileName:e,fileSize:l}=null!=Ze?Ze:{},r=null==e?void 0:e.trim(),o=null==l?void 0:l.trim();return t("div",{className:u(ie,!o&&te),"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[r&&i($.BodyBL,{className:Y,weight:"semibold","data-testid":"file-info-name",children:r}),o&&i($.BodyMD,{className:ee,"data-testid":"file-info-size",children:o})]})})(),!ue&&!re(Ze)&&i(y,{className:z,"aria-label":1===ke?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,l;if(1===ke){const t=Ve();null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.centerView(t),ye(null!=t?t:1)}else ye(1),null===(l=null===(t=Se.current)||void 0===t?void 0:t[be])||void 0===l||l.resetTransform()},children:i(1===ke?n:a,{"aria-hidden":!0})}),he&&i(y,{className:u(z,E),"aria-label":`Delete ${re(Ze)&&(null===(ne=Ze.itemLabel)||void 0===ne?void 0:ne.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{Ze&&he&&he(Ze,be)},children:i(d,{"aria-hidden":!0})}),i(y,{className:z,"aria-label":Oe?"Close carousel":"Close image carousel",onClick:ve,children:i(s,{"aria-hidden":!0})})]})]})}))},ne=h(oe);export{oe as Component,ne as FullscreenImageCarousel};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as i,jsxs as t,Fragment as l}from"react/jsx-runtime";import{ChevronLeftIcon as r,ChevronRightIcon as o,MagnifierPlusIcon as a,MagnifierMinusIcon as n,CrossIcon as s}from"@lifesg/react-icons";import{BinIcon as d}from"@lifesg/react-icons/bin";import{clearAnnouncer as c,announce as m}from"@react-aria/live-announcer";import u from"clsx";import{forwardRef as h,useState as v,useRef as p,useMemo as f,useCallback as g,useImperativeHandle as b,useEffect as N}from"react";import{TransformWrapper as j,TransformComponent as x}from"react-zoom-pan-pinch";import{ModalV2 as k}from"../modal-v2/modal-v2.js";import{ClickableIcon as y}from"../shared/clickable-icon/clickable-icon.js";import{useStateCallback as w}from"../shared/hooks/use-state-callback.js";import{ImagePlaceholder as C}from"../shared/image-placeholder/image-placeholder.js";import"../theme/theme-provider/index.js";import{formatUnitValue as I}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as T}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as $}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import{useEventListener as B}from"../util/use-event-listener.js";import{tokens as S,carouselModalContent as A,imageGalleryContainer as L,imageGalleryWrapper as D,imageGallerySwipe as M,iconButton as z,arrowButton as X,arrowButtonLeft as Z,arrowButtonRight as O,boxChip as R,chip as W,topActionButtons as q,iconButtonError as E,imageGallerySlides as P,imageGallerySlide as V,focusableImageRegion as _,slidePlaceholderImage as F,slideImage as H,thumbnailContainer as G,thumbnailWrapper as J,thumbnailItemContainer as K,thumbnailItem as Q,thumbnailImage as U,fileInfoFileName as Y,fileInfoFileSize as ee,fileInfoTextWrapper as ie,fileInfoTextWrapperCentered as te}from"./fullscreen-image-carousel.styles.js";import{StatefulImage as le}from"./stateful-image.js";const re=e=>!!e&&"custom"===e.type,oe=(h,oe)=>{var ae,{items:ne,initialActiveItemIndex:se,hideThumbnail:de=!1,hideNavigation:ce=!1,hideCounter:me=!1,hideMagnifier:ue=!1,onDelete:he,onClose:ve,insets:pe,show:fe}=h,ge=e(h,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[be,Ne]=w(null!=se?se:0),[je,xe]=v({}),[ke,ye]=v(1),[we,Ce]=v(),[Ie,Te]=v(),$e=p(null),Be=p([]),Se=p([]),Ae=p(null),Le=p(null),De=p(null),Me=p(null),ze=p(null),Xe=we&&Ie?we-Ie:0,Ze=ne[be],Oe=ne.some((e=>{var i;return re(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),Re=Oe?"item":"image",We=f((()=>ne.some((e=>{var i,t;return(null===(i=e.fileName)||void 0===i?void 0:i.trim())||(null===(t=e.fileSize)||void 0===t?void 0:t.trim())}))),[ne]);T(Le,{[S.topActionButtons.insetTop]:I(null==pe?void 0:pe.top,"px"),[S.topActionButtons.insetLeft]:I(null==pe?void 0:pe.left,"px"),[S.topActionButtons.insetRight]:I(null==pe?void 0:pe.right,"px")}),T(De,{[S.arrowButton.insetLeft]:I(null==pe?void 0:pe.left,"px")}),T(Me,{[S.arrowButton.insetRight]:I(null==pe?void 0:pe.right,"px")}),T(ze,{[S.thumbnailContainer.insetBottom]:I(null==pe?void 0:pe.bottom,"px")});const qe=g((e=>{var i,t;const l=ne[e],r=Oe?"Item":"Image",o=re(l)?(null===(i=l.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=l.alt)||void 0===t?void 0:t.trim())||"",a=`${r} ${e+1} of ${ne.length}.`;return o?`${o}. ${a}`:a}),[ne,Oe]);b(oe,(()=>({currentItemIndex:be,setCurrentItem:He,goToPrevItem:_e,goToNextItem:Fe}))),B("keydown",(function(e){"ArrowRight"===e.key?Fe():"ArrowLeft"===e.key?_e():"Escape"===e.key&&(null==ve||ve())}),"document"),N((()=>{var e;fe&&(null===(e=Ae.current)||void 0===e||e.focus())}),[fe]),N((()=>{0!==ne.length?be>ne.length-1&&Ne(ne.length-1):Ne(0)}),[be,ne.length,Ne]),N((()=>{var e,i;null===(i=null===(e=Be.current)||void 0===e?void 0:e[be])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),ye(1)}),[be]);const Ee=e=>{ye(e.state.scale)};const Pe=({src:e,height:i,width:t})=>{xe((l=>Object.assign(Object.assign({},l),{[e]:{height:i,width:t}})))},Ve=()=>{if(!Ze||re(Ze))return;const e=je[Ze.src];if($e.current&&e){const{clientHeight:i,clientWidth:t}=$e.current,{width:l,height:r}=e,o=r/l<i/t;return l<t&&r<i?o?t/l:i/r:o?i/(r/(l/t)):t/(l/(r/i))}},_e=()=>{var e,i;null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.resetTransform(),Ne((e=>0===e?ne.length-1:e-1),(e=>{c("polite"),m(qe(e),"polite")}))},Fe=()=>{var e,i;null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.resetTransform(),Ne((e=>e===ne.length-1?0:e+1),(e=>{c("polite"),m(qe(e),"polite")}))},He=e=>{var i,t;null===(t=null===(i=Se.current)||void 0===i?void 0:i[be])||void 0===t||t.resetTransform(),Ne(e)};return i(k,Object.assign({},ge,{"data-testid":"image-carousel-modal","aria-label":Oe?"Carousel":"Image carousel",show:fe,disableInitialFocus:!0,children:t("div",{className:A,children:[t("div",{className:L,children:[t("div",{className:D,children:[i("div",{className:M,ref:$e,onTouchStart:e=>{ke<=1&&Ce(e.touches[0].clientX)},onTouchMove:e=>{!we||ke>1||Te(e.touches[0].clientX)},onTouchEnd:()=>{$e.current&&(Math.abs(Xe)>$e.current.offsetWidth/3&&(Xe>0?Fe():_e()),Ce(void 0),Te(void 0))},children:i("div",{className:P,style:{transform:`translateX(calc(${100*-be}% - ${Xe}px))`},children:ne.map(((e,t)=>{const l=t===be,r=Math.abs(t-be)<=1||0===be&&t===ne.length-1||be===ne.length-1&&0===t;return i("div",{className:V,"data-testid":"slide-item",children:i("div",{className:_,ref:l?Ae:null,tabIndex:l?0:-1,children:re(e)?r?e.renderContent():i(C,{className:F}):i(j,{ref:e=>Se.current[t]=e,panning:{disabled:ke<=1},initialScale:1,onZoom:Ee,onZoomStop:Ee,onWheel:Ee,children:i(x,{children:i(le,{className:H,src:e.src,alt:qe(t),placeholder:i(C,{className:F}),fit:"scale-down",retrieveImageDimension:!0,setDimension:Pe})})})})},t)}))})}),!ce&&t(l,{children:[i(y,{className:u(z,X,Z),ref:De,"aria-label":`Previous ${Re}`,"data-testid":"prev-btn",onClick:_e,children:i(r,{"aria-hidden":!0})}),i(y,{className:u(z,X,O),ref:Me,"aria-label":`Next ${Re}`,"data-testid":"forward-btn",onClick:Fe,children:i(o,{"aria-hidden":!0})})]}),!me&&i("div",{className:R,"aria-hidden":"true",children:i($.BodyXS,{className:W,weight:"semibold","data-testid":"carousel-counter",children:`${be+1}/${ne.length}`})})]}),!de&&i("div",{className:G,ref:ze,"aria-hidden":"true","data-testid":"thumbnail-container",children:i("div",{className:J,children:ne.map(((e,t)=>{var l;const r=re(e)?e.thumbnailSrc:null!==(l=e.thumbnailSrc)&&void 0!==l?l:e.src;return i("div",{className:K,children:i("div",{className:Q,"data-active":t===be,"data-testid":"thumbnail-item",onClick:()=>He(t),ref:e=>Be.current[t]=e,children:r?i(le,{className:U,src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i(C,{className:F})})},t)}))})})]}),t("div",{className:q,ref:Le,"data-has-file-info":We,children:[We&&(()=>{const{fileName:e,fileSize:l}=null!=Ze?Ze:{},r=null==e?void 0:e.trim(),o=null==l?void 0:l.trim();return t("div",{className:u(ie,!o&&te),"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[r&&i($.BodyBL,{className:Y,weight:"semibold","data-testid":"file-info-name",children:r}),o&&i($.BodyMD,{className:ee,"data-testid":"file-info-size",children:o})]})})(),!ue&&!re(Ze)&&i(y,{className:z,"aria-label":1===ke?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,l;if(1===ke){const t=Ve();null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.centerView(t),ye(null!=t?t:1)}else ye(1),null===(l=null===(t=Se.current)||void 0===t?void 0:t[be])||void 0===l||l.resetTransform()},children:i(1===ke?a:n,{"aria-hidden":!0})}),he&&i(y,{className:u(z,E),"aria-label":`Delete ${re(Ze)&&(null===(ae=Ze.itemLabel)||void 0===ae?void 0:ae.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{Ze&&he&&he(Ze,be)},children:i(d,{"aria-hidden":!0})}),i(y,{className:z,"aria-label":Oe?"Close carousel":"Close image carousel",onClick:ve,children:i(s,{"aria-hidden":!0})})]})]})}))},ae=h(oe);export{oe as Component,ae as FullscreenImageCarousel};
 //# sourceMappingURL=fullscreen-image-carousel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-image-carousel.js","sources":["../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    CrossIcon,\n    MagnifierMinusIcon,\n    MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n} from \"react-zoom-pan-pinch\";\nimport { TransformComponent, TransformWrapper } from \"react-zoom-pan-pinch\";\n\nimport { ModalV2 } from \"../modal-v2\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEventListener } from \"../util\";\nimport * as styles from \"./fullscreen-image-carousel.styles\";\nimport { StatefulImage } from \"./stateful-image\";\nimport type {\n    FullscreenImageCarouselCustomItemProps,\n    FullscreenImageCarouselItemProps,\n    FullscreenImageCarouselProps,\n    FullscreenImageCarouselRef,\n    ImageDimension,\n} from \"./types\";\n\nconst isCustomItem = (\n    item: FullscreenImageCarouselItemProps | undefined\n): item is FullscreenImageCarouselCustomItemProps =>\n    !!item && item.type === \"custom\";\n\nexport const Component = (\n    {\n        items,\n        initialActiveItemIndex,\n        hideThumbnail = false,\n        hideNavigation = false,\n        hideCounter = false,\n        hideMagnifier = false,\n        onDelete,\n        onClose,\n        insets,\n        show,\n        ...otherProps\n    }: FullscreenImageCarouselProps,\n    ref: React.Ref<FullscreenImageCarouselRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentSlide, setCurrentSlide] = useStateCallback(\n        initialActiveItemIndex ?? 0\n    );\n    const [imagesDimension, setImageDimension] = useState<\n        Record<string, ImageDimension>\n    >({});\n    const [zoom, setZoom] = useState(1);\n    const [startX, setStartX] = useState<number | undefined>();\n    const [endX, setEndX] = useState<number | undefined>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const thumbnailRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const zoomRefs = useRef<(ReactZoomPanPinchContentRef | null)[]>([]);\n    const imageRef = useRef<HTMLDivElement>(null);\n    const topActionButtonsRef = useRef<HTMLDivElement>(null);\n    const prevArrowButtonRef = useRef<HTMLButtonElement>(null);\n    const nextArrowButtonRef = useRef<HTMLButtonElement>(null);\n    const thumbnailContainerRef = useRef<HTMLDivElement>(null);\n    const diff = startX && endX ? startX - endX : 0;\n    const currentItem = items[currentSlide];\n    const hasAnyItemLabel = items.some(\n        (item) => isCustomItem(item) && !!item.itemLabel?.trim()\n    );\n    const carouselItemNoun = hasAnyItemLabel ? \"item\" : \"image\";\n    const hasFileInfo = useMemo(\n        () =>\n            items.some(\n                (item) => item.fileName?.trim() || item.fileSize?.trim()\n            ),\n        [items]\n    );\n\n    useApplyStyle(topActionButtonsRef, {\n        [styles.tokens.topActionButtons.insetTop]: formatUnitValue(\n            insets?.top,\n            \"px\"\n        ),\n        [styles.tokens.topActionButtons.insetLeft]: formatUnitValue(\n            insets?.left,\n            \"px\"\n        ),\n        [styles.tokens.topActionButtons.insetRight]: formatUnitValue(\n            insets?.right,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(prevArrowButtonRef, {\n        [styles.tokens.arrowButton.insetLeft]: formatUnitValue(\n            insets?.left,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(nextArrowButtonRef, {\n        [styles.tokens.arrowButton.insetRight]: formatUnitValue(\n            insets?.right,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(thumbnailContainerRef, {\n        [styles.tokens.thumbnailContainer.insetBottom]: formatUnitValue(\n            insets?.bottom,\n            \"px\"\n        ),\n    });\n\n    const getItemAriaLabel = useCallback(\n        (index: number) => {\n            const item = items[index];\n            const itemTypeLabel = hasAnyItemLabel ? \"Item\" : \"Image\";\n            const prefix = isCustomItem(item)\n                ? item.itemLabel?.trim() || \"\"\n                : item.alt?.trim() || \"\";\n            const positionLabel = `${itemTypeLabel} ${index + 1} of ${\n                items.length\n            }.`;\n\n            return prefix ? `${prefix}. ${positionLabel}` : positionLabel;\n        },\n        [items, hasAnyItemLabel]\n    );\n\n    useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(\n        ref,\n        () => ({\n            currentItemIndex: currentSlide,\n            setCurrentItem: goToSlide,\n            goToPrevItem: goToPrevSlide,\n            goToNextItem: goToNextSlide,\n        })\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"keydown\", handleKeyDown, \"document\");\n\n    useEffect(() => {\n        if (show) {\n            imageRef.current?.focus();\n        }\n    }, [show]);\n\n    useEffect(() => {\n        if (items.length === 0) {\n            setCurrentSlide(0);\n            return;\n        }\n\n        if (currentSlide > items.length - 1) {\n            setCurrentSlide(items.length - 1);\n        }\n    }, [currentSlide, items.length, setCurrentSlide]);\n\n    useEffect(() => {\n        thumbnailRefs.current?.[currentSlide]?.scrollIntoView({\n            behavior: \"smooth\",\n            inline: \"center\",\n        });\n        setZoom(1);\n    }, [currentSlide]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleTouchStart = (e: React.TouchEvent) => {\n        if (zoom <= 1) setStartX(e.touches[0].clientX);\n    };\n\n    const handleTouchMove = (e: React.TouchEvent) => {\n        if (!startX || zoom > 1) return;\n        setEndX(e.touches[0].clientX);\n    };\n\n    const handleTouchEnd = () => {\n        if (!containerRef.current) return;\n        if (Math.abs(diff) > containerRef.current.offsetWidth / 3) {\n            if (diff > 0) {\n                goToNextSlide();\n            } else {\n                goToPrevSlide();\n            }\n        }\n        setStartX(undefined);\n        setEndX(undefined);\n    };\n\n    const handleZoom = (e: ReactZoomPanPinchRef) => {\n        setZoom(e.state.scale);\n    };\n\n    const handleDelete = () => {\n        if (currentItem && onDelete) {\n            onDelete(currentItem, currentSlide);\n        }\n    };\n\n    function handleKeyDown(e: KeyboardEvent) {\n        if (e.key === \"ArrowRight\") {\n            goToNextSlide();\n        } else if (e.key === \"ArrowLeft\") {\n            goToPrevSlide();\n        } else if (e.key === \"Escape\") {\n            onClose?.();\n        }\n    }\n\n    const handleMagnifier = () => {\n        if (zoom === 1) {\n            const zoomRatio = getZoomRatio();\n            zoomRefs.current?.[currentSlide]?.centerView(zoomRatio);\n            setZoom(zoomRatio ?? 1);\n        } else {\n            setZoom(1);\n            zoomRefs.current?.[currentSlide]?.resetTransform();\n        }\n    };\n\n    const setDimension = ({\n        src,\n        height,\n        width,\n    }: {\n        src: string;\n        height: number;\n        width: number;\n    }) => {\n        setImageDimension((oldState) => {\n            return { ...oldState, [src]: { height, width } };\n        });\n    };\n\n    const getZoomRatio = () => {\n        if (!currentItem || isCustomItem(currentItem)) {\n            return;\n        }\n\n        const imageDimension = imagesDimension[currentItem.src];\n\n        if (containerRef.current && !!imageDimension) {\n            const { clientHeight, clientWidth } = containerRef.current;\n            const { width, height } = imageDimension;\n            const isSmallImg = width < clientWidth && height < clientHeight;\n\n            const isImgLandscapeRelativeToDevice =\n                height / width < clientHeight / clientWidth;\n\n            if (isSmallImg) {\n                return isImgLandscapeRelativeToDevice\n                    ? clientWidth / width\n                    : clientHeight / height;\n            }\n\n            return isImgLandscapeRelativeToDevice\n                ? clientHeight / (height / (width / clientWidth))\n                : clientWidth / (width / (height / clientHeight));\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const goToPrevSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === 0 ? items.length - 1 : prev - 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToNextSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === items.length - 1 ? 0 : prev + 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToSlide = (index: number) => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(index);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlides = () => {\n        return (\n            <div\n                className={styles.imageGallerySlides}\n                style={{\n                    transform: `translateX(calc(${\n                        -currentSlide * 100\n                    }% - ${diff}px))`,\n                }}\n            >\n                {items.map((item, index) => {\n                    const isActive = index === currentSlide;\n                    const isActiveOrAdjacent =\n                        Math.abs(index - currentSlide) <= 1 ||\n                        (currentSlide === 0 && index === items.length - 1) ||\n                        (currentSlide === items.length - 1 && index === 0);\n\n                    return (\n                        <div\n                            className={styles.imageGallerySlide}\n                            key={index}\n                            data-testid=\"slide-item\"\n                        >\n                            <div\n                                className={styles.focusableImageRegion}\n                                ref={isActive ? imageRef : null}\n                                tabIndex={isActive ? 0 : -1}\n                            >\n                                {isCustomItem(item) ? (\n                                    isActiveOrAdjacent ? (\n                                        item.renderContent()\n                                    ) : (\n                                        <ImagePlaceholder\n                                            className={\n                                                styles.slidePlaceholderImage\n                                            }\n                                        />\n                                    )\n                                ) : (\n                                    <TransformWrapper\n                                        ref={(el) =>\n                                            (zoomRefs.current[index] = el)\n                                        }\n                                        panning={{\n                                            disabled: zoom <= 1,\n                                        }}\n                                        initialScale={1}\n                                        onZoom={handleZoom}\n                                        onZoomStop={handleZoom}\n                                        onWheel={handleZoom}\n                                    >\n                                        <TransformComponent>\n                                            <StatefulImage\n                                                className={styles.slideImage}\n                                                src={item.src}\n                                                alt={getItemAriaLabel(index)}\n                                                placeholder={\n                                                    <ImagePlaceholder\n                                                        className={\n                                                            styles.slidePlaceholderImage\n                                                        }\n                                                    />\n                                                }\n                                                fit=\"scale-down\"\n                                                retrieveImageDimension\n                                                setDimension={setDimension}\n                                            />\n                                        </TransformComponent>\n                                    </TransformWrapper>\n                                )}\n                            </div>\n                        </div>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    const renderFileInfo = () => {\n        const { fileName, fileSize } = currentItem ?? {};\n        const trimmedName = fileName?.trim();\n        const trimmedSize = fileSize?.trim();\n\n        return (\n            <div\n                className={clsx(\n                    styles.fileInfoTextWrapper,\n                    !trimmedSize && styles.fileInfoTextWrapperCentered\n                )}\n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n                data-testid=\"file-info-bar\"\n            >\n                {trimmedName && (\n                    <Typography.BodyBL\n                        className={styles.fileInfoFileName}\n                        weight=\"semibold\"\n                        data-testid=\"file-info-name\"\n                    >\n                        {trimmedName}\n                    </Typography.BodyBL>\n                )}\n                {trimmedSize && (\n                    <Typography.BodyMD\n                        className={styles.fileInfoFileSize}\n                        data-testid=\"file-info-size\"\n                    >\n                        {trimmedSize}\n                    </Typography.BodyMD>\n                )}\n            </div>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <div\n                className={styles.thumbnailContainer}\n                ref={thumbnailContainerRef}\n                aria-hidden=\"true\"\n                data-testid=\"thumbnail-container\"\n            >\n                <div className={styles.thumbnailWrapper}>\n                    {items.map((item, index) => {\n                        const src = isCustomItem(item)\n                            ? item.thumbnailSrc\n                            : item.thumbnailSrc ?? item.src;\n                        return (\n                            <div\n                                className={styles.thumbnailItemContainer}\n                                key={index}\n                            >\n                                <div\n                                    className={styles.thumbnailItem}\n                                    data-active={index === currentSlide}\n                                    data-testid=\"thumbnail-item\"\n                                    onClick={() => goToSlide(index)}\n                                    ref={(el) =>\n                                        (thumbnailRefs.current[index] = el)\n                                    }\n                                >\n                                    {src ? (\n                                        <StatefulImage\n                                            className={styles.thumbnailImage}\n                                            src={src}\n                                            alt={`Thumbnail ${index + 1}`}\n                                            fit=\"cover\"\n                                        />\n                                    ) : (\n                                        <ImagePlaceholder\n                                            className={\n                                                styles.slidePlaceholderImage\n                                            }\n                                        />\n                                    )}\n                                </div>\n                            </div>\n                        );\n                    })}\n                </div>\n            </div>\n        );\n    };\n\n    return (\n        <ModalV2\n            {...otherProps}\n            data-testid=\"image-carousel-modal\"\n            aria-label={hasAnyItemLabel ? \"Carousel\" : \"Image carousel\"}\n            show={show}\n            disableInitialFocus\n        >\n            <div className={styles.carouselModalContent}>\n                <div className={styles.imageGalleryContainer}>\n                    <div className={styles.imageGalleryWrapper}>\n                        <div\n                            className={styles.imageGallerySwipe}\n                            ref={containerRef}\n                            onTouchStart={handleTouchStart}\n                            onTouchMove={handleTouchMove}\n                            onTouchEnd={handleTouchEnd}\n                        >\n                            {renderSlides()}\n                        </div>\n\n                        {!hideNavigation && (\n                            <>\n                                <ClickableIcon\n                                    className={clsx(\n                                        styles.iconButton,\n                                        styles.arrowButton,\n                                        styles.arrowButtonLeft\n                                    )}\n                                    ref={prevArrowButtonRef}\n                                    aria-label={`Previous ${carouselItemNoun}`}\n                                    data-testid=\"prev-btn\"\n                                    onClick={goToPrevSlide}\n                                >\n                                    <ChevronLeftIcon aria-hidden />\n                                </ClickableIcon>\n                                <ClickableIcon\n                                    className={clsx(\n                                        styles.iconButton,\n                                        styles.arrowButton,\n                                        styles.arrowButtonRight\n                                    )}\n                                    ref={nextArrowButtonRef}\n                                    aria-label={`Next ${carouselItemNoun}`}\n                                    data-testid=\"forward-btn\"\n                                    onClick={goToNextSlide}\n                                >\n                                    <ChevronRightIcon aria-hidden />\n                                </ClickableIcon>\n                            </>\n                        )}\n\n                        {!hideCounter && (\n                            <div className={styles.boxChip} aria-hidden=\"true\">\n                                <Typography.BodyXS\n                                    className={styles.chip}\n                                    weight=\"semibold\"\n                                    data-testid=\"carousel-counter\"\n                                >{`${currentSlide + 1}/${\n                                    items.length\n                                }`}</Typography.BodyXS>\n                            </div>\n                        )}\n                    </div>\n\n                    {!hideThumbnail && renderThumbnails()}\n                </div>\n                <div\n                    className={styles.topActionButtons}\n                    ref={topActionButtonsRef}\n                    data-has-file-info={hasFileInfo}\n                >\n                    {hasFileInfo && renderFileInfo()}\n                    {!hideMagnifier && !isCustomItem(currentItem) && (\n                        <ClickableIcon\n                            className={styles.iconButton}\n                            aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n                            onClick={handleMagnifier}\n                        >\n                            {zoom === 1 ? (\n                                <MagnifierPlusIcon aria-hidden />\n                            ) : (\n                                <MagnifierMinusIcon aria-hidden />\n                            )}\n                        </ClickableIcon>\n                    )}\n\n                    {onDelete && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonError\n                            )}\n                            aria-label={`Delete ${\n                                (isCustomItem(currentItem) &&\n                                    currentItem.itemLabel?.trim()) ||\n                                \"image\"\n                            }`}\n                            data-testid=\"delete-btn\"\n                            onClick={handleDelete}\n                        >\n                            <BinIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n\n                    <ClickableIcon\n                        className={styles.iconButton}\n                        aria-label={\n                            hasAnyItemLabel\n                                ? \"Close carousel\"\n                                : \"Close image carousel\"\n                        }\n                        onClick={onClose}\n                    >\n                        <CrossIcon aria-hidden />\n                    </ClickableIcon>\n                </div>\n            </div>\n        </ModalV2>\n    );\n};\n\nexport const FullscreenImageCarousel = forwardRef<\n    FullscreenImageCarouselRef,\n    FullscreenImageCarouselProps\n>(Component);\n"],"names":["isCustomItem","item","type","Component","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","topActionButtonsRef","prevArrowButtonRef","nextArrowButtonRef","thumbnailContainerRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","useApplyStyle","styles.tokens","topActionButtons","insetTop","formatUnitValue","top","insetLeft","left","insetRight","right","arrowButton","thumbnailContainer","insetBottom","bottom","getItemAriaLabel","useCallback","index","itemTypeLabel","prefix","alt","positionLabel","length","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","current","focus","scrollIntoView","behavior","inline","handleZoom","state","scale","setDimension","src","height","width","oldState","Object","assign","getZoomRatio","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","resetTransform","prev","slide","clearAnnouncer","announce","_jsx","ModalV2","disableInitialFocus","_jsxs","className","styles.carouselModalContent","children","styles.imageGalleryContainer","styles.imageGalleryWrapper","styles.imageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","styles.imageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","styles.imageGallerySlide","styles.focusableImageRegion","tabIndex","renderContent","ImagePlaceholder","styles.slidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","StatefulImage","styles.slideImage","placeholder","fit","retrieveImageDimension","_Fragment","ClickableIcon","clsx","styles.iconButton","styles.arrowButton","styles.arrowButtonLeft","onClick","ChevronLeftIcon","styles.arrowButtonRight","ChevronRightIcon","styles.boxChip","Typography","BodyXS","styles.chip","weight","styles.thumbnailContainer","styles.thumbnailWrapper","thumbnailSrc","styles.thumbnailItemContainer","styles.thumbnailItem","styles.thumbnailImage","styles.topActionButtons","trimmedName","trimmedSize","styles.fileInfoTextWrapper","styles.fileInfoTextWrapperCentered","BodyBL","styles.fileInfoFileName","BodyMD","styles.fileInfoFileSize","renderFileInfo","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","styles.iconButtonError","BinIcon","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fullscreen-image-carousel.js","sources":["../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    CrossIcon,\n    MagnifierMinusIcon,\n    MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n} from \"react-zoom-pan-pinch\";\nimport { TransformComponent, TransformWrapper } from \"react-zoom-pan-pinch\";\n\nimport { ModalV2 } from \"../modal-v2\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEventListener } from \"../util\";\nimport * as styles from \"./fullscreen-image-carousel.styles\";\nimport { StatefulImage } from \"./stateful-image\";\nimport type {\n    FullscreenImageCarouselCustomItemProps,\n    FullscreenImageCarouselItemProps,\n    FullscreenImageCarouselProps,\n    FullscreenImageCarouselRef,\n    ImageDimension,\n} from \"./types\";\n\nconst isCustomItem = (\n    item: FullscreenImageCarouselItemProps | undefined\n): item is FullscreenImageCarouselCustomItemProps =>\n    !!item && item.type === \"custom\";\n\nexport const Component = (\n    {\n        items,\n        initialActiveItemIndex,\n        hideThumbnail = false,\n        hideNavigation = false,\n        hideCounter = false,\n        hideMagnifier = false,\n        onDelete,\n        onClose,\n        insets,\n        show,\n        ...otherProps\n    }: FullscreenImageCarouselProps,\n    ref: React.Ref<FullscreenImageCarouselRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentSlide, setCurrentSlide] = useStateCallback(\n        initialActiveItemIndex ?? 0\n    );\n    const [imagesDimension, setImageDimension] = useState<\n        Record<string, ImageDimension>\n    >({});\n    const [zoom, setZoom] = useState(1);\n    const [startX, setStartX] = useState<number | undefined>();\n    const [endX, setEndX] = useState<number | undefined>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const thumbnailRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const zoomRefs = useRef<(ReactZoomPanPinchContentRef | null)[]>([]);\n    const imageRef = useRef<HTMLDivElement>(null);\n    const topActionButtonsRef = useRef<HTMLDivElement>(null);\n    const prevArrowButtonRef = useRef<HTMLButtonElement>(null);\n    const nextArrowButtonRef = useRef<HTMLButtonElement>(null);\n    const thumbnailContainerRef = useRef<HTMLDivElement>(null);\n    const diff = startX && endX ? startX - endX : 0;\n    const currentItem = items[currentSlide];\n    const hasAnyItemLabel = items.some(\n        (item) => isCustomItem(item) && !!item.itemLabel?.trim()\n    );\n    const carouselItemNoun = hasAnyItemLabel ? \"item\" : \"image\";\n    const hasFileInfo = useMemo(\n        () =>\n            items.some(\n                (item) => item.fileName?.trim() || item.fileSize?.trim()\n            ),\n        [items]\n    );\n\n    useApplyStyle(topActionButtonsRef, {\n        [styles.tokens.topActionButtons.insetTop]: formatUnitValue(\n            insets?.top,\n            \"px\"\n        ),\n        [styles.tokens.topActionButtons.insetLeft]: formatUnitValue(\n            insets?.left,\n            \"px\"\n        ),\n        [styles.tokens.topActionButtons.insetRight]: formatUnitValue(\n            insets?.right,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(prevArrowButtonRef, {\n        [styles.tokens.arrowButton.insetLeft]: formatUnitValue(\n            insets?.left,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(nextArrowButtonRef, {\n        [styles.tokens.arrowButton.insetRight]: formatUnitValue(\n            insets?.right,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(thumbnailContainerRef, {\n        [styles.tokens.thumbnailContainer.insetBottom]: formatUnitValue(\n            insets?.bottom,\n            \"px\"\n        ),\n    });\n\n    const getItemAriaLabel = useCallback(\n        (index: number) => {\n            const item = items[index];\n            const itemTypeLabel = hasAnyItemLabel ? \"Item\" : \"Image\";\n            const prefix = isCustomItem(item)\n                ? item.itemLabel?.trim() || \"\"\n                : item.alt?.trim() || \"\";\n            const positionLabel = `${itemTypeLabel} ${index + 1} of ${\n                items.length\n            }.`;\n\n            return prefix ? `${prefix}. ${positionLabel}` : positionLabel;\n        },\n        [items, hasAnyItemLabel]\n    );\n\n    useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(\n        ref,\n        () => ({\n            currentItemIndex: currentSlide,\n            setCurrentItem: goToSlide,\n            goToPrevItem: goToPrevSlide,\n            goToNextItem: goToNextSlide,\n        })\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"keydown\", handleKeyDown, \"document\");\n\n    useEffect(() => {\n        if (show) {\n            imageRef.current?.focus();\n        }\n    }, [show]);\n\n    useEffect(() => {\n        if (items.length === 0) {\n            setCurrentSlide(0);\n            return;\n        }\n\n        if (currentSlide > items.length - 1) {\n            setCurrentSlide(items.length - 1);\n        }\n    }, [currentSlide, items.length, setCurrentSlide]);\n\n    useEffect(() => {\n        thumbnailRefs.current?.[currentSlide]?.scrollIntoView({\n            behavior: \"smooth\",\n            inline: \"center\",\n        });\n        setZoom(1);\n    }, [currentSlide]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleTouchStart = (e: React.TouchEvent) => {\n        if (zoom <= 1) setStartX(e.touches[0].clientX);\n    };\n\n    const handleTouchMove = (e: React.TouchEvent) => {\n        if (!startX || zoom > 1) return;\n        setEndX(e.touches[0].clientX);\n    };\n\n    const handleTouchEnd = () => {\n        if (!containerRef.current) return;\n        if (Math.abs(diff) > containerRef.current.offsetWidth / 3) {\n            if (diff > 0) {\n                goToNextSlide();\n            } else {\n                goToPrevSlide();\n            }\n        }\n        setStartX(undefined);\n        setEndX(undefined);\n    };\n\n    const handleZoom = (e: ReactZoomPanPinchRef) => {\n        setZoom(e.state.scale);\n    };\n\n    const handleDelete = () => {\n        if (currentItem && onDelete) {\n            onDelete(currentItem, currentSlide);\n        }\n    };\n\n    function handleKeyDown(e: KeyboardEvent) {\n        if (e.key === \"ArrowRight\") {\n            goToNextSlide();\n        } else if (e.key === \"ArrowLeft\") {\n            goToPrevSlide();\n        } else if (e.key === \"Escape\") {\n            onClose?.();\n        }\n    }\n\n    const handleMagnifier = () => {\n        if (zoom === 1) {\n            const zoomRatio = getZoomRatio();\n            zoomRefs.current?.[currentSlide]?.centerView(zoomRatio);\n            setZoom(zoomRatio ?? 1);\n        } else {\n            setZoom(1);\n            zoomRefs.current?.[currentSlide]?.resetTransform();\n        }\n    };\n\n    const setDimension = ({\n        src,\n        height,\n        width,\n    }: {\n        src: string;\n        height: number;\n        width: number;\n    }) => {\n        setImageDimension((oldState) => {\n            return { ...oldState, [src]: { height, width } };\n        });\n    };\n\n    const getZoomRatio = () => {\n        if (!currentItem || isCustomItem(currentItem)) {\n            return;\n        }\n\n        const imageDimension = imagesDimension[currentItem.src];\n\n        if (containerRef.current && !!imageDimension) {\n            const { clientHeight, clientWidth } = containerRef.current;\n            const { width, height } = imageDimension;\n            const isSmallImg = width < clientWidth && height < clientHeight;\n\n            const isImgLandscapeRelativeToDevice =\n                height / width < clientHeight / clientWidth;\n\n            if (isSmallImg) {\n                return isImgLandscapeRelativeToDevice\n                    ? clientWidth / width\n                    : clientHeight / height;\n            }\n\n            return isImgLandscapeRelativeToDevice\n                ? clientHeight / (height / (width / clientWidth))\n                : clientWidth / (width / (height / clientHeight));\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const goToPrevSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === 0 ? items.length - 1 : prev - 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToNextSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === items.length - 1 ? 0 : prev + 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToSlide = (index: number) => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(index);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlides = () => {\n        return (\n            <div\n                className={styles.imageGallerySlides}\n                style={{\n                    transform: `translateX(calc(${\n                        -currentSlide * 100\n                    }% - ${diff}px))`,\n                }}\n            >\n                {items.map((item, index) => {\n                    const isActive = index === currentSlide;\n                    const isActiveOrAdjacent =\n                        Math.abs(index - currentSlide) <= 1 ||\n                        (currentSlide === 0 && index === items.length - 1) ||\n                        (currentSlide === items.length - 1 && index === 0);\n\n                    return (\n                        <div\n                            className={styles.imageGallerySlide}\n                            key={index}\n                            data-testid=\"slide-item\"\n                        >\n                            <div\n                                className={styles.focusableImageRegion}\n                                ref={isActive ? imageRef : null}\n                                tabIndex={isActive ? 0 : -1}\n                            >\n                                {isCustomItem(item) ? (\n                                    isActiveOrAdjacent ? (\n                                        item.renderContent()\n                                    ) : (\n                                        <ImagePlaceholder\n                                            className={\n                                                styles.slidePlaceholderImage\n                                            }\n                                        />\n                                    )\n                                ) : (\n                                    <TransformWrapper\n                                        ref={(el) =>\n                                            (zoomRefs.current[index] = el)\n                                        }\n                                        panning={{\n                                            disabled: zoom <= 1,\n                                        }}\n                                        initialScale={1}\n                                        onZoom={handleZoom}\n                                        onZoomStop={handleZoom}\n                                        onWheel={handleZoom}\n                                    >\n                                        <TransformComponent>\n                                            <StatefulImage\n                                                className={styles.slideImage}\n                                                src={item.src}\n                                                alt={getItemAriaLabel(index)}\n                                                placeholder={\n                                                    <ImagePlaceholder\n                                                        className={\n                                                            styles.slidePlaceholderImage\n                                                        }\n                                                    />\n                                                }\n                                                fit=\"scale-down\"\n                                                retrieveImageDimension\n                                                setDimension={setDimension}\n                                            />\n                                        </TransformComponent>\n                                    </TransformWrapper>\n                                )}\n                            </div>\n                        </div>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    const renderFileInfo = () => {\n        const { fileName, fileSize } = currentItem ?? {};\n        const trimmedName = fileName?.trim();\n        const trimmedSize = fileSize?.trim();\n\n        return (\n            <div\n                className={clsx(\n                    styles.fileInfoTextWrapper,\n                    !trimmedSize && styles.fileInfoTextWrapperCentered\n                )}\n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n                data-testid=\"file-info-bar\"\n            >\n                {trimmedName && (\n                    <Typography.BodyBL\n                        className={styles.fileInfoFileName}\n                        weight=\"semibold\"\n                        data-testid=\"file-info-name\"\n                    >\n                        {trimmedName}\n                    </Typography.BodyBL>\n                )}\n                {trimmedSize && (\n                    <Typography.BodyMD\n                        className={styles.fileInfoFileSize}\n                        data-testid=\"file-info-size\"\n                    >\n                        {trimmedSize}\n                    </Typography.BodyMD>\n                )}\n            </div>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <div\n                className={styles.thumbnailContainer}\n                ref={thumbnailContainerRef}\n                aria-hidden=\"true\"\n                data-testid=\"thumbnail-container\"\n            >\n                <div className={styles.thumbnailWrapper}>\n                    {items.map((item, index) => {\n                        const src = isCustomItem(item)\n                            ? item.thumbnailSrc\n                            : item.thumbnailSrc ?? item.src;\n                        return (\n                            <div\n                                className={styles.thumbnailItemContainer}\n                                key={index}\n                            >\n                                <div\n                                    className={styles.thumbnailItem}\n                                    data-active={index === currentSlide}\n                                    data-testid=\"thumbnail-item\"\n                                    onClick={() => goToSlide(index)}\n                                    ref={(el) =>\n                                        (thumbnailRefs.current[index] = el)\n                                    }\n                                >\n                                    {src ? (\n                                        <StatefulImage\n                                            className={styles.thumbnailImage}\n                                            src={src}\n                                            alt={`Thumbnail ${index + 1}`}\n                                            fit=\"cover\"\n                                        />\n                                    ) : (\n                                        <ImagePlaceholder\n                                            className={\n                                                styles.slidePlaceholderImage\n                                            }\n                                        />\n                                    )}\n                                </div>\n                            </div>\n                        );\n                    })}\n                </div>\n            </div>\n        );\n    };\n\n    return (\n        <ModalV2\n            {...otherProps}\n            data-testid=\"image-carousel-modal\"\n            aria-label={hasAnyItemLabel ? \"Carousel\" : \"Image carousel\"}\n            show={show}\n            disableInitialFocus\n        >\n            <div className={styles.carouselModalContent}>\n                <div className={styles.imageGalleryContainer}>\n                    <div className={styles.imageGalleryWrapper}>\n                        <div\n                            className={styles.imageGallerySwipe}\n                            ref={containerRef}\n                            onTouchStart={handleTouchStart}\n                            onTouchMove={handleTouchMove}\n                            onTouchEnd={handleTouchEnd}\n                        >\n                            {renderSlides()}\n                        </div>\n\n                        {!hideNavigation && (\n                            <>\n                                <ClickableIcon\n                                    className={clsx(\n                                        styles.iconButton,\n                                        styles.arrowButton,\n                                        styles.arrowButtonLeft\n                                    )}\n                                    ref={prevArrowButtonRef}\n                                    aria-label={`Previous ${carouselItemNoun}`}\n                                    data-testid=\"prev-btn\"\n                                    onClick={goToPrevSlide}\n                                >\n                                    <ChevronLeftIcon aria-hidden />\n                                </ClickableIcon>\n                                <ClickableIcon\n                                    className={clsx(\n                                        styles.iconButton,\n                                        styles.arrowButton,\n                                        styles.arrowButtonRight\n                                    )}\n                                    ref={nextArrowButtonRef}\n                                    aria-label={`Next ${carouselItemNoun}`}\n                                    data-testid=\"forward-btn\"\n                                    onClick={goToNextSlide}\n                                >\n                                    <ChevronRightIcon aria-hidden />\n                                </ClickableIcon>\n                            </>\n                        )}\n\n                        {!hideCounter && (\n                            <div className={styles.boxChip} aria-hidden=\"true\">\n                                <Typography.BodyXS\n                                    className={styles.chip}\n                                    weight=\"semibold\"\n                                    data-testid=\"carousel-counter\"\n                                >{`${currentSlide + 1}/${\n                                    items.length\n                                }`}</Typography.BodyXS>\n                            </div>\n                        )}\n                    </div>\n\n                    {!hideThumbnail && renderThumbnails()}\n                </div>\n                <div\n                    className={styles.topActionButtons}\n                    ref={topActionButtonsRef}\n                    data-has-file-info={hasFileInfo}\n                >\n                    {hasFileInfo && renderFileInfo()}\n                    {!hideMagnifier && !isCustomItem(currentItem) && (\n                        <ClickableIcon\n                            className={styles.iconButton}\n                            aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n                            onClick={handleMagnifier}\n                        >\n                            {zoom === 1 ? (\n                                <MagnifierPlusIcon aria-hidden />\n                            ) : (\n                                <MagnifierMinusIcon aria-hidden />\n                            )}\n                        </ClickableIcon>\n                    )}\n\n                    {onDelete && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonError\n                            )}\n                            aria-label={`Delete ${\n                                (isCustomItem(currentItem) &&\n                                    currentItem.itemLabel?.trim()) ||\n                                \"image\"\n                            }`}\n                            data-testid=\"delete-btn\"\n                            onClick={handleDelete}\n                        >\n                            <BinIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n\n                    <ClickableIcon\n                        className={styles.iconButton}\n                        aria-label={\n                            hasAnyItemLabel\n                                ? \"Close carousel\"\n                                : \"Close image carousel\"\n                        }\n                        onClick={onClose}\n                    >\n                        <CrossIcon aria-hidden />\n                    </ClickableIcon>\n                </div>\n            </div>\n        </ModalV2>\n    );\n};\n\n/**\n * A fullscreen modal carousel for browsing images and custom media items.\n *\n * Use to present a collection of images or custom content in an overlay with\n * navigation controls, zoom support, and an optional thumbnail strip.\n * The top info bar is rendered only when at least one item provides some file metadata.\n */\nexport const FullscreenImageCarousel = forwardRef<\n    FullscreenImageCarouselRef,\n    FullscreenImageCarouselProps\n>(Component);\n"],"names":["isCustomItem","item","type","Component","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","topActionButtonsRef","prevArrowButtonRef","nextArrowButtonRef","thumbnailContainerRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","useApplyStyle","styles.tokens","topActionButtons","insetTop","formatUnitValue","top","insetLeft","left","insetRight","right","arrowButton","thumbnailContainer","insetBottom","bottom","getItemAriaLabel","useCallback","index","itemTypeLabel","prefix","alt","positionLabel","length","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","current","focus","scrollIntoView","behavior","inline","handleZoom","state","scale","setDimension","src","height","width","oldState","Object","assign","getZoomRatio","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","resetTransform","prev","slide","clearAnnouncer","announce","_jsx","ModalV2","disableInitialFocus","_jsxs","className","styles.carouselModalContent","children","styles.imageGalleryContainer","styles.imageGalleryWrapper","styles.imageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","styles.imageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","styles.imageGallerySlide","styles.focusableImageRegion","tabIndex","renderContent","ImagePlaceholder","styles.slidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","StatefulImage","styles.slideImage","placeholder","fit","retrieveImageDimension","_Fragment","ClickableIcon","clsx","styles.iconButton","styles.arrowButton","styles.arrowButtonLeft","onClick","ChevronLeftIcon","styles.arrowButtonRight","ChevronRightIcon","styles.boxChip","Typography","BodyXS","styles.chip","weight","styles.thumbnailContainer","styles.thumbnailWrapper","thumbnailSrc","styles.thumbnailItemContainer","styles.thumbnailItem","styles.thumbnailImage","styles.topActionButtons","trimmedName","trimmedSize","styles.fileInfoTextWrapper","styles.fileInfoTextWrapperCentered","BodyBL","styles.fileInfoFileName","BodyMD","styles.fileInfoFileSize","renderFileInfo","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","styles.iconButtonError","BinIcon","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"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"}