@web-site-utilities/feedback 0.0.11 → 0.0.14

package/dist/common/components/Checkbox.d.ts

@@ -2,20 +2,21 @@ import React from 'react';
 import { Variants } from '../theme/ThemeProvider';
 import { CommonFieldProps } from '../types/CommonFieldProps';
 import { Options } from '../types/Option';
+import { Nullable } from "../types/Nullable";
 type CheckboxProps = {
     label: string;
     onSelect: (value: Array<string>) => void;
-    value: Array<string>;
+    value: Nullable<Array<string>>;
     id: string;
     colorVariant?: Variants | undefined;
     name: string;
 };
 export declare const Checkbox: (props: CheckboxProps) => React.DOMElement<{
-    selected: boolean;
+    selected: boolean | undefined;
     children: (React.DOMElement<{
         id: string;
         type: string;
-        selected: boolean;
+        selected: boolean | undefined;
         colorVariant: Variants | undefined;
         onChange: () => void;
         name: string;

package/dist/common/hooks/useStepper.d.ts

@@ -11,6 +11,7 @@ type UseStepperProps = {
 export declare const useStepper: (props: UseStepperProps) => {
     step: number;
     errors: FormError[];
+    isLastStep: boolean;
     onContinue: () => void;
     onBack: () => void;
 };

package/dist/fields/Field/Field.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { AllFields } from '@web-site-utilities/common/types/FormConfig';
+import { AllFields } from "@web-site-utilities/common/types/FormConfig";
 import { FormError } from '@web-site-utilities/common/types/FormError';
 import { Nullable } from '@web-site-utilities/common/types/Nullable';
+import { SelectProps } from "@web-site-utilities/common/components/Select";
 type Props = {
     type: AllFields['type'];
     fieldProps: AllFields;
@@ -13,6 +14,6 @@ type Props = {
     dataField: Nullable<string>;
 };
 export declare const Field: (props: Props) => React.DOMElement<{
-    children: React.FunctionComponentElement<import("@web-site-utilities/common/components/QuestionMatrix").QuestionMatrixProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Radio").RadioGroupProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Checkbox").CheckboxGroupProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/RangeSlide").RangeSlideProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Rating").RatingProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Textarea").TextareaProps> | null;
+    children: React.FunctionComponentElement<import("@web-site-utilities/common/components/QuestionMatrix").QuestionMatrixProps> | React.FunctionComponentElement<SelectProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Radio").RadioGroupProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Checkbox").CheckboxGroupProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/RangeSlide").RangeSlideProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Rating").RatingProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Textarea").TextareaProps> | null;
 }, Element>;
 export {};

package/dist/form/App.d.ts

@@ -8,5 +8,5 @@ export declare const App: (props: AppProps) => string | React.FunctionComponentE
     theme: typeof import("@web-site-utilities/common/theme/ThemeProvider").theme;
     selectedVariant?: import("@web-site-utilities/common/theme/ThemeProvider").Variants;
     children: React.ReactNode;
-}>;
+}> | null;
 export {};

