@opengovsg/confetti 0.0.3 → 0.0.5

package/build/confetti.css

@@ -1,7 +1,7 @@
 :root {
   --confetti-font-scale: 16px;
   /* Define CSS Variables with defaults */
-  --confetti-box-padding: 20px 24px;
+  --confetti-box-padding: 24px;
   --confetti-max-width: 300px;
   --confetti-z-index: 2147483647;
   --confetti-border-color: #e4e4e7;
@@ -37,8 +37,8 @@
 }
 
 .confetti-dialog {
-  width: 100%;
-  max-width: var(--confetti-max-width);
+  width: var(--confetti-max-width);
+  max-width: 100%;
   background: transparent;
   position: relative;
 
@@ -80,7 +80,7 @@
 .confetti {
   font-family: var(--confetti-font-family);
   overflow: hidden;
-  padding: 24px;
+  padding: var(--confetti-box-padding);
   border-radius: var(--confetti-border-radius);
   border: 1px solid var(--confetti-border-color);
   display: flex;
@@ -179,6 +179,45 @@
     }
   }
 
+  .cf-response-choices-tag {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .cf-tag-input {
+    display: none;
+
+    &[data-visible='true'] {
+      display: inline;
+    }
+  }
+
+  .cf-tag {
+    border-radius: 8px;
+    padding: 6px 12px;
+    font-weight: 500;
+    font-size: 0.875em;
+    transition:
+      background 200ms ease-out,
+      border-color 200ms ease-out;
+
+    &[data-selected='true'] {
+      background: var(--confetti-indicator-active-bg-color);
+      border-color: var(--confetti-indicator-active-bg-color);
+      color: var(--confetti-indicator-active-dot-color);
+    }
+
+    &[data-focus-visible='true'] {
+      outline: 2px solid var(--confetti-outline-color);
+      outline-offset: 2px;
+    }
+
+    &:active {
+      scale: 0.96;
+    }
+  }
+
   .cf-radio,
   .cf-checkbox {
     cursor: pointer;
@@ -335,6 +374,11 @@
         font-weight: 500;
       }
 
+      .cf-label-optional {
+        font-weight: 400;
+        color: var(--confetti-text-subtle-color);
+      }
+
       .cf-description {
         font-size: 0.875em;
         line-height: 20px;
@@ -356,10 +400,17 @@
     gap: 4px;
   }
 
+  .cf-rating-tiff {
+    overflow: hidden;
+    border-radius: 100%;
+  }
+
+  .cf-rating-tiff,
   .cf-rating-emoji {
     opacity: 0.5;
   }
 
+  .cf-rating-display-tiff,
   .cf-rating-display-star,
   .cf-rating-display-emoji {
     display: grid;
@@ -367,6 +418,7 @@
     justify-content: space-between;
     gap: 8px;
 
+    .cf-rating-tiff,
     .cf-rating-emoji,
     .cf-rating-star {
       font-size: 1em;

package/build/index.d.ts

@@ -1,169 +1,8 @@
+import { a as MultiSelectQuestionProperties, c as StatementQuestionProperties, i as PublicGetSurveyOutput, l as TextQuestionProperties, n as ConfettiState, o as RatingQuestionProperties, r as Question, s as SingleSelectQuestionProperties, t as Answer } from "./types-qVyTr8wu.js";
 import * as react0 from "react";
 import { HTMLAttributes, PropsWithChildren } from "react";
-import { z } from "zod/v4/mini";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
-//#region ../validators/src/questions/properties.d.ts
-
-declare const ratingQuestionSchema: z.ZodMiniObject<{
-  type: z.ZodMiniLiteral<"rating">;
-  scale: z.ZodMiniNumber<number>;
-  labels: z.ZodMiniOptional<z.ZodMiniObject<{
-    lower: z.ZodMiniString<string>;
-    upper: z.ZodMiniString<string>;
-  }, z.core.$strip>>;
-  display: z.ZodMiniOptional<z.ZodMiniLiteral<"number" | "star" | "emoji">>;
-}, z.core.$strip>;
-type RatingQuestion = z.infer<typeof ratingQuestionSchema>;
-declare const textQuestionSchema: z.ZodMiniObject<{
-  type: z.ZodMiniLiteral<"open-ended">;
-  max: z.ZodMiniNumber<number>;
-}, z.core.$strip>;
-type TextQuestion = z.infer<typeof textQuestionSchema>;
-declare const singleSelectQuestionSchema: z.ZodMiniObject<{
-  type: z.ZodMiniLiteral<"single-select">;
-  options: z.ZodMiniArray<z.ZodMiniObject<{
-    value: z.ZodMiniString<string>;
-    description: z.ZodMiniOptional<z.ZodMiniString<string>>;
-  }, z.core.$strip>>;
-  editable: z.ZodMiniNullable<z.ZodMiniObject<{
-    label: z.ZodMiniString<string>;
-    max: z.ZodMiniNumber<number>;
-    description: z.ZodMiniOptional<z.ZodMiniString<string>>;
-  }, z.core.$strip>>;
-}, z.core.$strip>;
-type SingleSelectQuestion = z.infer<typeof singleSelectQuestionSchema>;
-declare const multiSelectQuestionSchema: z.ZodMiniObject<{
-  type: z.ZodMiniLiteral<"multi-select">;
-  options: z.ZodMiniArray<z.ZodMiniObject<{
-    value: z.ZodMiniString<string>;
-    description: z.ZodMiniOptional<z.ZodMiniString<string>>;
-  }, z.core.$strip>>;
-  editable: z.ZodMiniNullable<z.ZodMiniObject<{
-    label: z.ZodMiniString<string>;
-    max: z.ZodMiniNumber<number>;
-    description: z.ZodMiniOptional<z.ZodMiniString<string>>;
-  }, z.core.$strip>>;
-  max: z.ZodMiniOptional<z.ZodMiniNumber<number>>;
-}, z.core.$strip>;
-type MultiSelectQuestion = z.infer<typeof multiSelectQuestionSchema>;
-//#endregion
-//#region ../validators/src/survey.d.ts
-declare const publicGetSurveyOutputSchema: z.ZodMiniObject<{
-  title: z.ZodMiniString<string>;
-  description: z.ZodMiniNullable<z.ZodMiniString<string>>;
-  questions: z.ZodMiniArray<z.ZodMiniObject<{
-    id: z.ZodMiniString<string>;
-    title: z.ZodMiniString<string>;
-    description: z.ZodMiniNullable<z.ZodMiniString<string>>;
-    position: z.ZodMiniNumber<number>;
-    required: z.ZodMiniBoolean<boolean>;
-    properties: z.ZodMiniDiscriminatedUnion<[z.ZodMiniObject<{
-      type: z.ZodMiniLiteral<"rating">;
-      scale: z.ZodMiniNumber<number>;
-      labels: z.ZodMiniOptional<z.ZodMiniObject<{
-        lower: z.ZodMiniString<string>;
-        upper: z.ZodMiniString<string>;
-      }, z.core.$strip>>;
-      display: z.ZodMiniOptional<z.ZodMiniLiteral<"number" | "star" | "emoji">>;
-    }, z.core.$strip>, z.ZodMiniObject<{
-      type: z.ZodMiniLiteral<"single-select">;
-      options: z.ZodMiniArray<z.ZodMiniObject<{
-        value: z.ZodMiniString<string>;
-        description: z.ZodMiniOptional<z.ZodMiniString<string>>;
-      }, z.core.$strip>>;
-      editable: z.ZodMiniNullable<z.ZodMiniObject<{
-        label: z.ZodMiniString<string>;
-        max: z.ZodMiniNumber<number>;
-        description: z.ZodMiniOptional<z.ZodMiniString<string>>;
-      }, z.core.$strip>>;
-    }, z.core.$strip>, z.ZodMiniObject<{
-      type: z.ZodMiniLiteral<"open-ended">;
-      max: z.ZodMiniNumber<number>;
-    }, z.core.$strip>, z.ZodMiniObject<{
-      type: z.ZodMiniLiteral<"multi-select">;
-      options: z.ZodMiniArray<z.ZodMiniObject<{
-        value: z.ZodMiniString<string>;
-        description: z.ZodMiniOptional<z.ZodMiniString<string>>;
-      }, z.core.$strip>>;
-      editable: z.ZodMiniNullable<z.ZodMiniObject<{
-        label: z.ZodMiniString<string>;
-        max: z.ZodMiniNumber<number>;
-        description: z.ZodMiniOptional<z.ZodMiniString<string>>;
-      }, z.core.$strip>>;
-      max: z.ZodMiniOptional<z.ZodMiniNumber<number>>;
-    }, z.core.$strip>], "type">;
-    routingLogic: z.ZodMiniDiscriminatedUnion<[z.ZodMiniObject<{
-      type: z.ZodMiniLiteral<"always">;
-      target: z.ZodMiniDiscriminatedUnion<[z.ZodMiniObject<{
-        type: z.ZodMiniLiteral<"next">;
-      }, z.core.$strip>, z.ZodMiniObject<{
-        type: z.ZodMiniLiteral<"jump">;
-        target: z.ZodMiniNumber<number>;
-      }, z.core.$strip>, z.ZodMiniObject<{
-        type: z.ZodMiniLiteral<"end">;
-      }, z.core.$strip>], "type">;
-    }, z.core.$strip>, z.ZodMiniObject<{
-      type: z.ZodMiniLiteral<"switch">;
-      cases: z.ZodMiniArray<z.ZodMiniObject<{
-        type: z.ZodMiniLiteral<"binary-operator">;
-        operator: z.ZodMiniUnion<readonly [z.ZodMiniLiteral<"equal">, z.ZodMiniLiteral<"not-equal">, z.ZodMiniLiteral<"greater">, z.ZodMiniLiteral<"greater-or-equal">, z.ZodMiniLiteral<"less">, z.ZodMiniLiteral<"less-or-equal">, z.ZodMiniLiteral<"contains">, z.ZodMiniLiteral<"not-contains">]>;
-        value: z.ZodMiniObject<{
-          type: z.ZodMiniLiteral<"value">;
-          value: z.ZodMiniUnion<readonly [z.ZodMiniString<string>, z.ZodMiniNumber<number>]>;
-        }, z.core.$strip>;
-        target: z.ZodMiniDiscriminatedUnion<[z.ZodMiniObject<{
-          type: z.ZodMiniLiteral<"next">;
-        }, z.core.$strip>, z.ZodMiniObject<{
-          type: z.ZodMiniLiteral<"jump">;
-          target: z.ZodMiniNumber<number>;
-        }, z.core.$strip>, z.ZodMiniObject<{
-          type: z.ZodMiniLiteral<"end">;
-        }, z.core.$strip>], "type">;
-      }, z.core.$strip>>;
-      default: z.ZodMiniDiscriminatedUnion<[z.ZodMiniObject<{
-        type: z.ZodMiniLiteral<"next">;
-      }, z.core.$strip>, z.ZodMiniObject<{
-        type: z.ZodMiniLiteral<"jump">;
-        target: z.ZodMiniNumber<number>;
-      }, z.core.$strip>, z.ZodMiniObject<{
-        type: z.ZodMiniLiteral<"end">;
-      }, z.core.$strip>], "type">;
-    }, z.core.$strip>], "type">;
-  }, z.core.$strip>>;
-  confirmation: z.ZodMiniObject<{
-    title: z.ZodMiniString<string>;
-    description: z.ZodMiniString<string>;
-    buttonText: z.ZodMiniString<string>;
-  }, z.core.$strip>;
-}, z.core.$strip>;
-type PublicGetSurveyOutput = z.infer<typeof publicGetSurveyOutputSchema>;
-//#endregion
-//#region src/core/types.d.ts
-type Question = {
-  visible: boolean;
-  error?: string;
-} & PublicGetSurveyOutput['questions'][number];
-type Answer = string | number | string[] | undefined;
-interface ConfettiState {
-  questions: Question[];
-  current: number;
-  update: ({
-    question,
-    answer
-  }: {
-    question: number;
-    answer: Answer;
-  }) => {
-    next?: number;
-    error?: string;
-  };
-  submit: () => void;
-  isCompleted: boolean;
-  isSubmitted: boolean;
-  errors: Record<Question['id'], string>;
-}
-//#endregion
 //#region src/core/ConfettiController.d.ts
 interface ConfettiControllerProps {
   children: (props: ConfettiState) => React.ReactElement;
@@ -180,7 +19,7 @@ declare const ConfettiController: ({
   shouldAutoSubmit,
   onFinished,
   children
-}: ConfettiControllerProps) => react_jsx_runtime3.JSX.Element;
+}: ConfettiControllerProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/core/ConfettiProvider.d.ts
 interface ConfettiContextValue {
@@ -214,7 +53,7 @@ declare const ConfettiProvider: ({
   metadata,
   isSurveyVisible: isSurveyVisibleInput,
   apiBaseUrl
-}: ConfettiProviderProps) => react_jsx_runtime3.JSX.Element | null;
+}: ConfettiProviderProps) => react_jsx_runtime2.JSX.Element | null;
 declare const useConfetti: () => ConfettiContextValue;
 //#endregion
 //#region src/components/Confetti.d.ts
@@ -224,7 +63,7 @@ declare const Confetti: ({
   onFinished,
   shouldAutoSubmit,
   ...props
-}: ConfettiProps & Pick<ConfettiControllerProps, "children" | "shouldAutoSubmit">) => react_jsx_runtime3.JSX.Element;
+}: ConfettiProps & Pick<ConfettiControllerProps, "children" | "shouldAutoSubmit">) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/ThankYouMessage.d.ts
 interface ThankYouMessageProps {
@@ -241,7 +80,7 @@ declare const ThankYouMessage: ({
   title,
   description,
   classNames
-}: ThankYouMessageProps) => react_jsx_runtime3.JSX.Element | null;
+}: ThankYouMessageProps) => react_jsx_runtime2.JSX.Element | null;
 //#endregion
 //#region src/components/container/PopoverContainer.d.ts
 interface PopoverContainerProps {
@@ -263,7 +102,7 @@ declare const PopoverContainer: ({
   containerProps,
   onDismiss,
   closeOnFinishMs
-}: PopoverContainerProps) => react_jsx_runtime3.JSX.Element;
+}: PopoverContainerProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/questions/types.d.ts
 type Question$1 = PublicGetSurveyOutput['questions'][number];
