@knocklabs/react 0.7.10 → 0.7.11

package/dist/esm/modules/guide/components/Banner/Banner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.mjs","sources":["../../../../../../src/modules/guide/components/Banner/Banner.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n  ButtonContent,\n  TargetButton,\n  TargetButtonWithGuideContext,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"banner\";\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nRoot.displayName = \"BannerView.Root\";\n\nconst Content: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner__message\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nContent.displayName = \"BannerView.Content\";\n\nconst Title: React.FC<\n  { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner__title\", className)} {...props}>\n      {title}\n    </div>\n  );\n};\nTitle.displayName = \"BannerView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={clsx(\"knock-guide-banner__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"BannerView.Body\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"BannerView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={clsx(\"knock-guide-banner__action\", className)}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"BannerView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={clsx(\n        \"knock-guide-banner__action knock-guide-banner__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"BannerView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={clsx(\"knock-guide-banner__close\", className)} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </button>\n  );\n};\nDismissButton.displayName = \"BannerView.DismissButton\";\n\ntype BannerContent = {\n  title: string;\n  body: string;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: BannerContent;\n  colorMode?: ColorMode;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({ content, colorMode = \"light\", onDismiss, onButtonClick }) => {\n  return (\n    <Root data-knock-color-mode={colorMode}>\n      <Content>\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      <Actions>\n        {content.secondary_button && (\n          <SecondaryButton\n            text={content.secondary_button.text}\n            action={content.secondary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.secondary_button!;\n                onButtonClick(e, { name: \"secondary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.primary_button && (\n          <PrimaryButton\n            text={content.primary_button.text}\n            action={content.primary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.primary_button!;\n                onButtonClick(e, { name: \"primary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.dismissible && <DismissButton onClick={onDismiss} />}\n      </Actions>\n    </Root>\n  );\n};\nDefaultView.displayName = \"BannerView.Default\";\n\ntype BannerProps = {\n  guideKey?: string;\n  onButtonClick?: (\n    e: React.MouseEvent,\n    target: TargetButtonWithGuideContext,\n  ) => void;\n};\n\nexport const Banner: React.FC<BannerProps> = ({ guideKey, onButtonClick }) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as BannerContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n    />\n  );\n};\nBanner.displayName = \"Banner\";\n\nexport const BannerView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Content: typeof Content;\n  Title: typeof Title;\n  Body: typeof Body;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(BannerView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Title","title","Body","body","__html","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","secondary_button","e","name","primary_button","dismissible","Banner","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","BannerView","Object","assign","Default"],"mappings":";;;;;AAaA,MAAMA,IAAe,UAEfC,IAEFA,CAAC;AAAA,EAAEC,UAAAA;AAAAA,EAAUC,WAAAA;AAAAA,EAAW,GAAGC;AAAM,MAEjCC,gBAAAA,EAAA,cAAC,SAAI,WAAWC,EAAK,sBAAsBH,CAAS,GAAG,GAAIC,EAAAA,GACxDF,CACH;AAGJD,EAAKM,cAAc;AAEnB,MAAMC,IAEFA,CAAC;AAAA,EAAEN,UAAAA;AAAAA,EAAUC,WAAAA;AAAAA,EAAW,GAAGC;AAAM,MAEjCC,gBAAAA,EAAA,cAAC,SAAI,WAAWC,EAAK,+BAA+BH,CAAS,GAAG,GAAIC,EAAAA,GACjEF,CACH;AAGJM,EAAQD,cAAc;AAEtB,MAAME,IAEFA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOP,WAAAA;AAAAA,EAAW,GAAGC;AAAM,MAE9BC,gBAAAA,EAAA,cAAC,SAAI,WAAWC,EAAK,6BAA6BH,CAAS,GAAG,GAAIC,EAAAA,GAC/DM,CACH;AAGJD,EAAMF,cAAc;AAEpB,MAAMI,IAAwEA,CAAC;AAAA,EAC7EC,MAAAA;AAAAA,EACAT,WAAAA;AAAAA,EACA,GAAGC;AACL,sCAEK,OACC,EAAA,WAAWE,EAAK,4BAA4BH,CAAS,GACrD,yBAAyB;AAAA,EAAEU,QAAQD;AAAAA,GAC/BR,GAAAA,EACJ,CAAA;AAGNO,EAAKJ,cAAc;AAEnB,MAAMO,IAEFA,CAAC;AAAA,EAAEZ,UAAAA;AAAAA,EAAUC,WAAAA;AAAAA,EAAW,GAAGC;AAAM,MAEjCC,gBAAAA,EAAA,cAAC,SAAI,WAAWC,EAAK,+BAA+BH,CAAS,GAAG,GAAIC,EAAAA,GACjEF,CACH;AAGJY,EAAQP,cAAc;AAEtB,MAAMQ,IAEFA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,QAAAA;AAAAA,EAAQd,WAAAA;AAAAA,EAAW,GAAGC;AAAM,MAErCC,gBAAAA,EAAA,cAAC,YACC,WAAWC,EAAK,8BAA8BH,CAAS,GACvD,GAAIC,EAAAA,GAEHY,CACH;AAGJD,EAAcR,cAAc;AAE5B,MAAMW,IAEFA,CAAC;AAAA,EAAEF,MAAAA;AAAAA,EAAMC,QAAAA;AAAAA,EAAQd,WAAAA;AAAAA,EAAW,GAAGC;AAAM,MAErCC,gBAAAA,EAAA,cAAC,YACC,WAAWC,EACT,oEACAH,CACF,GACA,GAAIC,EAAAA,GAEHY,CACH;AAGJE,EAAgBX,cAAc;AAE9B,MAAMY,IAAiEA,CAAC;AAAA,EACtEhB,WAAAA;AAAAA,EACA,GAAGC;AACL,sCAEK,UAAO,EAAA,WAAWE,EAAK,6BAA6BH,CAAS,GAAG,GAAIC,KACnEC,gBAAAA,EAAA,cAAC,SACC,OAAM,8BACN,OAAM,MACN,QAAO,MACP,MAAK,UAEJA,gBAAAA,EAAA,cAAA,KAAA,EAAE,MAAK,WAAU,UAAS,WAAU,UAAS,aAC3CA,gBAAAA,EAAA,cAAA,QAAA,EAAK,GAAE,uFAAA,CAAsF,GAC7FA,gBAAAA,EAAA,cAAA,QAAA,EAAK,GAAE,uFAAqF,CAC/F,CACF,CACF;AAGJc,EAAcZ,cAAc;AAU5B,MAAMa,IAKDA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,WAAAA,IAAY;AAAA,EAASC,WAAAA;AAAAA,EAAWC,eAAAA;AAAc,MAE1DnB,gBAAAA,EAAA,cAAAJ,GAAA,EAAK,yBAAuBqB,EAAAA,mCAC1Bd,GACC,MAAAH,gBAAAA,EAAA,cAACI,GAAM,EAAA,OAAOY,EAAQX,OAAM,GAC3BL,gBAAAA,EAAA,cAAAM,GAAA,EAAK,MAAMU,EAAQT,MAAK,CAC3B,GACCP,gBAAAA,EAAA,cAAAS,GAAA,MACEO,EAAQI,oDACNP,GACC,EAAA,MAAMG,EAAQI,iBAAiBT,MAC/B,QAAQK,EAAQI,iBAAiBR,QACjC,SAAUS,CAAMA,MAAA;AACd,MAAIF,GAAe;AACX,UAAA;AAAA,MAAER,MAAAA;AAAAA,MAAMC,QAAAA;AAAAA,QAAWI,EAAQI;AACjCD,IAAAA,EAAcE,GAAG;AAAA,MAAEC,MAAM;AAAA,MAAoBX,MAAAA;AAAAA,MAAMC,QAAAA;AAAAA,IAAAA,CAAQ;AAAA,EAAA;AAC7D,EAGL,CAAA,GAEAI,EAAQO,kDACNb,GACC,EAAA,MAAMM,EAAQO,eAAeZ,MAC7B,QAAQK,EAAQO,eAAeX,QAC/B,SAAUS,CAAMA,MAAA;AACd,MAAIF,GAAe;AACX,UAAA;AAAA,MAAER,MAAAA;AAAAA,MAAMC,QAAAA;AAAAA,QAAWI,EAAQO;AACjCJ,IAAAA,EAAcE,GAAG;AAAA,MAAEC,MAAM;AAAA,MAAkBX,MAAAA;AAAAA,MAAMC,QAAAA;AAAAA,IAAAA,CAAQ;AAAA,EAAA;AAE7D,EAAA,CAEH,GAEAI,EAAQQ,+CAAgBV,GAAc,EAAA,SAASI,EAAa,CAAA,CAC/D,CACF;AAGJH,EAAYb,cAAc;AAUnB,MAAMuB,IAAgCA,CAAC;AAAA,EAAEC,UAAAA;AAAAA,EAAUP,eAAAA;AAAc,MAAM;AACtE,QAAA;AAAA,IAAEQ,OAAAA;AAAAA,IAAOC,MAAAA;AAAAA,IAAMX,WAAAA;AAAAA,MAAcY,EAAS;AAAA,IAC1CC,KAAKJ;AAAAA,IACLK,MAAMpC;AAAAA,EAAAA,CACP;AAMD,SAJAK,EAAMgC,UAAU,MAAM;AAChBJ,IAAAA,OAAWK,WAAW;AAAA,EAAA,GACzB,CAACL,CAAI,CAAC,GAEL,CAACD,KAAS,CAACC,IAAa,OAGzB5B,gBAAAA,EAAA,cAAAe,GAAA,EACC,SAASa,EAAKZ,SACd,WAAAC,GACA,WAAW,MAAMW,EAAKM,eAAe,GACrC,eAAe,CAACb,GAAGc,MAAW;AAC5B,UAAMC,IAAW;AAAA,MAAE,GAAGD;AAAAA,MAAQJ,MAAM;AAAA,IAAe;AACnDH,WAAAA,EAAKS,iBAAiB;AAAA,MAAED,UAAAA;AAAAA,IAAAA,CAAU,GAE3BjB,IACHA,EAAcE,GAAG;AAAA,MAAEc,QAAAA;AAAAA,MAAQP,MAAAA;AAAAA,MAAMD,OAAAA;AAAAA,IAAAA,CAAO,IACxCW,EAA4BH,EAAOvB,MAAM;AAAA,EAAA,GAE/C;AAEN;AACAa,EAAOvB,cAAc;AAEd,MAAMqC,IAAa,CAAA;AAY1BC,OAAOC,OAAOF,GAAY;AAAA,EACxBG,SAAS3B;AAAAA,EACTnB,MAAAA;AAAAA,EACAO,SAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAE,MAAAA;AAAAA,EACAG,SAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAG,iBAAAA;AAAAA,EACAC,eAAAA;AACF,CAAC;"}
+{"version":3,"file":"Banner.mjs","sources":["../../../../../../src/modules/guide/components/Banner/Banner.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport { ButtonContent, TargetButton, TargetButtonWithGuide } from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"banner\";\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nRoot.displayName = \"BannerView.Root\";\n\nconst Content: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner__message\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nContent.displayName = \"BannerView.Content\";\n\nconst Title: React.FC<\n  { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner__title\", className)} {...props}>\n      {title}\n    </div>\n  );\n};\nTitle.displayName = \"BannerView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={clsx(\"knock-guide-banner__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"BannerView.Body\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"BannerView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={clsx(\"knock-guide-banner__action\", className)}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"BannerView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={clsx(\n        \"knock-guide-banner__action knock-guide-banner__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"BannerView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={clsx(\"knock-guide-banner__close\", className)} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </button>\n  );\n};\nDismissButton.displayName = \"BannerView.DismissButton\";\n\ntype BannerContent = {\n  title: string;\n  body: string;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: BannerContent;\n  colorMode?: ColorMode;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({ content, colorMode = \"light\", onDismiss, onButtonClick }) => {\n  return (\n    <Root data-knock-color-mode={colorMode}>\n      <Content>\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      <Actions>\n        {content.secondary_button && (\n          <SecondaryButton\n            text={content.secondary_button.text}\n            action={content.secondary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.secondary_button!;\n                onButtonClick(e, { name: \"secondary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.primary_button && (\n          <PrimaryButton\n            text={content.primary_button.text}\n            action={content.primary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.primary_button!;\n                onButtonClick(e, { name: \"primary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.dismissible && <DismissButton onClick={onDismiss} />}\n      </Actions>\n    </Root>\n  );\n};\nDefaultView.displayName = \"BannerView.Default\";\n\ntype BannerProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n};\n\nexport const Banner: React.FC<BannerProps> = ({ guideKey, onButtonClick }) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as BannerContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n    />\n  );\n};\nBanner.displayName = \"Banner\";\n\nexport const BannerView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Content: typeof Content;\n  Title: typeof Title;\n  Body: typeof Body;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(BannerView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Title","title","Body","body","__html","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","secondary_button","e","name","primary_button","dismissible","Banner","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","BannerView","Object","assign","Default"],"mappings":"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"}

package/dist/esm/modules/guide/components/Card/Card.mjs

@@ -1,145 +1,170 @@
-import { useGuide as w } from "@knocklabs/react-core";
-import i from "clsx";
-import t from "react";
-import { maybeNavigateToUrlWithDelay as f } from "../helpers.mjs";
+import { useGuide as C } from "@knocklabs/react-core";
+import c from "clsx";
+import a from "react";
+import { isValidHttpUrl as h, maybeNavigateToUrlWithDelay as V } from "../helpers.mjs";
 /* empty css            */
-const C = "card", o = ({
+const v = "card", o = ({
   children: e,
-  className: a,
+  className: t,
   ...r
-}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-card", a), ...r }, e);
+}) => /* @__PURE__ */ a.createElement("div", { className: c("knock-guide-card", t), ...r }, e);
 o.displayName = "CardView.Root";
-const s = ({
+const u = ({
   children: e,
-  className: a,
+  className: t,
   ...r
-}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-card__message", a), ...r }, e);
-s.displayName = "CardView.Content";
-const N = ({
+}) => /* @__PURE__ */ a.createElement("div", { className: c("knock-guide-card__message", t), ...r }, e);
+u.displayName = "CardView.Content";
+const f = ({
   children: e,
-  className: a,
+  className: t,
   ...r
-}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-card__header", a), ...r }, e);
-N.displayName = "CardView.Header";
-const g = ({
+}) => /* @__PURE__ */ a.createElement("div", { className: c("knock-guide-card__header", t), ...r }, e);
+f.displayName = "CardView.Header";
+const w = ({
   headline: e,
-  className: a,
+  className: t,
   ...r
-}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-card__headline", a), ...r }, e);
-g.displayName = "CardView.Headline";
-const m = ({
+}) => /* @__PURE__ */ a.createElement("div", { className: c("knock-guide-card__headline", t), ...r }, e);
+w.displayName = "CardView.Headline";
+const y = ({
   title: e,
-  className: a,
+  className: t,
   ...r
-}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-card__title", a), ...r }, e);
-m.displayName = "CardView.Title";
-const u = ({
+}) => /* @__PURE__ */ a.createElement("div", { className: c("knock-guide-card__title", t), ...r }, e);
+y.displayName = "CardView.Title";
+const _ = ({
   body: e,
-  className: a,
+  className: t,
   ...r
-}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-card__body", a), dangerouslySetInnerHTML: {
+}) => /* @__PURE__ */ a.createElement("div", { className: c("knock-guide-card__body", t), dangerouslySetInnerHTML: {
   __html: e
 }, ...r });
-u.displayName = "CardView.Body";
-const y = ({
+_.displayName = "CardView.Body";
+const k = ({
+  children: e,
+  className: t,
+  alt: r,
+  ...i
+}) => /* @__PURE__ */ a.createElement("img", { className: c("knock-guide-card__img", t), alt: r || "", ...i }, e);
+k.displayName = "CardView.Img";
+const p = ({
   children: e,
-  className: a,
+  className: t,
   ...r
-}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-card__actions", a), ...r }, e);
-y.displayName = "CardView.Actions";
-const _ = ({
+}) => /* @__PURE__ */ a.createElement("div", { className: c("knock-guide-card__actions", t), ...r }, e);
+p.displayName = "CardView.Actions";
+const g = ({
   text: e,
-  action: a,
+  action: t,
   className: r,
-  ...n
-}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-card__action", r), ...n }, e);
-_.displayName = "CardView.PrimaryButton";
-const p = ({
+  ...i
+}) => /* @__PURE__ */ a.createElement("button", { className: c("knock-guide-card__action", r), ...i }, e);
+g.displayName = "CardView.PrimaryButton";
+const E = ({
   text: e,
-  action: a,
+  action: t,
   className: r,
-  ...n
-}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-card__action knock-guide-card__action--secondary", r), ...n }, e);
-p.displayName = "CardView.SecondaryButton";
-const k = ({
+  ...i
+}) => /* @__PURE__ */ a.createElement("button", { className: c("knock-guide-card__action knock-guide-card__action--secondary", r), ...i }, e);
+E.displayName = "CardView.SecondaryButton";
+const N = ({
   className: e,
-  ...a
-}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-card__close", e), ...a }, /* @__PURE__ */ t.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", fill: "none" }, /* @__PURE__ */ t.createElement("g", { fill: "#60646C", fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ t.createElement("path", { d: "M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z" }), /* @__PURE__ */ t.createElement("path", { d: "M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z" }))));
-k.displayName = "CardView.DismissButton";
-const E = ({
+  ...t
+}) => /* @__PURE__ */ a.createElement("button", { className: c("knock-guide-card__close", e), ...t }, /* @__PURE__ */ a.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", fill: "none" }, /* @__PURE__ */ a.createElement("g", { fill: "#60646C", fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ a.createElement("path", { d: "M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z" }), /* @__PURE__ */ a.createElement("path", { d: "M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z" }))));
+N.displayName = "CardView.DismissButton";
+const b = ({
   content: e,
-  colorMode: a = "light",
+  colorMode: t = "light",
   onDismiss: r,
-  onButtonClick: n
-}) => /* @__PURE__ */ t.createElement(o, { "data-knock-color-mode": a }, /* @__PURE__ */ t.createElement(s, null, /* @__PURE__ */ t.createElement(N, null, /* @__PURE__ */ t.createElement(g, { headline: e.headline }), e.dismissible && /* @__PURE__ */ t.createElement(k, { onClick: r })), /* @__PURE__ */ t.createElement(m, { title: e.title }), /* @__PURE__ */ t.createElement(u, { body: e.body })), /* @__PURE__ */ t.createElement(y, null, e.primary_button && /* @__PURE__ */ t.createElement(_, { text: e.primary_button.text, action: e.primary_button.action, onClick: (d) => {
-  if (n) {
+  onButtonClick: i,
+  onImageClick: n
+}) => /* @__PURE__ */ a.createElement(o, { "data-knock-color-mode": t }, /* @__PURE__ */ a.createElement(u, null, /* @__PURE__ */ a.createElement(f, null, /* @__PURE__ */ a.createElement(w, { headline: e.headline }), e.dismissible && /* @__PURE__ */ a.createElement(N, { onClick: r })), /* @__PURE__ */ a.createElement(y, { title: e.title }), /* @__PURE__ */ a.createElement(_, { body: e.body })), e.image && /* @__PURE__ */ a.createElement("a", { href: h(e.image.action) ? e.image.action : void 0, target: "_blank" }, /* @__PURE__ */ a.createElement(k, { src: e.image.url, alt: e.image.alt, onClick: (d) => {
+  n && n(d, e.image);
+} })), (e.primary_button || e.secondary_button) && /* @__PURE__ */ a.createElement(p, null, e.primary_button && /* @__PURE__ */ a.createElement(g, { text: e.primary_button.text, action: e.primary_button.action, onClick: (d) => {
+  if (i) {
     const {
-      text: l,
-      action: c
+      text: s,
+      action: l
     } = e.primary_button;
-    n(d, {
+    i(d, {
       name: "primary_button",
-      text: l,
-      action: c
+      text: s,
+      action: l
     });
   }
-} }), e.secondary_button && /* @__PURE__ */ t.createElement(p, { text: e.secondary_button.text, action: e.secondary_button.action, onClick: (d) => {
-  if (n) {
+} }), e.secondary_button && /* @__PURE__ */ a.createElement(E, { text: e.secondary_button.text, action: e.secondary_button.action, onClick: (d) => {
+  if (i) {
     const {
-      text: l,
-      action: c
+      text: s,
+      action: l
     } = e.secondary_button;
-    n(d, {
+    i(d, {
       name: "secondary_button",
-      text: l,
-      action: c
+      text: s,
+      action: l
     });
   }
 } })));
-E.displayName = "CardView.Default";
-const h = ({
+b.displayName = "CardView.Default";
+const x = ({
   guideKey: e,
-  onButtonClick: a
+  onButtonClick: t,
+  onImageClick: r
 }) => {
   const {
-    guide: r,
+    guide: i,
     step: n,
     colorMode: d
-  } = w({
+  } = C({
     key: e,
-    type: C
+    type: v
   });
-  return t.useEffect(() => {
+  return a.useEffect(() => {
     n && n.markAsSeen();
-  }, [n]), !r || !n ? null : /* @__PURE__ */ t.createElement(E, { content: n.content, colorMode: d, onDismiss: () => n.markAsArchived(), onButtonClick: (l, c) => {
-    const b = {
-      ...c,
+  }, [n]), !i || !n ? null : /* @__PURE__ */ a.createElement(b, { content: n.content, colorMode: d, onDismiss: () => n.markAsArchived(), onButtonClick: (s, l) => {
+    const m = {
+      ...l,
       type: "button_click"
     };
     return n.markAsInteracted({
-      metadata: b
-    }), a ? a(l, {
-      button: c,
+      metadata: m
+    }), t ? t(s, {
+      button: l,
       step: n,
-      guide: r
-    }) : f(c.action);
+      guide: i
+    }) : V(l.action);
+  }, onImageClick: (s, l) => {
+    const m = {
+      ...l,
+      type: "image_click"
+    };
+    if (n.markAsInteracted({
+      metadata: m
+    }), r)
+      return r(s, {
+        image: l,
+        step: n,
+        guide: i
+      });
   } });
 };
-h.displayName = "Card";
-const v = {};
-Object.assign(v, {
-  Default: E,
+x.displayName = "Card";
+const A = {};
+Object.assign(A, {
+  Default: b,
   Root: o,
-  Content: s,
-  Title: m,
-  Body: u,
-  Actions: y,
-  PrimaryButton: _,
-  SecondaryButton: p,
-  DismissButton: k
+  Content: u,
+  Title: y,
+  Body: _,
+  Img: k,
+  Actions: p,
+  PrimaryButton: g,
+  SecondaryButton: E,
+  DismissButton: N
 });
 export {
-  h as Card,
-  v as CardView
+  x as Card,
+  A as CardView
 };
 //# sourceMappingURL=Card.mjs.map

package/dist/esm/modules/guide/components/Card/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","sources":["../../../../../../src/modules/guide/components/Card/Card.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n  ButtonContent,\n  TargetButton,\n  TargetButtonWithGuideContext,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"card\";\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nRoot.displayName = \"CardView.Root\";\n\nconst Content: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__message\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nContent.displayName = \"CardView.Content\";\n\nconst Header: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__header\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nHeader.displayName = \"CardView.Header\";\n\nconst Headline: React.FC<\n  { headline: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ headline, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__headline\", className)} {...props}>\n      {headline}\n    </div>\n  );\n};\nHeadline.displayName = \"CardView.Headline\";\n\nconst Title: React.FC<\n  { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__title\", className)} {...props}>\n      {title}\n    </div>\n  );\n};\nTitle.displayName = \"CardView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={clsx(\"knock-guide-card__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"CardView.Body\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"CardView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={clsx(\"knock-guide-card__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"CardView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={clsx(\n        \"knock-guide-card__action knock-guide-card__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"CardView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={clsx(\"knock-guide-card__close\", className)} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </button>\n  );\n};\nDismissButton.displayName = \"CardView.DismissButton\";\n\ntype CardContent = {\n  headline: string;\n  title: string;\n  body: string;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: CardContent;\n  colorMode?: ColorMode;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({ content, colorMode = \"light\", onDismiss, onButtonClick }) => {\n  return (\n    <Root data-knock-color-mode={colorMode}>\n      <Content>\n        <Header>\n          <Headline headline={content.headline} />\n          {content.dismissible && <DismissButton onClick={onDismiss} />}\n        </Header>\n\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      <Actions>\n        {content.primary_button && (\n          <PrimaryButton\n            text={content.primary_button.text}\n            action={content.primary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.primary_button!;\n                onButtonClick(e, { name: \"primary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.secondary_button && (\n          <SecondaryButton\n            text={content.secondary_button.text}\n            action={content.secondary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.secondary_button!;\n                onButtonClick(e, { name: \"secondary_button\", text, action });\n              }\n            }}\n          />\n        )}\n      </Actions>\n    </Root>\n  );\n};\nDefaultView.displayName = \"CardView.Default\";\n\ntype CardProps = {\n  guideKey?: string;\n  onButtonClick?: (\n    e: React.MouseEvent,\n    target: TargetButtonWithGuideContext,\n  ) => void;\n};\n\nexport const Card: React.FC<CardProps> = ({ guideKey, onButtonClick }) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as CardContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n    />\n  );\n};\nCard.displayName = \"Card\";\n\nexport const CardView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Content: typeof Content;\n  Headline: typeof Headline;\n  Title: typeof Title;\n  Body: typeof Body;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(CardView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Header","Headline","headline","Title","title","Body","body","__html","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","dismissible","primary_button","e","name","secondary_button","Card","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","CardView","Object","assign","Default"],"mappings":"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"}
+{"version":3,"file":"Card.mjs","sources":["../../../../../../src/modules/guide/components/Card/Card.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { isValidHttpUrl, maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n  ButtonContent,\n  ImageContent,\n  TargetButton,\n  TargetButtonWithGuide,\n  TargetImage,\n  TargetImageWithGuide,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"card\";\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nRoot.displayName = \"CardView.Root\";\n\nconst Content: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__message\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nContent.displayName = \"CardView.Content\";\n\nconst Header: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__header\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nHeader.displayName = \"CardView.Header\";\n\nconst Headline: React.FC<\n  { headline: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ headline, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__headline\", className)} {...props}>\n      {headline}\n    </div>\n  );\n};\nHeadline.displayName = \"CardView.Headline\";\n\nconst Title: React.FC<\n  { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__title\", className)} {...props}>\n      {title}\n    </div>\n  );\n};\nTitle.displayName = \"CardView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={clsx(\"knock-guide-card__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"CardView.Body\";\n\nconst Img: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"img\">>\n> = ({ children, className, alt, ...props }) => {\n  return (\n    <img\n      className={clsx(\"knock-guide-card__img\", className)}\n      alt={alt || \"\"}\n      {...props}\n    >\n      {children}\n    </img>\n  );\n};\nImg.displayName = \"CardView.Img\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"CardView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={clsx(\"knock-guide-card__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"CardView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={clsx(\n        \"knock-guide-card__action knock-guide-card__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"CardView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={clsx(\"knock-guide-card__close\", className)} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </button>\n  );\n};\nDismissButton.displayName = \"CardView.DismissButton\";\n\ntype CardContent = {\n  headline: string;\n  title: string;\n  body: string;\n  image?: ImageContent;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: CardContent;\n  colorMode?: ColorMode;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n  onImageClick?: (e: React.MouseEvent, image: TargetImage) => void;\n}> = ({\n  content,\n  colorMode = \"light\",\n  onDismiss,\n  onButtonClick,\n  onImageClick,\n}) => {\n  return (\n    <Root data-knock-color-mode={colorMode}>\n      <Content>\n        <Header>\n          <Headline headline={content.headline} />\n          {content.dismissible && <DismissButton onClick={onDismiss} />}\n        </Header>\n\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      {content.image && (\n        <a\n          href={\n            isValidHttpUrl(content.image.action)\n              ? content.image.action\n              : undefined\n          }\n          target=\"_blank\"\n        >\n          <Img\n            src={content.image.url}\n            alt={content.image.alt}\n            onClick={(e) => {\n              if (onImageClick) {\n                onImageClick(e, content.image!);\n              }\n            }}\n          />\n        </a>\n      )}\n      {(content.primary_button || content.secondary_button) && (\n        <Actions>\n          {content.primary_button && (\n            <PrimaryButton\n              text={content.primary_button.text}\n              action={content.primary_button.action}\n              onClick={(e) => {\n                if (onButtonClick) {\n                  const { text, action } = content.primary_button!;\n                  onButtonClick(e, { name: \"primary_button\", text, action });\n                }\n              }}\n            />\n          )}\n          {content.secondary_button && (\n            <SecondaryButton\n              text={content.secondary_button.text}\n              action={content.secondary_button.action}\n              onClick={(e) => {\n                if (onButtonClick) {\n                  const { text, action } = content.secondary_button!;\n                  onButtonClick(e, { name: \"secondary_button\", text, action });\n                }\n              }}\n            />\n          )}\n        </Actions>\n      )}\n    </Root>\n  );\n};\nDefaultView.displayName = \"CardView.Default\";\n\ntype CardProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n  onImageClick?: (e: React.MouseEvent, target: TargetImageWithGuide) => void;\n};\n\nexport const Card: React.FC<CardProps> = ({\n  guideKey,\n  onButtonClick,\n  onImageClick,\n}) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as CardContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n      onImageClick={(e, image) => {\n        const metadata = { ...image, type: \"image_click\" };\n        step.markAsInteracted({ metadata });\n\n        if (onImageClick) {\n          return onImageClick(e, { image, step, guide });\n        }\n      }}\n    />\n  );\n};\nCard.displayName = \"Card\";\n\nexport const CardView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Content: typeof Content;\n  Headline: typeof Headline;\n  Title: typeof Title;\n  Body: typeof Body;\n  Img: typeof Img;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(CardView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Img,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Header","Headline","headline","Title","title","Body","body","__html","Img","alt","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","onImageClick","dismissible","image","isValidHttpUrl","undefined","url","e","primary_button","secondary_button","name","Card","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","CardView","Object","assign","Default"],"mappings":"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"}