package/dist/form/features/InPlaceForm/InPlaceForm.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { FormConfigTheme, InlineForm } from '@web-site-utilities/common/types/FormConfig';
-import { Nullable } from '@web-site-utilities/common/types/Nullable';
+import { FormConfigTheme, InlineForm } from "@web-site-utilities/common/types/FormConfig";
+import { Nullable } from "@web-site-utilities/common/types/Nullable";
 export type InPlaceFormProps = {
     formId: string;
     domainId: string;

package/dist/index.cjs.js

@@ -2934,6 +2934,7 @@ const useStepper = (props) => {
   return {
     step,
     errors,
+    isLastStep: step === props.stepsCount,
     onContinue,
     onBack
   };
@@ -2995,16 +2996,18 @@ const CheckboxRow = dt.label((props) => ({
   gap: "calc(var(--spacing) * 2)"
 }));
 const Checkbox = (props) => {
+  var _a;
   const id = React.useMemo(
     () => `${props.id}-${props.label.replace(/\s/g, "-").toLowerCase()}`,
     []
   );
   const onSelect = (value) => {
+    var _a2;
     props.onSelect(
-      props.value.includes(value) ? props.value.filter((v2) => v2 !== value) : [...props.value, value]
+      ((_a2 = props.value) == null ? void 0 : _a2.includes(value)) ? props.value.filter((v2) => v2 !== value) : [...props.value ?? [], value]
     );
   };
-  const isSelected = props.value.includes(id);
+  const isSelected = (_a = props.value) == null ? void 0 : _a.includes(id);
   return React.createElement(CheckboxRow, {
     selected: isSelected,
     children: [
@@ -3555,6 +3558,79 @@ const Textarea = (props) => {
     ]
   });
 };
+const StyledOption = dt.option(() => {
+  return {
+    borderRadius: "var(--radius-field)",
+    whiteSpace: "normal",
+    paddingBlock: ".375rem",
+    paddingInline: ".75rem",
+    transitionProperty: "color,background-color",
+    transitionDuration: ".2s",
+    transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
+  };
+});
+const SelectStyled = dt.select((props) => {
+  const color = useDefaultVariantColor(props.colorVariant);
+  return {
+    border: `var(--border-width)solid ${color}`,
+    backgroundColor: "var(--color-base-100)",
+    verticalAlign: "middle",
+    width: "clamp(3rem,30rem,100%)",
+    height: "calc(var(--size-field,.25rem)*10)",
+    touchAction: "manipulation",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    borderStartStartRadius: "var(--radius-field)",
+    borderStartEndRadius: "var(--radius-field)",
+    borderEndEndRadius: "var(--radius-field)",
+    borderEndStartRadius: "var(--radius-field)",
+    flexShrink: "1",
+    alignItems: "center",
+    gap: ".375rem",
+    paddingInline: ".75rem 1.75rem",
+    fontSize: ".875rem",
+    display: "inline-flex",
+    position: "relative",
+    overflow: "hidden"
+  };
+});
+const Select = (props) => {
+  const onChange = (e) => props.onChange(e.target.value);
+  return React.createElement("div", {
+    children: [
+      React.createElement(Typography, {
+        children: props.label,
+        variant: "section"
+      }),
+      React.createElement(SelectStyled, {
+        colorVariant: props.colorVariant,
+        value: props.value ?? null,
+        defaultChecked: false,
+        defaultValue: null,
+        onChange,
+        children: [
+          React.createElement(StyledOption, {
+            value: "",
+            selected: !props.value,
+            children: "Select an option",
+            key: ""
+          }),
+          props.options.map(
+            (o) => React.createElement(StyledOption, {
+              value: o.id,
+              selected: o.id === props.value,
+              children: o.label,
+              key: o.id
+            })
+          )
+        ]
+      }),
+      React.createElement(ErrorMessage, {
+        errors: props.errors
+      })
+    ]
+  });
+};
 const Div$1 = dt.div`
   width: 100%;
 `;
@@ -3614,6 +3690,13 @@ const Field = (props) => {
           max: 10
         });
       }
+      case "select": {
+        const fieldProps = props.fieldProps;
+        return React.createElement(Select, {
+          ...fieldProps,
+          ...commonFields
+        });
+      }
       case "radio-group": {
         const fieldProps = props.fieldProps;
         return React.createElement(RadioGroup, {
@@ -3632,7 +3715,8 @@ const Field = (props) => {
         const fieldProps = props.fieldProps;
         return React.createElement(RangeSlide, {
           ...fieldProps,
-          ...commonFields
+          ...commonFields,
+          initialValue: fieldProps.defaultValue ?? 0
         });
       }
       case "rating": {
@@ -3673,12 +3757,15 @@ const InPlaceForm = (props) => {
     []
   );
   const [maxHeight, setMaxHeight] = React.useState(null);
-  const onSetMaxHeight = React.useCallback((h) => {
-    setMaxHeight((stateHeight) => {
-      if (!stateHeight || stateHeight < h) return h;
-      return stateHeight;
-    });
-  }, [setMaxHeight, props.inlineForm.form.steps]);
+  const onSetMaxHeight = React.useCallback(
+    (h) => {
+      setMaxHeight((stateHeight) => {
+        if (!stateHeight || stateHeight < h) return h;
+        return stateHeight;
+      });
+    },
+    [setMaxHeight, props.inlineForm.form.steps]
+  );
   const populatedForm = useForm({
     form: props.inlineForm.form,
     formId: props.formId,
@@ -3724,7 +3811,7 @@ const InPlaceForm = (props) => {
       React.createElement(Footer$1, {
         children: [
           React.createElement(Button, {
-            children: "Back",
+            children: props.inlineForm.config.previousButtonText,
             disabled: stepper.step === 0,
             onClick: stepper.onBack
           }),
@@ -3733,7 +3820,7 @@ const InPlaceForm = (props) => {
             currentStepIndex: stepper.step
           }),
           React.createElement(Button, {
-            children: "Continue",
+            children: stepper.isLastStep ? props.inlineForm.config.submitButtonText : props.inlineForm.config.nextButtonText,
             onClick: stepper.onContinue
           })
         ]
@@ -3971,12 +4058,14 @@ const PopupForm = (props) => {
   });
 };
 const App = (props) => {
+  const [isClient, setIsClient] = React.useState(false);
   props.locale ?? "en-US";
   let { data, loading, error } = useRequest(
     () => getFormConfigMock({
       formId: props.formId
     })
   );
+  React.useEffect(() => setIsClient(true), []);
   const inPlaceForm = React.useMemo(() => {
     if (!(data == null ? void 0 : data.inlineForm)) return null;
     return React.createElement(InPlaceForm, {
@@ -3997,6 +4086,7 @@ const App = (props) => {
       popupForm: data.popupForm
     });
   }, [data == null ? void 0 : data.attributes.theme, data == null ? void 0 : data.domainId, data == null ? void 0 : data.inlineForm, props.formId]);
+  if (!isClient) return null;
   if (!data && loading) return "Loading...";
   if (!data || error) return error ? error.message : "Unknown error";
   return React.createElement(ThemeProvider, {
@@ -4005,79 +4095,6 @@ const App = (props) => {
     children: [inPlaceForm, popupForm]
   });
 };
-const StyledOption = dt.option(() => {
-  return {
-    borderRadius: "var(--radius-field)",
-    whiteSpace: "normal",
-    paddingBlock: ".375rem",
-    paddingInline: ".75rem",
-    transitionProperty: "color,background-color",
-    transitionDuration: ".2s",
-    transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
-  };
-});
-const SelectStyled = dt.select((props) => {
-  const color = useDefaultVariantColor(props.colorVariant);
-  return {
-    border: `var(--border-width)solid ${color}`,
-    backgroundColor: "var(--color-base-100)",
-    verticalAlign: "middle",
-    width: "clamp(3rem,30rem,100%)",
-    height: "calc(var(--size-field,.25rem)*10)",
-    touchAction: "manipulation",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-    borderStartStartRadius: "var(--radius-field)",
-    borderStartEndRadius: "var(--radius-field)",
-    borderEndEndRadius: "var(--radius-field)",
-    borderEndStartRadius: "var(--radius-field)",
-    flexShrink: "1",
-    alignItems: "center",
-    gap: ".375rem",
-    paddingInline: ".75rem 1.75rem",
-    fontSize: ".875rem",
-    display: "inline-flex",
-    position: "relative",
-    overflow: "hidden"
-  };
-});
-const Select = (props) => {
-  const onChange = (e) => props.onChange(e.target.value);
-  return React.createElement("div", {
-    children: [
-      React.createElement(Typography, {
-        children: props.label,
-        variant: "section"
-      }),
-      React.createElement(SelectStyled, {
-        colorVariant: props.colorVariant,
-        value: props.value ?? null,
-        defaultChecked: false,
-        defaultValue: null,
-        onChange,
-        children: [
-          React.createElement(StyledOption, {
-            value: "",
-            selected: !props.value,
-            children: "Select an option",
-            key: ""
-          }),
-          props.options.map(
-            (o) => React.createElement(StyledOption, {
-              value: o.id,
-              selected: o.id === props.value,
-              children: o.label,
-              key: o.id
-            })
-          )
-        ]
-      }),
-      React.createElement(ErrorMessage, {
-        errors: props.errors
-      })
-    ]
-  });
-};
 const initiateFeedbackModule = (options) => {
   if (!options) {
     console.error("options must be provided. Feedback module deactivated");

package/dist/index.es.js

@@ -2932,6 +2932,7 @@ const useStepper = (props) => {
   return {
     step,
     errors,
+    isLastStep: step === props.stepsCount,
     onContinue,
     onBack
   };
@@ -2993,16 +2994,18 @@ const CheckboxRow = dt.label((props) => ({
   gap: "calc(var(--spacing) * 2)"
 }));
 const Checkbox = (props) => {
+  var _a;
   const id = useMemo(
     () => `${props.id}-${props.label.replace(/\s/g, "-").toLowerCase()}`,
     []
   );
   const onSelect = (value) => {
+    var _a2;
     props.onSelect(
-      props.value.includes(value) ? props.value.filter((v2) => v2 !== value) : [...props.value, value]
+      ((_a2 = props.value) == null ? void 0 : _a2.includes(value)) ? props.value.filter((v2) => v2 !== value) : [...props.value ?? [], value]
     );
   };
-  const isSelected = props.value.includes(id);
+  const isSelected = (_a = props.value) == null ? void 0 : _a.includes(id);
   return React.createElement(CheckboxRow, {
     selected: isSelected,
     children: [
@@ -3553,6 +3556,79 @@ const Textarea = (props) => {
     ]
   });
 };
+const StyledOption = dt.option(() => {
+  return {
+    borderRadius: "var(--radius-field)",
+    whiteSpace: "normal",
+    paddingBlock: ".375rem",
+    paddingInline: ".75rem",
+    transitionProperty: "color,background-color",
+    transitionDuration: ".2s",
+    transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
+  };
+});
+const SelectStyled = dt.select((props) => {
+  const color = useDefaultVariantColor(props.colorVariant);
+  return {
+    border: `var(--border-width)solid ${color}`,
+    backgroundColor: "var(--color-base-100)",
+    verticalAlign: "middle",
+    width: "clamp(3rem,30rem,100%)",
+    height: "calc(var(--size-field,.25rem)*10)",
+    touchAction: "manipulation",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    borderStartStartRadius: "var(--radius-field)",
+    borderStartEndRadius: "var(--radius-field)",
+    borderEndEndRadius: "var(--radius-field)",
+    borderEndStartRadius: "var(--radius-field)",
+    flexShrink: "1",
+    alignItems: "center",
+    gap: ".375rem",
+    paddingInline: ".75rem 1.75rem",
+    fontSize: ".875rem",
+    display: "inline-flex",
+    position: "relative",
+    overflow: "hidden"
+  };
+});
+const Select = (props) => {
+  const onChange = (e) => props.onChange(e.target.value);
+  return React.createElement("div", {
+    children: [
+      React.createElement(Typography, {
+        children: props.label,
+        variant: "section"
+      }),
+      React.createElement(SelectStyled, {
+        colorVariant: props.colorVariant,
+        value: props.value ?? null,
+        defaultChecked: false,
+        defaultValue: null,
+        onChange,
+        children: [
+          React.createElement(StyledOption, {
+            value: "",
+            selected: !props.value,
+            children: "Select an option",
+            key: ""
+          }),
+          props.options.map(
+            (o) => React.createElement(StyledOption, {
+              value: o.id,
+              selected: o.id === props.value,
+              children: o.label,
+              key: o.id
+            })
+          )
+        ]
+      }),
+      React.createElement(ErrorMessage, {
+        errors: props.errors
+      })
+    ]
+  });
+};
 const Div$1 = dt.div`
   width: 100%;
 `;
@@ -3612,6 +3688,13 @@ const Field = (props) => {
           max: 10
         });
       }
+      case "select": {
+        const fieldProps = props.fieldProps;
+        return React.createElement(Select, {
+          ...fieldProps,
+          ...commonFields
+        });
+      }
       case "radio-group": {
         const fieldProps = props.fieldProps;
         return React.createElement(RadioGroup, {
@@ -3630,7 +3713,8 @@ const Field = (props) => {
         const fieldProps = props.fieldProps;
         return React.createElement(RangeSlide, {
           ...fieldProps,
-          ...commonFields
+          ...commonFields,
+          initialValue: fieldProps.defaultValue ?? 0
         });
       }
       case "rating": {
@@ -3671,12 +3755,15 @@ const InPlaceForm = (props) => {
     []
   );
   const [maxHeight, setMaxHeight] = React.useState(null);
-  const onSetMaxHeight = useCallback((h) => {
-    setMaxHeight((stateHeight) => {
-      if (!stateHeight || stateHeight < h) return h;
-      return stateHeight;
-    });
-  }, [setMaxHeight, props.inlineForm.form.steps]);
+  const onSetMaxHeight = useCallback(
+    (h) => {
+      setMaxHeight((stateHeight) => {
+        if (!stateHeight || stateHeight < h) return h;
+        return stateHeight;
+      });
+    },
+    [setMaxHeight, props.inlineForm.form.steps]
+  );
   const populatedForm = useForm({
     form: props.inlineForm.form,
     formId: props.formId,
@@ -3722,7 +3809,7 @@ const InPlaceForm = (props) => {
       React.createElement(Footer$1, {
         children: [
           React.createElement(Button, {
-            children: "Back",
+            children: props.inlineForm.config.previousButtonText,
             disabled: stepper.step === 0,
             onClick: stepper.onBack
           }),
@@ -3731,7 +3818,7 @@ const InPlaceForm = (props) => {
             currentStepIndex: stepper.step
           }),
           React.createElement(Button, {
-            children: "Continue",
+            children: stepper.isLastStep ? props.inlineForm.config.submitButtonText : props.inlineForm.config.nextButtonText,
             onClick: stepper.onContinue
           })
         ]
@@ -3969,12 +4056,14 @@ const PopupForm = (props) => {
   });
 };
 const App = (props) => {
+  const [isClient, setIsClient] = React.useState(false);
   props.locale ?? "en-US";
   let { data, loading, error } = useRequest(
     () => getFormConfigMock({
       formId: props.formId
     })
   );
+  React.useEffect(() => setIsClient(true), []);
   const inPlaceForm = useMemo(() => {
     if (!(data == null ? void 0 : data.inlineForm)) return null;
     return React.createElement(InPlaceForm, {
@@ -3995,6 +4084,7 @@ const App = (props) => {
       popupForm: data.popupForm
     });
   }, [data == null ? void 0 : data.attributes.theme, data == null ? void 0 : data.domainId, data == null ? void 0 : data.inlineForm, props.formId]);
+  if (!isClient) return null;
   if (!data && loading) return "Loading...";
   if (!data || error) return error ? error.message : "Unknown error";
   return React.createElement(ThemeProvider, {
@@ -4003,79 +4093,6 @@ const App = (props) => {
     children: [inPlaceForm, popupForm]
   });
 };
-const StyledOption = dt.option(() => {
-  return {
-    borderRadius: "var(--radius-field)",
-    whiteSpace: "normal",
-    paddingBlock: ".375rem",
-    paddingInline: ".75rem",
-    transitionProperty: "color,background-color",
-    transitionDuration: ".2s",
-    transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
-  };
-});
-const SelectStyled = dt.select((props) => {
-  const color = useDefaultVariantColor(props.colorVariant);
-  return {
-    border: `var(--border-width)solid ${color}`,
-    backgroundColor: "var(--color-base-100)",
-    verticalAlign: "middle",
-    width: "clamp(3rem,30rem,100%)",
-    height: "calc(var(--size-field,.25rem)*10)",
-    touchAction: "manipulation",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-    borderStartStartRadius: "var(--radius-field)",
-    borderStartEndRadius: "var(--radius-field)",
-    borderEndEndRadius: "var(--radius-field)",
-    borderEndStartRadius: "var(--radius-field)",
-    flexShrink: "1",
-    alignItems: "center",
-    gap: ".375rem",
-    paddingInline: ".75rem 1.75rem",
-    fontSize: ".875rem",
-    display: "inline-flex",
-    position: "relative",
-    overflow: "hidden"
-  };
-});
-const Select = (props) => {
-  const onChange = (e) => props.onChange(e.target.value);
-  return React.createElement("div", {
-    children: [
-      React.createElement(Typography, {
-        children: props.label,
-        variant: "section"
-      }),
-      React.createElement(SelectStyled, {
-        colorVariant: props.colorVariant,
-        value: props.value ?? null,
-        defaultChecked: false,
-        defaultValue: null,
-        onChange,
-        children: [
-          React.createElement(StyledOption, {
-            value: "",
-            selected: !props.value,
-            children: "Select an option",
-            key: ""
-          }),
-          props.options.map(
-            (o) => React.createElement(StyledOption, {
-              value: o.id,
-              selected: o.id === props.value,
-              children: o.label,
-              key: o.id
-            })
-          )
-        ]
-      }),
-      React.createElement(ErrorMessage, {
-        errors: props.errors
-      })
-    ]
-  });
-};
 const initiateFeedbackModule = (options) => {
   if (!options) {
     console.error("options must be provided. Feedback module deactivated");

package/dist/index.iife.js

@@ -2932,6 +2932,7 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
     return {
       step,
       errors,
+      isLastStep: step === props.stepsCount,
       onContinue,
       onBack
     };
@@ -2993,16 +2994,18 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
     gap: "calc(var(--spacing) * 2)"
   }));
   const Checkbox = (props) => {
+    var _a;
     const id = React2.useMemo(
       () => `${props.id}-${props.label.replace(/\s/g, "-").toLowerCase()}`,
       []
     );
     const onSelect = (value) => {
+      var _a2;
       props.onSelect(
-        props.value.includes(value) ? props.value.filter((v2) => v2 !== value) : [...props.value, value]
+        ((_a2 = props.value) == null ? void 0 : _a2.includes(value)) ? props.value.filter((v2) => v2 !== value) : [...props.value ?? [], value]
       );
     };
-    const isSelected = props.value.includes(id);
+    const isSelected = (_a = props.value) == null ? void 0 : _a.includes(id);
     return React2.createElement(CheckboxRow, {
       selected: isSelected,
       children: [
@@ -3553,6 +3556,79 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
       ]
     });
   };
+  const StyledOption = dt.option(() => {
+    return {
+      borderRadius: "var(--radius-field)",
+      whiteSpace: "normal",
+      paddingBlock: ".375rem",
+      paddingInline: ".75rem",
+      transitionProperty: "color,background-color",
+      transitionDuration: ".2s",
+      transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
+    };
+  });
+  const SelectStyled = dt.select((props) => {
+    const color = useDefaultVariantColor(props.colorVariant);
+    return {
+      border: `var(--border-width)solid ${color}`,
+      backgroundColor: "var(--color-base-100)",
+      verticalAlign: "middle",
+      width: "clamp(3rem,30rem,100%)",
+      height: "calc(var(--size-field,.25rem)*10)",
+      touchAction: "manipulation",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      borderStartStartRadius: "var(--radius-field)",
+      borderStartEndRadius: "var(--radius-field)",
+      borderEndEndRadius: "var(--radius-field)",
+      borderEndStartRadius: "var(--radius-field)",
+      flexShrink: "1",
+      alignItems: "center",
+      gap: ".375rem",
+      paddingInline: ".75rem 1.75rem",
+      fontSize: ".875rem",
+      display: "inline-flex",
+      position: "relative",
+      overflow: "hidden"
+    };
+  });
+  const Select = (props) => {
+    const onChange = (e) => props.onChange(e.target.value);
+    return React2.createElement("div", {
+      children: [
+        React2.createElement(Typography, {
+          children: props.label,
+          variant: "section"
+        }),
+        React2.createElement(SelectStyled, {
+          colorVariant: props.colorVariant,
+          value: props.value ?? null,
+          defaultChecked: false,
+          defaultValue: null,
+          onChange,
+          children: [
+            React2.createElement(StyledOption, {
+              value: "",
+              selected: !props.value,
+              children: "Select an option",
+              key: ""
+            }),
+            props.options.map(
+              (o) => React2.createElement(StyledOption, {
+                value: o.id,
+                selected: o.id === props.value,
+                children: o.label,
+                key: o.id
+              })
+            )
+          ]
+        }),
+        React2.createElement(ErrorMessage, {
+          errors: props.errors
+        })
+      ]
+    });
+  };
   const Div$1 = dt.div`
   width: 100%;
 `;
@@ -3612,6 +3688,13 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
             max: 10
           });
         }
+        case "select": {
+          const fieldProps = props.fieldProps;
+          return React2.createElement(Select, {
+            ...fieldProps,
+            ...commonFields
+          });
+        }
         case "radio-group": {
           const fieldProps = props.fieldProps;
           return React2.createElement(RadioGroup, {
@@ -3630,7 +3713,8 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
           const fieldProps = props.fieldProps;
           return React2.createElement(RangeSlide, {
             ...fieldProps,
-            ...commonFields
+            ...commonFields,
+            initialValue: fieldProps.defaultValue ?? 0
           });
         }
         case "rating": {
@@ -3671,12 +3755,15 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
       []
     );
     const [maxHeight, setMaxHeight] = React2.useState(null);
-    const onSetMaxHeight = React2.useCallback((h) => {
-      setMaxHeight((stateHeight) => {
-        if (!stateHeight || stateHeight < h) return h;
-        return stateHeight;
-      });
-    }, [setMaxHeight, props.inlineForm.form.steps]);
+    const onSetMaxHeight = React2.useCallback(
+      (h) => {
+        setMaxHeight((stateHeight) => {
+          if (!stateHeight || stateHeight < h) return h;
+          return stateHeight;
+        });
+      },
+      [setMaxHeight, props.inlineForm.form.steps]
+    );
     const populatedForm = useForm({
       form: props.inlineForm.form,
       formId: props.formId,
@@ -3722,7 +3809,7 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
         React2.createElement(Footer$1, {
           children: [
             React2.createElement(Button, {
-              children: "Back",
+              children: props.inlineForm.config.previousButtonText,
               disabled: stepper.step === 0,
               onClick: stepper.onBack
             }),
@@ -3731,7 +3818,7 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
               currentStepIndex: stepper.step
             }),
             React2.createElement(Button, {
-              children: "Continue",
+              children: stepper.isLastStep ? props.inlineForm.config.submitButtonText : props.inlineForm.config.nextButtonText,
               onClick: stepper.onContinue
             })
           ]
@@ -3969,12 +4056,14 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
     });
   };
   const App = (props) => {
+    const [isClient, setIsClient] = React2.useState(false);
     props.locale ?? "en-US";
     let { data, loading, error } = useRequest(
       () => getFormConfigMock({
         formId: props.formId
       })
     );
+    React2.useEffect(() => setIsClient(true), []);
     const inPlaceForm = React2.useMemo(() => {
       if (!(data == null ? void 0 : data.inlineForm)) return null;
       return React2.createElement(InPlaceForm, {
@@ -3995,6 +4084,7 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
         popupForm: data.popupForm
       });
     }, [data == null ? void 0 : data.attributes.theme, data == null ? void 0 : data.domainId, data == null ? void 0 : data.inlineForm, props.formId]);
+    if (!isClient) return null;
     if (!data && loading) return "Loading...";
     if (!data || error) return error ? error.message : "Unknown error";
     return React2.createElement(ThemeProvider, {
@@ -4003,79 +4093,6 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
       children: [inPlaceForm, popupForm]
     });
   };
-  const StyledOption = dt.option(() => {
-    return {
-      borderRadius: "var(--radius-field)",
-      whiteSpace: "normal",
-      paddingBlock: ".375rem",
-      paddingInline: ".75rem",
-      transitionProperty: "color,background-color",
-      transitionDuration: ".2s",
-      transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
-    };
-  });
-  const SelectStyled = dt.select((props) => {
-    const color = useDefaultVariantColor(props.colorVariant);
-    return {
-      border: `var(--border-width)solid ${color}`,
-      backgroundColor: "var(--color-base-100)",
-      verticalAlign: "middle",
-      width: "clamp(3rem,30rem,100%)",
-      height: "calc(var(--size-field,.25rem)*10)",
-      touchAction: "manipulation",
-      whiteSpace: "nowrap",
-      textOverflow: "ellipsis",
-      borderStartStartRadius: "var(--radius-field)",
-      borderStartEndRadius: "var(--radius-field)",
-      borderEndEndRadius: "var(--radius-field)",
-      borderEndStartRadius: "var(--radius-field)",
-      flexShrink: "1",
-      alignItems: "center",
-      gap: ".375rem",
-      paddingInline: ".75rem 1.75rem",
-      fontSize: ".875rem",
-      display: "inline-flex",
-      position: "relative",
-      overflow: "hidden"
-    };
-  });
-  const Select = (props) => {
-    const onChange = (e) => props.onChange(e.target.value);
-    return React2.createElement("div", {
-      children: [
-        React2.createElement(Typography, {
-          children: props.label,
-          variant: "section"
-        }),
-        React2.createElement(SelectStyled, {
-          colorVariant: props.colorVariant,
-          value: props.value ?? null,
-          defaultChecked: false,
-          defaultValue: null,
-          onChange,
-          children: [
-            React2.createElement(StyledOption, {
-              value: "",
-              selected: !props.value,
-              children: "Select an option",
-              key: ""
-            }),
-            props.options.map(
-              (o) => React2.createElement(StyledOption, {
-                value: o.id,
-                selected: o.id === props.value,
-                children: o.label,
-                key: o.id
-              })
-            )
-          ]
-        }),
-        React2.createElement(ErrorMessage, {
-          errors: props.errors
-        })
-      ]
-    });
-  };
   const initiateFeedbackModule = (options) => {
     if (!options) {
       console.error("options must be provided. Feedback module deactivated");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-site-utilities/feedback",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "workspaces": [
     "src/**",
     "examples/**"