@@ -286,16 +125,17 @@ declare const SurveyQuestionFactory: ({
   question,
   onChange,
   error
-}: SurveyQuestionFactoryProps) => react_jsx_runtime3.JSX.Element;
+}: SurveyQuestionFactoryProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/questions/Rating.d.ts
 interface RatingProps extends BaseFieldProps {
-  properties: RatingQuestion;
+  properties: RatingQuestionProperties;
   classNames?: {
     question?: string;
     header?: string;
     title?: string;
     description?: string;
+    optionalLabel?: string;
     ratingSection?: string;
     ratingDisplay?: string;
     ratingText?: string;
@@ -307,6 +147,7 @@ interface RatingProps extends BaseFieldProps {
     ratingNumber?: string;
     ratingDisplayEmoji?: string;
     ratingEmoji?: string;
+    ratingTiff?: string;
     error?: string;
   };
 }
@@ -319,15 +160,16 @@ declare const Rating: ({
   id,
   error,
   required
-}: RatingProps) => react_jsx_runtime3.JSX.Element;
+}: RatingProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/questions/FreeText.d.ts
 interface FreeTextProps extends BaseFieldProps {
-  properties: TextQuestion;
+  properties: TextQuestionProperties;
   classNames?: {
     question?: string;
     header?: string;
     title?: string;
+    optionalLabel?: string;
     description?: string;
     textarea?: string;
     error?: string;
@@ -342,17 +184,18 @@ declare const FreeText: ({
   classNames,
   required,
   error
-}: FreeTextProps) => react_jsx_runtime3.JSX.Element;
+}: FreeTextProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/questions/SingleChoice.d.ts
 interface SingleChoiceProps extends BaseFieldProps {
-  properties: SingleSelectQuestion;
+  properties: SingleSelectQuestionProperties;
   classNames?: {
     question?: string;
     header?: string;
     label?: string;
     title?: string;
     description?: string;
+    optionalLabel?: string;
     group?: string;
     radio?: string;
     indicator?: string;
@@ -371,20 +214,23 @@ declare const SingleChoice: ({
   id,
   required,
   error
-}: SingleChoiceProps) => react_jsx_runtime3.JSX.Element;
+}: SingleChoiceProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/questions/MultiChoice.d.ts
 interface MultiChoiceProps extends BaseFieldProps {
-  properties: MultiSelectQuestion;
+  properties: MultiSelectQuestionProperties;
   classNames?: {
     question?: string;
     header?: string;
     label?: string;
     title?: string;
     description?: string;
+    optionalLabel?: string;
     choiceDescription?: string;
     group?: string;
     checkbox?: string;
+    tag?: string;
+    tagLabel?: string;
     indicator?: string;
     svg?: string;
     othersChoice?: string;
@@ -401,7 +247,25 @@ declare const MultiChoice: ({
   id,
   required,
   error
-}: MultiChoiceProps) => react_jsx_runtime3.JSX.Element;
+}: MultiChoiceProps) => react_jsx_runtime2.JSX.Element;
+//#endregion
+//#region src/components/questions/Statement.d.ts
+interface StatementProps extends BaseFieldProps {
+  properties: StatementQuestionProperties;
+  classNames?: {
+    question?: string;
+    header?: string;
+    title?: string;
+    description?: string;
+    ctaButton?: string;
+  };
+}
+declare const Statement: ({
+  properties: _properties,
+  title,
+  description,
+  classNames
+}: StatementProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/presentation/Flow.d.ts
 type ChildField = (_: {
@@ -420,7 +284,7 @@ declare const Flow: ({
   children,
   question,
   isLastQuestion
-}: FlowProps) => react_jsx_runtime3.JSX.Element;
+}: FlowProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/presentation/Embed.d.ts
 declare const Embed: ({
@@ -430,10 +294,10 @@ declare const Embed: ({
 }: PropsWithChildren<{
   isCompleted: boolean;
   onSubmit: () => void;
-}>) => react_jsx_runtime3.JSX.Element;
+}>) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/templates/EmbeddedConfetti.d.ts
-declare const EmbeddedConfetti: (props: ConfettiProps) => react_jsx_runtime3.JSX.Element;
+declare const EmbeddedConfetti: (props: ConfettiProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/templates/PopoverConfetti.d.ts
 interface PopoverConfettiProps extends ConfettiProps {
@@ -448,10 +312,10 @@ interface PopoverConfettiProps extends ConfettiProps {
 declare const PopoverConfetti: ({
   closeOnFinishMs,
   ...props
-}: PopoverConfettiProps) => react_jsx_runtime3.JSX.Element;
+}: PopoverConfettiProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/templates/StepperConfetti.d.ts
-declare const StepperConfetti: (props: ConfettiProps) => react_jsx_runtime3.JSX.Element;
+declare const StepperConfetti: (props: ConfettiProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/hooks/useVisibleAfterDelay.d.ts
 interface UseVisibleAfterDelayOptions {
@@ -493,5 +357,5 @@ declare const useVisibleAfterScroll: ({
   isVisible: boolean;
 };
 //#endregion
-export { type Answer, Confetti, ConfettiContext, ConfettiController, type ConfettiControllerProps, type ConfettiProps, ConfettiProvider, type ConfettiProviderProps, type ConfettiState, Embed, EmbeddedConfetti, Flow, FreeText, type FreeTextProps, MultiChoice, type MultiChoiceProps, PopoverConfetti, PopoverContainer, type PopoverContainerProps, type Question, Rating, type RatingProps, SingleChoice, type SingleChoiceProps, StepperConfetti, SurveyQuestionFactory, type SurveyQuestionFactoryProps, ThankYouMessage, useConfetti, useVisibleAfterDelay, useVisibleAfterPageVisits, useVisibleAfterScroll, useVisibleAfterSessionPageVisits };
+export { type Answer, Confetti, ConfettiContext, ConfettiController, type ConfettiControllerProps, type ConfettiProps, ConfettiProvider, type ConfettiProviderProps, type ConfettiState, Embed, EmbeddedConfetti, Flow, FreeText, type FreeTextProps, MultiChoice, type MultiChoiceProps, PopoverConfetti, PopoverContainer, type PopoverContainerProps, type Question, Rating, type RatingProps, SingleChoice, type SingleChoiceProps, Statement, type StatementProps, StepperConfetti, SurveyQuestionFactory, type SurveyQuestionFactoryProps, ThankYouMessage, useConfetti, useVisibleAfterDelay, useVisibleAfterPageVisits, useVisibleAfterScroll, useVisibleAfterSessionPageVisits };
 //# sourceMappingURL=index.d.ts.map