@gobolt/genesis 0.2.21 → 0.3.0

package/dist/components/Chat/Chat.js

@@ -0,0 +1,248 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { io as lookup } from "../../node_modules/socket.io-client/build/esm/index.js";
+import styled from "styled-components";
+import Message from "./Message.js";
+import Typography from "../Typography/Typography.js";
+import Input from "../Input/Input.js";
+import Button from "../Button/Button.js";
+const ChatContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 540px;
+  overflow: hidden;
+`;
+const HeroContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: ${({ $isVisible }) => $isVisible ? 1 : 0};
+  transition: opacity 0.3s ease;
+`;
+styled.h1`
+  font-family: "Helvetica", "Arial", sans-serif;
+  color: teal;
+  font-size: 24px;
+  text-align: center;
+`;
+const Subtitle = styled.p`
+  font-family: "Helvetica", "Arial", sans-serif;
+  color: #666;
+  font-size: 16px;
+  text-align: center;
+`;
+const ErrorMessage = styled(Subtitle)`
+  color: red;
+`;
+const InputContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px;
+  gap: 8px;
+`;
+const ChatButton = styled(Button)`
+  display: flex;
+  justify-content: flex-end;
+  margin: 16px;
+`;
+const MessageList = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 8px;
+  max-height: 400px;
+  overflow-y: auto;
+`;
+const Chat = ({
+  socketUrl = "http://localhost:3000",
+  isOpen = false,
+  messageHistory = [],
+  title = null,
+  isSimulated = false
+}) => {
+  const [isChatOpen, setIsChatOpen] = useState(isOpen);
+  const [message, setMessage] = useState("");
+  const [messages, setMessages] = useState(messageHistory);
+  const [serverStatus, setServerStatus] = useState("unknown");
+  const [serverError, setServerError] = useState("");
+  const socketRef = useRef(null);
+  const messageListRef = useRef(null);
+  const serverReadyRef = useRef(false);
+  const handle = "user";
+  const [isLocked, setIsLocked] = useState(false);
+  useEffect(() => {
+    if (isSimulated) return;
+    console.log("Connecting to socket server at:", socketUrl);
+    socketRef.current = lookup(socketUrl, {
+      extraHeaders: {
+        "Access-Control-Allow-Origin": "*"
+      }
+    });
+    const socket = socketRef.current;
+    socket.on("connect", () => {
+      console.log("Socket connected successfully");
+    });
+    socket.on("connect_error", (error) => {
+      console.error("Socket connection error:", error);
+      setServerError("Failed to connect to server");
+      setServerStatus("error");
+      serverReadyRef.current = false;
+    });
+    socket.on("new connection", () => {
+      console.log("New connection established");
+    });
+    socket.on("server-ready", () => {
+      console.log("Server is ready");
+      setServerError("");
+      setServerStatus("ready");
+      serverReadyRef.current = true;
+    });
+    socket.on("message", (newMessage) => {
+      setMessages((prev) => {
+        if (newMessage.sender === "bot") {
+          let replaced = false;
+          const updated = prev.map((msg) => {
+            if (msg.isThinking && !replaced) {
+              replaced = true;
+              return { ...newMessage, isThinking: false };
+            }
+            return msg;
+          });
+          setIsLocked(false);
+          return replaced ? updated : [...prev, newMessage];
+        }
+        const lastUserMsg = [...prev].reverse().find((msg) => msg.sender === "user");
+        if (lastUserMsg && lastUserMsg.content === newMessage.content) {
+          return prev;
+        }
+        return [...prev, newMessage];
+      });
+    });
+    socket.on("update-bot-message", (updatedData) => {
+      console.log("Received bot message update:", updatedData);
+      setMessages(
+        (prev) => prev.map(
+          (message2) => message2.id === updatedData.id ? { ...updatedData } : message2
+        )
+      );
+    });
+    socket.on("error", (error) => {
+      console.error("Socket error:", error);
+      setServerError("Server error occurred");
+    });
+    socket.onAny((eventName, ...args) => {
+      console.log(`Socket event received: ${eventName}`, args);
+    });
+    const timeoutId = setTimeout(() => {
+      if (!serverReadyRef.current) {
+        console.log("Server status check failed");
+        setServerError("Please check the server");
+        setServerStatus("error");
+      }
+    }, 2e3);
+    return () => {
+      console.log("Disconnecting socket");
+      socket.disconnect();
+      clearTimeout(timeoutId);
+    };
+  }, [isSimulated, socketUrl]);
+  useEffect(() => {
+    if (messageListRef.current) {
+      messageListRef.current.scrollTo({
+        top: messageListRef.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }
+  }, [messages]);
+  const handleKeyDown = (event) => {
+    var _a;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      sendMessage();
+    } else {
+      (_a = socketRef.current) == null ? void 0 : _a.emit("typing");
+    }
+  };
+  const sendMessage = () => {
+    var _a;
+    if (!message.trim() || isLocked) return;
+    const userMessage = {
+      content: message,
+      sender: handle,
+      id: `id_${Date.now()}`,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    const thinkingMessage = {
+      content: "",
+      sender: "bot",
+      id: `id_${Date.now()}_thinking`,
+      isThinking: true,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    setIsLocked(true);
+    setMessages((prev) => [...prev, thinkingMessage]);
+    if (!((_a = socketRef.current) == null ? void 0 : _a.connected)) {
+      setServerError("Not connected to server");
+      setIsLocked(false);
+      return;
+    }
+    socketRef.current.emit("message", userMessage);
+    setTimeout(() => {
+      setMessages(
+        (prev) => prev.map(
+          (msg) => msg.isThinking ? { ...msg, content: "Processing your message..." } : msg
+        )
+      );
+    }, 300);
+    setTimeout(() => {
+      setMessages((prev) => prev.filter((msg) => !msg.isThinking));
+      setServerError("No response from server");
+      setIsLocked(false);
+    }, 1e4);
+    setMessage("");
+  };
+  const toggleChat = () => {
+    setIsChatOpen(!isChatOpen);
+  };
+  const handleInputChange = (e) => {
+    setMessage(e.payload.value);
+  };
+  return /* @__PURE__ */ jsxs(ChatContainer, { children: [
+    /* @__PURE__ */ jsx(HeroContainer, { $isVisible: !isChatOpen, children: /* @__PURE__ */ jsxs("div", { children: [
+      title && /* @__PURE__ */ jsx(Typography, { variant: "heading3", children: title }),
+      /* @__PURE__ */ jsx(Subtitle, { children: "Click the Chat Icon below to begin" }),
+      serverError && /* @__PURE__ */ jsx(ErrorMessage, { children: serverError })
+    ] }) }),
+    isChatOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(HeroContainer, { $isVisible: true, children: /* @__PURE__ */ jsx("div", { children: title && /* @__PURE__ */ jsx(Typography, { variant: "heading2", children: title }) }) }),
+      /* @__PURE__ */ jsx(MessageList, { ref: messageListRef, children: messages.map((msg) => /* @__PURE__ */ jsx(
+        Message,
+        {
+          message: msg.content,
+          handle: msg.sender,
+          isThinking: msg.isThinking
+        },
+        msg.id
+      )) }),
+      /* @__PURE__ */ jsxs(InputContainer, { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "text",
+            value: message,
+            onChange: handleInputChange,
+            onKeyDown: handleKeyDown,
+            placeholder: "Type a message & press Enter or Send",
+            disabled: isLocked
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { onClick: sendMessage, disabled: isLocked, children: "Send" })
+      ] })
+    ] }) : /* @__PURE__ */ jsx(ChatButton, { onClick: toggleChat, children: "Chat" })
+  ] });
+};
+export {
+  Chat as default
+};

package/dist/components/Chat/Message.cjs

@@ -0,0 +1,96 @@
+"use strict";
+var jsxRuntime = require("react/jsx-runtime");
+var styled = require("styled-components");
+var index$1 = require("../../node_modules/react-icons/pi/index.cjs");
+var index = require("../../node_modules/react-markdown/lib/index.cjs");
+const MessageContainer = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 8px 0;
+  flex-direction: ${({ $isBot }) => $isBot ? "row" : "row-reverse"};
+`;
+const IconContainer = styled.div`
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const teal = "#30606B";
+const TextContainer = styled.div`
+  background-color: ${({ $isBot }) => $isBot ? "#f0f0f0" : teal};
+  color: ${({ $isBot }) => $isBot ? "black" : "white"};
+  padding: 8px 12px;
+  border-radius: 8px;
+  max-width: 80%;
+`;
+const MessageText = styled.p`
+  margin: 0;
+  font-family: "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  line-height: 1.4;
+`;
+const ThinkingDots = styled.div`
+  display: flex;
+  gap: 4px;
+  padding: 8px;
+
+  .dot {
+    width: 8px;
+    height: 8px;
+    background-color: #666;
+    border-radius: 50%;
+    animation: bounce 1.4s infinite ease-in-out both;
+  }
+
+  .dot-1 {
+    animation-delay: -0.32s;
+  }
+
+  .dot-2 {
+    animation-delay: -0.16s;
+  }
+
+  @keyframes bounce {
+    0%,
+    80%,
+    100% {
+      transform: scale(0);
+    }
+    40% {
+      transform: scale(1);
+    }
+  }
+`;
+const BotIcon = () => /* @__PURE__ */ jsxRuntime.jsx(index$1.PiRobot, { size: 24, color: teal });
+const UserIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z",
+        fill: "white"
+      }
+    )
+  }
+);
+const ThinkingIndicator = () => /* @__PURE__ */ jsxRuntime.jsxs(ThinkingDots, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dot dot-1" }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dot dot-2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dot dot-3" })
+] });
+const Message = ({ message, handle, isThinking = false }) => {
+  const isBot = handle === "bot";
+  return /* @__PURE__ */ jsxRuntime.jsxs(MessageContainer, { $isBot: isBot, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(IconContainer, { children: isBot ? /* @__PURE__ */ jsxRuntime.jsx(BotIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(UserIcon, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TextContainer, { $isBot: isBot, children: isThinking ? /* @__PURE__ */ jsxRuntime.jsx(ThinkingIndicator, {}) : handle === "bot" ? /* @__PURE__ */ jsxRuntime.jsx(index.Markdown, { children: message }) : /* @__PURE__ */ jsxRuntime.jsx(MessageText, { children: message }) })
+  ] });
+};
+module.exports = Message;

package/dist/components/Chat/Message.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface MessageProps {
+    message: string;
+    handle: string;
+    isThinking?: boolean;
+}
+declare const Message: FC<MessageProps>;
+export default Message;

package/dist/components/Chat/Message.js

@@ -0,0 +1,97 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { PiRobot } from "../../node_modules/react-icons/pi/index.js";
+import { Markdown } from "../../node_modules/react-markdown/lib/index.js";
+const MessageContainer = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 8px 0;
+  flex-direction: ${({ $isBot }) => $isBot ? "row" : "row-reverse"};
+`;
+const IconContainer = styled.div`
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const teal = "#30606B";
+const TextContainer = styled.div`
+  background-color: ${({ $isBot }) => $isBot ? "#f0f0f0" : teal};
+  color: ${({ $isBot }) => $isBot ? "black" : "white"};
+  padding: 8px 12px;
+  border-radius: 8px;
+  max-width: 80%;
+`;
+const MessageText = styled.p`
+  margin: 0;
+  font-family: "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  line-height: 1.4;
+`;
+const ThinkingDots = styled.div`
+  display: flex;
+  gap: 4px;
+  padding: 8px;
+
+  .dot {
+    width: 8px;
+    height: 8px;
+    background-color: #666;
+    border-radius: 50%;
+    animation: bounce 1.4s infinite ease-in-out both;
+  }
+
+  .dot-1 {
+    animation-delay: -0.32s;
+  }
+
+  .dot-2 {
+    animation-delay: -0.16s;
+  }
+
+  @keyframes bounce {
+    0%,
+    80%,
+    100% {
+      transform: scale(0);
+    }
+    40% {
+      transform: scale(1);
+    }
+  }
+`;
+const BotIcon = () => /* @__PURE__ */ jsx(PiRobot, { size: 24, color: teal });
+const UserIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z",
+        fill: "white"
+      }
+    )
+  }
+);
+const ThinkingIndicator = () => /* @__PURE__ */ jsxs(ThinkingDots, { children: [
+  /* @__PURE__ */ jsx("div", { className: "dot dot-1" }),
+  /* @__PURE__ */ jsx("div", { className: "dot dot-2" }),
+  /* @__PURE__ */ jsx("div", { className: "dot dot-3" })
+] });
+const Message = ({ message, handle, isThinking = false }) => {
+  const isBot = handle === "bot";
+  return /* @__PURE__ */ jsxs(MessageContainer, { $isBot: isBot, children: [
+    /* @__PURE__ */ jsx(IconContainer, { children: isBot ? /* @__PURE__ */ jsx(BotIcon, {}) : /* @__PURE__ */ jsx(UserIcon, {}) }),
+    /* @__PURE__ */ jsx(TextContainer, { $isBot: isBot, children: isThinking ? /* @__PURE__ */ jsx(ThinkingIndicator, {}) : handle === "bot" ? /* @__PURE__ */ jsx(Markdown, { children: message }) : /* @__PURE__ */ jsx(MessageText, { children: message }) })
+  ] });
+};
+export {
+  Message as default
+};

package/dist/components/Chat/__stories__/Chat.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('..').ChatProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithMessageHistory: Story;
+export declare const WithTitle: Story;

package/dist/components/Chat/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Chat';
+export type { ChatProps } from './Chat';

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

@@ -1,4 +1,4 @@
-import { CheckboxProps } from './Checkbox';
+import { CheckboxProps as CheckboxProperties } from './Checkbox';
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
 declare module "styled-components" {
     interface DefaultTheme extends GenesisTheme {
@@ -10,6 +10,6 @@ export declare const getGenesisClass: ({ colors, borderRadius }: {
 }, type?: string, state?: string) => string;
 export declare const StyledCheckbox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd').CheckboxProps & import('react').RefAttributes<import('rc-checkbox').CheckboxRef>, "ref"> & {
     ref?: import('react').Ref<import('rc-checkbox').CheckboxRef>;
-}, CheckboxProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').CheckboxProps & import('react').RefAttributes<import('rc-checkbox').CheckboxRef>> & {
+}, CheckboxProperties>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').CheckboxProps & import('react').RefAttributes<import('rc-checkbox').CheckboxRef>> & {
     Group: <T = any>(props: import('antd/es/checkbox').CheckboxGroupProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement;
 }, keyof import('react').Component<any, {}, any>>;

package/dist/components/Dashboard/__stories__/charts/LineChart.d.ts

@@ -3,10 +3,10 @@ interface DeliveryData {
     vehicleType: "EV" | "ICE";
     parcelsDelivered: number;
 }
-interface LineChartProps {
+interface LineChartProperties {
     data: DeliveryData[];
     width?: number;
     height?: number;
 }
-export declare const DeliveryLineChart: ({ data, width, height, }: LineChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DeliveryLineChart: ({ data, width, height, }: LineChartProperties) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dashboard/styles.d.ts

@@ -1,5 +1,5 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledDashboardProps {
+interface StyledDashboardProperties {
     theme?: GenesisTheme;
     type?: "primary" | "secondary";
     state?: "active" | "disabled";
@@ -9,5 +9,5 @@ export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
     borderRadius: any;
     sizing: any;
 }, type?: string, state?: string) => string;
-export declare const StyledDashboard: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledDashboardProps>> & string;
+export declare const StyledDashboard: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledDashboardProperties>> & string;
 export {};

package/dist/components/DatePicker/DatePicker.cjs

@@ -2,12 +2,12 @@
 var jsxRuntime = require("react/jsx-runtime");
 var useGenesis = require("../../providers/useGenesis.cjs");
 var index = require("../../node_modules/antd/es/date-picker/index.cjs");
-const DatePicker = (props) => {
+const DatePicker = (properties) => {
   const { theme } = useGenesis.useGenesis();
   return /* @__PURE__ */ jsxRuntime.jsx(
     index,
     {
-      ...props,
+      ...properties,
       style: {
         border: `1px solid ${theme.colors.inputs.surface.border}`,
         padding: "8px"

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import { DatePickerProps as AntDatePickerProps } from 'antd';
-export type DatePickerProps = AntDatePickerProps;
-declare const DatePicker: (props: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+import { DatePickerProps as AntDatePickerProperties } from 'antd';
+export type DatePickerProps = AntDatePickerProperties;
+declare const DatePicker: (properties: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 export default DatePicker;

package/dist/components/DatePicker/DatePicker.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { useGenesis } from "../../providers/useGenesis.js";
 import DatePicker$1 from "../../node_modules/antd/es/date-picker/index.js";
-const DatePicker = (props) => {
+const DatePicker = (properties) => {
   const { theme } = useGenesis();
   return /* @__PURE__ */ jsx(
     DatePicker$1,
     {
-      ...props,
+      ...properties,
       style: {
         border: `1px solid ${theme.colors.inputs.surface.border}`,
         padding: "8px"

package/dist/components/DateRangePicker/DateRangePicker.cjs

@@ -3,12 +3,12 @@ var jsxRuntime = require("react/jsx-runtime");
 var useGenesis = require("../../providers/useGenesis.cjs");
 var index = require("../../node_modules/antd/es/date-picker/index.cjs");
 const { RangePicker: AntDateRange } = index;
-const DateRangerPicker = (props) => {
+const DateRangerPicker = (properties) => {
   const { theme } = useGenesis.useGenesis();
   return /* @__PURE__ */ jsxRuntime.jsx(
     AntDateRange,
     {
-      ...props,
+      ...properties,
       style: {
         border: `1px solid ${theme.colors.inputs.surface.border}`,
         padding: "8px",

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,4 +1,4 @@
 import { RangePickerProps } from 'antd/es/date-picker';
 export type DateRangePickerProps = RangePickerProps;
-declare const DateRangerPicker: (props: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const DateRangerPicker: (properties: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
 export default DateRangerPicker;

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -2,12 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { useGenesis } from "../../providers/useGenesis.js";
 import DatePicker from "../../node_modules/antd/es/date-picker/index.js";
 const { RangePicker: AntDateRange } = DatePicker;
-const DateRangerPicker = (props) => {
+const DateRangerPicker = (properties) => {
   const { theme } = useGenesis();
   return /* @__PURE__ */ jsx(
     AntDateRange,
     {
-      ...props,
+      ...properties,
       style: {
         border: `1px solid ${theme.colors.inputs.surface.border}`,
         padding: "8px",

package/dist/components/ErrorBoundary/ErrorBoundary.cjs

@@ -25,8 +25,8 @@ const logErrorToConsole = (error, componentStack, ownerStack) => {
   console.error(error, componentStack, ownerStack);
 };
 class ErrorBoundary extends React__namespace.Component {
-  constructor(props) {
-    super(props);
+  constructor(properties) {
+    super(properties);
     this.state = { hasError: false };
   }
   static getDerivedStateFromError(error) {

package/dist/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -9,7 +9,7 @@ export interface ErrorBoundaryProps {
     componentStack?: string;
 }
 declare class ErrorBoundary extends React.Component<any, ErrorBoundaryProps> {
-    constructor(props: any);
+    constructor(properties: any);
     static getDerivedStateFromError(error: any): {
         hasError: boolean;
     };

package/dist/components/ErrorBoundary/ErrorBoundary.js

@@ -5,8 +5,8 @@ const logErrorToConsole = (error, componentStack, ownerStack) => {
   console.error(error, componentStack, ownerStack);
 };
 class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
+  constructor(properties) {
+    super(properties);
     this.state = { hasError: false };
   }
   static getDerivedStateFromError(error) {

package/dist/components/ErrorBoundary/styles.d.ts

@@ -1,5 +1,5 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledErrorBoundaryProps {
+interface StyledErrorBoundaryProperties {
     theme?: GenesisTheme;
     type?: "primary" | "secondary";
     state?: "active" | "disabled";
@@ -9,5 +9,5 @@ export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
     borderRadius: any;
     sizing: any;
 }, type?: string, state?: string) => string;
-export declare const StyledErrorBoundary: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledErrorBoundaryProps>> & string;
+export declare const StyledErrorBoundary: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledErrorBoundaryProperties>> & string;
 export {};