@mrshmllw/smores-react 10.7.0-crumbs-feature-vite-bundling.2 → 10.7.0

package/dist/Snackbar/SnackbarContainer.js

@@ -0,0 +1,45 @@
+import React, { createContext, useCallback, useContext, useRef, useState, } from 'react';
+import styled from 'styled-components';
+import { SnackbarItem } from './SnackbarItem';
+export const SnackbarContext = createContext({
+    addSnackbar: () => {
+        throw new Error('Please add the SnackbarContainer to your application');
+    },
+});
+export const useSnackbarContext = () => useContext(SnackbarContext);
+export const SnackbarContainer = ({ children, }) => {
+    const snackbarIdRef = useRef(0);
+    const [snackbars, setSnackbars] = useState([]);
+    // create snackbar unique ID
+    const newSnackId = useCallback(() => {
+        const newId = `MM_SNACKBAR_${snackbarIdRef.current}`;
+        snackbarIdRef.current = +1;
+        return newId;
+    }, []);
+    const addSnackbar = useCallback((snackbar) => {
+        const newSnack = {
+            ...snackbar,
+            id: newSnackId(),
+        };
+        setSnackbars([...snackbars, newSnack]);
+    }, []);
+    const deleteSnackbar = (id) => {
+        setSnackbars(snackbars.filter((snackbar) => snackbar.id !== id));
+    };
+    return (React.createElement(SnackbarContext.Provider, { value: {
+            addSnackbar,
+        } },
+        children,
+        React.createElement(SnackbarWrapper, null, snackbars.map((snackbar) => (React.createElement(SnackbarItem, { key: snackbar.id, ...snackbar, deleteSnack: deleteSnackbar }))))));
+};
+const SnackbarWrapper = styled.div `
+  position: fixed;
+  bottom: 35px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  width: 90%;
+  max-width: 875px;
+  z-index: 1000;
+`;
+//# sourceMappingURL=SnackbarContainer.js.map

package/dist/Snackbar/SnackbarContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarContainer.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EAGb,WAAW,EACX,UAAU,EACV,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAG7C,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAsB;IAChE,WAAW,EAAE,GAAG,EAAE;QAChB,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAA;IACzE,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAA;AAEnE,MAAM,CAAC,MAAM,iBAAiB,GAAiC,CAAC,EAC9D,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAa,EAAE,CAAC,CAAA;IAE1D,4BAA4B;IAC5B,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,MAAM,KAAK,GAAG,eAAe,aAAa,CAAC,OAAO,EAAE,CAAA;QACpD,aAAa,CAAC,OAAO,GAAG,CAAC,CAAC,CAAA;QAC1B,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,QAAqB,EAAE,EAAE;QACxD,MAAM,QAAQ,GAAG;YACf,GAAG,QAAQ;YACX,EAAE,EAAE,UAAU,EAAE;SACjB,CAAA;QACD,YAAY,CAAC,CAAC,GAAG,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IACxC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE;QACpC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IAClE,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,WAAW;SACZ;QAEA,QAAQ;QACT,oBAAC,eAAe,QACb,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC3B,oBAAC,YAAY,IACX,GAAG,EAAE,QAAQ,CAAC,EAAE,KACZ,QAAQ,EACZ,WAAW,EAAE,cAAc,GAC3B,CACH,CAAC,CACc,CACO,CAC5B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASjC,CAAA","sourcesContent":["import React, {\n  createContext,\n  FC,\n  ReactNode,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n} from 'react'\nimport styled from 'styled-components'\nimport { SnackbarItem } from './SnackbarItem'\nimport { CreateSnack, Snackbar, SnackbarContextType } from './types'\n\nexport const SnackbarContext = createContext<SnackbarContextType>({\n  addSnackbar: () => {\n    throw new Error('Please add the SnackbarContainer to your application')\n  },\n})\n\nexport const useSnackbarContext = () => useContext(SnackbarContext)\n\nexport const SnackbarContainer: FC<{ children?: ReactNode }> = ({\n  children,\n}) => {\n  const snackbarIdRef = useRef(0)\n  const [snackbars, setSnackbars] = useState<Snackbar[]>([])\n\n  // create snackbar unique ID\n  const newSnackId = useCallback(() => {\n    const newId = `MM_SNACKBAR_${snackbarIdRef.current}`\n    snackbarIdRef.current = +1\n    return newId\n  }, [])\n\n  const addSnackbar = useCallback((snackbar: CreateSnack) => {\n    const newSnack = {\n      ...snackbar,\n      id: newSnackId(),\n    }\n    setSnackbars([...snackbars, newSnack])\n  }, [])\n\n  const deleteSnackbar = (id: string) => {\n    setSnackbars(snackbars.filter((snackbar) => snackbar.id !== id))\n  }\n\n  return (\n    <SnackbarContext.Provider\n      value={{\n        addSnackbar,\n      }}\n    >\n      {children}\n      <SnackbarWrapper>\n        {snackbars.map((snackbar) => (\n          <SnackbarItem\n            key={snackbar.id}\n            {...snackbar}\n            deleteSnack={deleteSnackbar}\n          />\n        ))}\n      </SnackbarWrapper>\n    </SnackbarContext.Provider>\n  )\n}\n\nconst SnackbarWrapper = styled.div`\n  position: fixed;\n  bottom: 35px;\n  left: 0;\n  right: 0;\n  margin: 0 auto;\n  width: 90%;\n  max-width: 875px;\n  z-index: 1000;\n`\n"]}

package/dist/Snackbar/SnackbarItem.js

@@ -0,0 +1,26 @@
+import { Box } from '../Box';
+import React from 'react';
+import styled from 'styled-components';
+import { Icon } from '../Icon';
+import { theme } from '../theme';
+import { Text } from '../Text';
+import { useTimeout } from '../hooks';
+export const SnackbarItem = ({ autoCloseTime = 4, id, message, leadingIcon, canManuallyClose, showCloseIcon, deleteSnack, }) => {
+    useTimeout(() => deleteSnack(id), autoCloseTime * 1000);
+    return (React.createElement(SnackItem, { p: "16px", key: id, mt: "16px", flex: true, justifyContent: "space-between" },
+        React.createElement(Box, { flex: true, alignItems: "center" },
+            leadingIcon && (React.createElement(Icon, { mr: "12px", render: leadingIcon, size: 24, color: "mascarpone" })),
+            React.createElement(Text, { typo: "desc-small", color: "mascarpone" }, message)),
+        canManuallyClose && (React.createElement(CloseButton, { onClick: () => deleteSnack(id), "aria-label": `close snackbar ${message}` }, showCloseIcon ? (React.createElement(Icon, { render: "cross", size: 16, color: "mascarpone" })) : (React.createElement(UnderlinedText, { tag: "span", typo: "desc-medium", color: "mascarpone" }, "Dismiss"))))));
+};
+const SnackItem = styled(Box) `
+  border-radius: 16px;
+  background-color: ${theme.colors.liquorice};
+`;
+const CloseButton = styled.button `
+  cursor: pointer;
+`;
+const UnderlinedText = styled(Text) `
+  text-decoration: underline;
+`;
+//# sourceMappingURL=SnackbarItem.js.map

package/dist/Snackbar/SnackbarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAMrC,MAAM,CAAC,MAAM,YAAY,GAAc,CAAC,EACtC,aAAa,GAAG,CAAC,EACjB,EAAE,EACF,OAAO,EACP,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,WAAW,GACZ,EAAE,EAAE;IACH,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC,CAAA;IAEvD,OAAO,CACL,oBAAC,SAAS,IAAC,CAAC,EAAC,MAAM,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAC,MAAM,EAAC,IAAI,QAAC,cAAc,EAAC,eAAe;QACxE,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;YAC1B,WAAW,IAAI,CACd,oBAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,YAAY,GAAG,CACrE;YACD,oBAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvC,OAAO,CACH,CACH;QACL,gBAAgB,IAAI,CACnB,oBAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,gBAClB,kBAAkB,OAAO,EAAE,IAEtC,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,YAAY,GAAG,CACrD,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,YAAY,cAE/C,CAClB,CACW,CACf,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;sBAEP,KAAK,CAAC,MAAM,CAAC,SAAS;CAC3C,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;;CAEhC,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAElC,CAAA","sourcesContent":["import { Box } from '../Box'\nimport React, { FC } from 'react'\nimport styled from 'styled-components'\nimport { Icon } from '../Icon'\nimport { theme } from '../theme'\nimport { Text } from '../Text'\nimport { Snackbar } from './types'\nimport { useTimeout } from '../hooks'\n\ninterface Props extends Snackbar {\n  deleteSnack: (id: string) => void\n}\n\nexport const SnackbarItem: FC<Props> = ({\n  autoCloseTime = 4,\n  id,\n  message,\n  leadingIcon,\n  canManuallyClose,\n  showCloseIcon,\n  deleteSnack,\n}) => {\n  useTimeout(() => deleteSnack(id), autoCloseTime * 1000)\n\n  return (\n    <SnackItem p=\"16px\" key={id} mt=\"16px\" flex justifyContent=\"space-between\">\n      <Box flex alignItems=\"center\">\n        {leadingIcon && (\n          <Icon mr=\"12px\" render={leadingIcon} size={24} color=\"mascarpone\" />\n        )}\n        <Text typo=\"desc-small\" color=\"mascarpone\">\n          {message}\n        </Text>\n      </Box>\n      {canManuallyClose && (\n        <CloseButton\n          onClick={() => deleteSnack(id)}\n          aria-label={`close snackbar ${message}`}\n        >\n          {showCloseIcon ? (\n            <Icon render=\"cross\" size={16} color=\"mascarpone\" />\n          ) : (\n            <UnderlinedText tag=\"span\" typo=\"desc-medium\" color=\"mascarpone\">\n              Dismiss\n            </UnderlinedText>\n          )}\n        </CloseButton>\n      )}\n    </SnackItem>\n  )\n}\n\nconst SnackItem = styled(Box)`\n  border-radius: 16px;\n  background-color: ${theme.colors.liquorice};\n`\n\nconst CloseButton = styled.button`\n  cursor: pointer;\n`\n\nconst UnderlinedText = styled(Text)`\n  text-decoration: underline;\n`\n"]}

package/dist/Snackbar/hooks.d.ts

@@ -1,3 +1,3 @@
 export declare const useSnackbar: () => {
-    addSnackbar: (snackbar: import('./types').CreateSnack) => void;
+    addSnackbar: (snackbar: import("./types").CreateSnack) => void;
 };

package/dist/Snackbar/hooks.js

@@ -0,0 +1,6 @@
+import { useSnackbarContext } from './SnackbarContainer';
+export const useSnackbar = () => {
+    const { addSnackbar } = useSnackbarContext();
+    return { addSnackbar };
+};
+//# sourceMappingURL=hooks.js.map

package/dist/Snackbar/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/Snackbar/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAExD,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,EAAE,WAAW,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAE5C,OAAO,EAAE,WAAW,EAAE,CAAA;AACxB,CAAC,CAAA","sourcesContent":["import { useSnackbarContext } from './SnackbarContainer'\n\nexport const useSnackbar = () => {\n  const { addSnackbar } = useSnackbarContext()\n\n  return { addSnackbar }\n}\n"]}

package/dist/Snackbar/index.js

@@ -0,0 +1,3 @@
+export * from './SnackbarContainer';
+export * from './hooks';
+//# sourceMappingURL=index.js.map

package/dist/Snackbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Snackbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,SAAS,CAAA","sourcesContent":["export * from './SnackbarContainer'\nexport * from './hooks'\n"]}

package/dist/Snackbar/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/Snackbar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Snackbar/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from '../Icon/iconsList'\n\nexport interface Snackbar {\n  id: string\n  message: string\n  autoCloseTime?: 4 | 5 | 6 | 7 | 8 | 9 | 10\n  leadingIcon?: Icons\n  canManuallyClose?: boolean\n  showCloseIcon?: boolean\n}\n\nexport type CreateSnack = Omit<Snackbar, 'id'>\n\nexport interface SnackbarContextType {\n  addSnackbar: (snackbar: CreateSnack) => void\n}\n"]}

package/dist/SupportMessage/SupportMessage.js

@@ -0,0 +1,86 @@
+import { darken } from 'polished';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { theme } from '../theme';
+import { isReactElement } from '../utils/isReactElement';
+const styles = {
+    info: {
+        iconColor: 'liquorice',
+        backgroundColor: theme.colors.oatmeal,
+        hoverBackgroundColor: darken(0.1, theme.colors.oatmeal),
+        icon: 'info',
+    },
+    fallbackStyle: {
+        iconColor: 'liquorice',
+        backgroundColor: theme.colors.coconut,
+        hoverBackgroundColor: darken(0.1, theme.colors.coconut),
+        icon: 'info',
+    },
+    alert: {
+        iconColor: 'tangerine',
+        backgroundColor: theme.colors.sherbert,
+        hoverBackgroundColor: darken(0.1, theme.colors.sherbert),
+        icon: 'alert',
+    },
+    warning: {
+        iconColor: 'strawberry',
+        backgroundColor: theme.colors.watermelon,
+        hoverBackgroundColor: darken(0.1, theme.colors.watermelon),
+        icon: 'warning',
+    },
+    success: {
+        iconColor: 'apple',
+        backgroundColor: theme.colors.mint,
+        hoverBackgroundColor: darken(0.1, theme.colors.mint),
+        icon: 'circle-tick',
+    },
+};
+export const SupportMessage = ({ className, description, onClick, rightSideComponent, type, title, ...marginProps }) => {
+    return (React.createElement(Wrapper, { className: className, "$type": type, onClick: onClick, ...marginProps },
+        React.createElement(IconWrapper, null,
+            React.createElement(Icon, { size: 20, render: styles[type].icon, color: styles[type].iconColor })),
+        React.createElement(Box, { flex: true, direction: "column", mx: "8px" },
+            title && React.createElement(Title, null, title),
+            isReactElement(description) ? (React.createElement(DescriptionBox, null, description)) : (React.createElement(Description, { tag: "p" }, description))),
+        rightSideComponent,
+        onClick && rightSideComponent === undefined && (React.createElement(Box, { ml: { custom: 'auto' } },
+            React.createElement(Icon, { size: 16, render: "caret", color: "marzipan", rotate: 270 })))));
+};
+const IconWrapper = styled(Box) `
+  align-self: flex-start;
+`;
+const Wrapper = styled(Box)(({ $type, onClick }) => css `
+    align-items: center;
+    background-color: ${styles[$type].backgroundColor};
+    border-radius: 16px;
+    ${onClick && `cursor: pointer`};
+    padding: 12px;
+    display: flex;
+    width: 100%;
+
+    &:hover,
+    &:active {
+      ${onClick && `background-color: ${styles[$type].hoverBackgroundColor};`};
+    }
+  `);
+const Title = styled.p `
+  font-size: 16px;
+  font-weight: ${theme.font.weight.medium};
+  color: ${theme.colors.liquorice};
+  line-height: 20.8px;
+  margin-bottom: 4px;
+`;
+const DescriptionBox = styled(Box) `
+  color: ${theme.colors.liquorice};
+  font-size: 14px;
+  line-height: 20px;
+`;
+const Description = styled(Text) `
+  color: ${theme.colors.liquorice};
+  font-size: 14px;
+  line-height: 20px;
+`;
+//# sourceMappingURL=SupportMessage.js.map

package/dist/SupportMessage/SupportMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport React, { FC, MouseEventHandler, ReactElement } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Text } from '../Text'\nimport { Color, theme } from '../theme'\nimport { isReactElement } from '../utils/isReactElement'\nimport { MarginProps } from '../utils/space'\n\ntype StylesItem = {\n  iconColor: Color\n  backgroundColor: string\n  hoverBackgroundColor: string\n  icon: Icons\n}\n\nconst styles: Record<SupportMessageType, StylesItem> = {\n  info: {\n    iconColor: 'liquorice',\n    backgroundColor: theme.colors.oatmeal,\n    hoverBackgroundColor: darken(0.1, theme.colors.oatmeal),\n    icon: 'info',\n  },\n  fallbackStyle: {\n    iconColor: 'liquorice',\n    backgroundColor: theme.colors.coconut,\n    hoverBackgroundColor: darken(0.1, theme.colors.coconut),\n    icon: 'info',\n  },\n  alert: {\n    iconColor: 'tangerine',\n    backgroundColor: theme.colors.sherbert,\n    hoverBackgroundColor: darken(0.1, theme.colors.sherbert),\n    icon: 'alert',\n  },\n  warning: {\n    iconColor: 'strawberry',\n    backgroundColor: theme.colors.watermelon,\n    hoverBackgroundColor: darken(0.1, theme.colors.watermelon),\n    icon: 'warning',\n  },\n  success: {\n    iconColor: 'apple',\n    backgroundColor: theme.colors.mint,\n    hoverBackgroundColor: darken(0.1, theme.colors.mint),\n    icon: 'circle-tick',\n  },\n}\n\ntype SupportMessageType =\n  | 'info'\n  | 'fallbackStyle'\n  | 'alert'\n  | 'warning'\n  | 'success'\n\nexport type SupportMessageProps = {\n  className?: string\n  description: string | ReactElement<any>\n  onClick?: MouseEventHandler\n  /**\n   * Right side content, usually an icon or a button\n   */\n  rightSideComponent?: ReactElement<any>\n  type: SupportMessageType\n  title?: string\n} & MarginProps\n\nexport const SupportMessage: FC<SupportMessageProps> = ({\n  className,\n  description,\n  onClick,\n  rightSideComponent,\n  type,\n  title,\n  ...marginProps\n}) => {\n  return (\n    <Wrapper\n      className={className}\n      $type={type}\n      onClick={onClick}\n      {...marginProps}\n    >\n      <IconWrapper>\n        <Icon\n          size={20}\n          render={styles[type].icon}\n          color={styles[type].iconColor}\n        />\n      </IconWrapper>\n      <Box flex direction=\"column\" mx=\"8px\">\n        {title && <Title>{title}</Title>}\n        {isReactElement(description) ? (\n          <DescriptionBox>{description}</DescriptionBox>\n        ) : (\n          <Description tag=\"p\">{description}</Description>\n        )}\n      </Box>\n      {rightSideComponent}\n      {onClick && rightSideComponent === undefined && (\n        <Box ml={{ custom: 'auto' }}>\n          <Icon size={16} render=\"caret\" color=\"marzipan\" rotate={270} />\n        </Box>\n      )}\n    </Wrapper>\n  )\n}\n\ninterface IWrapper {\n  $type: SupportMessageType\n  onClick?: MouseEventHandler\n}\n\nconst IconWrapper = styled(Box)`\n  align-self: flex-start;\n`\n\nconst Wrapper = styled(Box)<IWrapper>(\n  ({ $type, onClick }) => css`\n    align-items: center;\n    background-color: ${styles[$type].backgroundColor};\n    border-radius: 16px;\n    ${onClick && `cursor: pointer`};\n    padding: 12px;\n    display: flex;\n    width: 100%;\n\n    &:hover,\n    &:active {\n      ${onClick && `background-color: ${styles[$type].hoverBackgroundColor};`};\n    }\n  `,\n)\n\nconst Title = styled.p`\n  font-size: 16px;\n  font-weight: ${theme.font.weight.medium};\n  color: ${theme.colors.liquorice};\n  line-height: 20.8px;\n  margin-bottom: 4px;\n`\n\nconst DescriptionBox = styled(Box)`\n  color: ${theme.colors.liquorice};\n  font-size: 14px;\n  line-height: 20px;\n`\n\nconst Description = styled(Text)`\n  color: ${theme.colors.liquorice};\n  font-size: 14px;\n  line-height: 20px;\n`\n"]}

package/dist/SupportMessage/index.js

@@ -0,0 +1,2 @@
+export * from './SupportMessage';
+//# sourceMappingURL=index.js.map

package/dist/SupportMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/SupportMessage/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './SupportMessage'\n"]}

package/dist/Table/Table.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { TableProps } from './types';
 /**
  * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.

package/dist/Table/Table.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Text } from '../Text';
+import { TableHeader } from './components/TableHeader';
+import { TableRow } from './components/TableRow';
+import { StyledCell, StyledTable } from './components/commonComponents';
+/**
+ * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.
+ *
+ * ## Caveats:
+ * - `subRows` should always have the same columns as the Parent table
+ * - `stripedColor` wont be applied to `subRows` or `subTables`
+ * - `rowActions` will always need an `onClick`, this will be automatically passed onto the `ReactNode` you place & will be selectable
+ * - Rows will scale depending on the cell content size
+ * - Using `clickableRow` with clickable cells, ensure you use `e.stopPropagation` in your cells `onClick`
+ *
+ * ## Improvements:
+ * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
+ */
+export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, hideTableHeader = false, }) => {
+    const showActionsCell = expandable || rowActions;
+    const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
+    return (React.createElement(StyledTable, null,
+        !hideTableHeader && (React.createElement("thead", null,
+            React.createElement(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, subTable: subTable, headerColor: headerColor, rowActions: rowActions, columnPadding: columnPadding, expandable: expandable, hasKeyline: hasKeyline }))),
+        React.createElement("tbody", null,
+            data.length === 0 && (React.createElement("tr", null,
+                React.createElement(StyledCell, { colSpan: expandSubProp, "$rowPadding": rowPadding, "$columnPadding": columnPadding }, noDataContent ? (noDataContent) : (React.createElement(Text, { align: "center" }, "No available data"))))),
+            data.length !== 0 &&
+                data.map((row, rowIndex) => (React.createElement(TableRow, { key: rowIndex, rowData: row, rowIndex: rowIndex, columns: columns, rowActions: rowActions, stripedColor: stripedColor, subTable: subTable, subRows: subRows, rowColor: rowColor, rowBorderColor: rowBorderColor, rowPadding: rowPadding, columnPadding: columnPadding, expandable: expandable, clickableRow: clickableRow }))))));
+};
+//# sourceMappingURL=Table.js.map

package/dist/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAGvE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAmB,EACtC,OAAO,EACP,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,KAAK,EAClB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,GAAG,YAAY,EAC1B,QAAQ,GAAG,SAAS,EACpB,YAAY,EACZ,cAAc,GAAG,SAAS,EAC1B,UAAU,EACV,YAAY,EACZ,UAAU,EACV,aAAa,EACb,aAAa,EACb,eAAe,GAAG,KAAK,GACT,EAAE,EAAE;IAClB,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAChD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAC3E,OAAO,CACL,oBAAC,WAAW;QACT,CAAC,eAAe,IAAI,CACnB;YACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACI,CACT;QACD;YACG,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB;gBACE,oBAAC,UAAU,IACT,OAAO,EAAE,aAAa,iBACT,UAAU,oBACP,aAAa,IAE5B,aAAa,CAAC,CAAC,CAAC,CACf,aAAa,CACd,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,wBAAyB,CAC9C,CACU,CACV,CACN;YACA,IAAI,CAAC,MAAM,KAAK,CAAC;gBAChB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC1B,oBAAC,QAAQ,IACP,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC,CACE,CACI,CACf,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Text } from '../Text'\nimport { TableHeader } from './components/TableHeader'\nimport { TableRow } from './components/TableRow'\nimport { StyledCell, StyledTable } from './components/commonComponents'\nimport { TableProps } from './types'\n\n/**\n * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.\n *\n * ## Caveats:\n * - `subRows` should always have the same columns as the Parent table\n * - `stripedColor` wont be applied to `subRows` or `subTables`\n * - `rowActions` will always need an `onClick`, this will be automatically passed onto the `ReactNode` you place & will be selectable\n * - Rows will scale depending on the cell content size\n * - Using `clickableRow` with clickable cells, ensure you use `e.stopPropagation` in your cells `onClick`\n *\n * ## Improvements:\n * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this\n */\nexport const Table = <T extends object>({\n  columns,\n  data,\n  fixedHeader = true,\n  hasKeyline = false,\n  expandable,\n  subTable,\n  subRows,\n  headerHeight,\n  headerColor = 'mascarpone',\n  rowColor = 'custard',\n  stripedColor,\n  rowBorderColor = 'oatmeal',\n  rowActions,\n  clickableRow,\n  rowPadding,\n  columnPadding,\n  noDataContent,\n  hideTableHeader = false,\n}: TableProps<T>) => {\n  const showActionsCell = expandable || rowActions\n  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n  return (\n    <StyledTable>\n      {!hideTableHeader && (\n        <thead>\n          <TableHeader\n            columns={columns}\n            fixedHeader={fixedHeader}\n            headerHeight={headerHeight}\n            subTable={subTable}\n            headerColor={headerColor}\n            rowActions={rowActions}\n            columnPadding={columnPadding}\n            expandable={expandable}\n            hasKeyline={hasKeyline}\n          />\n        </thead>\n      )}\n      <tbody>\n        {data.length === 0 && (\n          <tr>\n            <StyledCell\n              colSpan={expandSubProp}\n              $rowPadding={rowPadding}\n              $columnPadding={columnPadding}\n            >\n              {noDataContent ? (\n                noDataContent\n              ) : (\n                <Text align=\"center\">No available data</Text>\n              )}\n            </StyledCell>\n          </tr>\n        )}\n        {data.length !== 0 &&\n          data.map((row, rowIndex) => (\n            <TableRow\n              key={rowIndex}\n              rowData={row}\n              rowIndex={rowIndex}\n              columns={columns}\n              rowActions={rowActions}\n              stripedColor={stripedColor}\n              subTable={subTable}\n              subRows={subRows}\n              rowColor={rowColor}\n              rowBorderColor={rowBorderColor}\n              rowPadding={rowPadding}\n              columnPadding={columnPadding}\n              expandable={expandable}\n              clickableRow={clickableRow}\n            />\n          ))}\n      </tbody>\n    </StyledTable>\n  )\n}\n"]}

package/dist/Table/components/RowActions.d.ts

@@ -1,3 +1,3 @@
-import { default as React } from 'react';
+import React from 'react';
 import { RowActionsProps } from '../types';
 export declare const RowActions: <T extends object>({ rowData, rowActions, expandable, isExpanded, toggleExpansion, }: RowActionsProps<T>) => React.JSX.Element;

package/dist/Table/components/RowActions.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../../Box';
+import { Button } from '../../Button';
+import { IconStrict } from '../../IconStrict';
+import { Tooltip } from '../../Tooltip';
+import { focusOutlineStyle } from '../../utils/focusOutline';
+import { isReactElement } from '../../utils/isReactElement';
+import { StyledCell } from './commonComponents';
+export const RowActions = ({ rowData, rowActions, expandable, isExpanded, toggleExpansion, }) => {
+    const handleAction = async (e, action) => {
+        e.stopPropagation();
+        await action(rowData);
+    };
+    return (React.createElement(StyledCell, { "$stickyCell": Boolean(rowActions) || Boolean(expandable), "$rowActionsBgColor": rowActions?.bgColor },
+        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-end" },
+            rowActions?.actions?.map((action, actionIndex) => {
+                if (!action.showCondition || action.showCondition(rowData)) {
+                    return (React.createElement(Wrapper, { flex: true, key: actionIndex },
+                        'element' in action &&
+                            isReactElement(action.element) &&
+                            React.cloneElement(action.element, {
+                                onClick: async (e) => {
+                                    await handleAction(e, action.onClick);
+                                },
+                                tabIndex: 0,
+                                className: 'reactElementRowAction',
+                            }),
+                        !('element' in action) && action.genericButton && (React.createElement(Button, { ...action.genericButton, handleClick: (e) => void handleAction(e, action.onClick) }, action.genericButton.children)),
+                        !('element' in action) &&
+                            action.iconButton &&
+                            (action.iconButton?.tooltipText ? (React.createElement(Tooltip, { content: action.iconButton.tooltipText, position: 'bottom', variant: "bubblegum" },
+                                React.createElement(IconStrict, { ...action.iconButton, handleClick: (e) => void handleAction(e, action.onClick) }))) : (React.createElement(IconStrict, { ...action.iconButton, handleClick: (e) => void handleAction(e, action.onClick) })))));
+                }
+                return null;
+            }),
+            expandable?.(rowData) && (React.createElement(CaretIcon, { render: "caret", handleClick: (e) => {
+                    e.stopPropagation();
+                    toggleExpansion();
+                }, size: 36, "$isOpen": isExpanded, backgroundColor: "cream" })))));
+};
+const Wrapper = styled(Box) `
+  white-space: nowrap;
+  margin-right: 8px;
+
+  &:last-child {
+    margin-right: 0px;
+  }
+
+  .reactElementRowAction {
+    cursor: pointer;
+    ${focusOutlineStyle}
+  }
+`;
+const CaretIcon = styled(IconStrict)(({ $isOpen }) => `
+    transform: ${$isOpen ? 'rotate(90deg)' : 'rotate(0deg)'};
+    transition: transform 0.3s ease;
+  `);
+//# sourceMappingURL=RowActions.js.map

package/dist/Table/components/RowActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowActions.js","sourceRoot":"","sources":["../../../src/Table/components/RowActions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FormEvent } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { Button } from '../../Button'\nimport { IconStrict } from '../../IconStrict'\nimport { Tooltip } from '../../Tooltip'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { isReactElement } from '../../utils/isReactElement'\nimport { RowActionsProps } from '../types'\nimport { StyledCell } from './commonComponents'\n\nexport const RowActions = <T extends object>({\n  rowData,\n  rowActions,\n  expandable,\n  isExpanded,\n  toggleExpansion,\n}: RowActionsProps<T>) => {\n  const handleAction = async (\n    e: MouseEvent | FormEvent<HTMLButtonElement>,\n    action: (rowData: T) => void | Promise<void>,\n  ) => {\n    e.stopPropagation()\n    await action(rowData)\n  }\n\n  return (\n    <StyledCell\n      $stickyCell={Boolean(rowActions) || Boolean(expandable)}\n      $rowActionsBgColor={rowActions?.bgColor}\n    >\n      <Box flex alignItems=\"center\" justifyContent=\"flex-end\">\n        {rowActions?.actions?.map((action, actionIndex) => {\n          if (!action.showCondition || action.showCondition(rowData)) {\n            return (\n              <Wrapper flex key={actionIndex}>\n                {'element' in action &&\n                  isReactElement(action.element) &&\n                  React.cloneElement(action.element, {\n                    onClick: async (e: MouseEvent) => {\n                      await handleAction(e, action.onClick)\n                    },\n                    tabIndex: 0,\n                    className: 'reactElementRowAction',\n                  })}\n                {!('element' in action) && action.genericButton && (\n                  <Button\n                    {...action.genericButton}\n                    handleClick={(e) => void handleAction(e, action.onClick)}\n                  >\n                    {action.genericButton.children}\n                  </Button>\n                )}\n                {!('element' in action) &&\n                  action.iconButton &&\n                  (action.iconButton?.tooltipText ? (\n                    <Tooltip\n                      content={action.iconButton.tooltipText}\n                      position={'bottom'}\n                      variant=\"bubblegum\"\n                    >\n                      <IconStrict\n                        {...action.iconButton}\n                        handleClick={(e) =>\n                          void handleAction(e, action.onClick)\n                        }\n                      />\n                    </Tooltip>\n                  ) : (\n                    <IconStrict\n                      {...action.iconButton}\n                      handleClick={(e) => void handleAction(e, action.onClick)}\n                    />\n                  ))}\n              </Wrapper>\n            )\n          }\n          return null\n        })}\n        {expandable?.(rowData) && (\n          <CaretIcon\n            render=\"caret\"\n            handleClick={(e) => {\n              e.stopPropagation()\n              toggleExpansion()\n            }}\n            size={36}\n            $isOpen={isExpanded}\n            backgroundColor=\"cream\"\n          />\n        )}\n      </Box>\n    </StyledCell>\n  )\n}\n\nconst Wrapper = styled(Box)`\n  white-space: nowrap;\n  margin-right: 8px;\n\n  &:last-child {\n    margin-right: 0px;\n  }\n\n  .reactElementRowAction {\n    cursor: pointer;\n    ${focusOutlineStyle}\n  }\n`\n\nconst CaretIcon = styled(IconStrict)<{ $isOpen?: boolean }>(\n  ({ $isOpen }) => `\n    transform: ${$isOpen ? 'rotate(90deg)' : 'rotate(0deg)'};\n    transition: transform 0.3s ease;\n  `,\n)\n"]}

package/dist/Table/components/TableHeader.d.ts

@@ -1,3 +1,3 @@
-import { default as React } from 'react';
+import React from 'react';
 import { TableHeaderProps } from '../types';
 export declare const TableHeader: <T extends object>({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, hasKeyline, }: TableHeaderProps<T>) => React.JSX.Element;

package/dist/Table/components/TableHeader.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyledHeaderCell, StyledRow } from './commonComponents';
+export const TableHeader = ({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, hasKeyline, }) => {
+    return (React.createElement(StyledRow, null,
+        columns.map((column, columnIndex) => (React.createElement(StyledHeaderCell, { key: columnIndex, "$fixedHeader": fixedHeader, "$headerHeight": headerHeight, "$minWidth": column.minWidth, "$maxWidth": column.maxWidth, "$headerColor": headerColor, "$columnPadding": columnPadding, "$hasKeyline": hasKeyline }, column.name))),
+        (expandable || rowActions) && (React.createElement(StyledHeaderCell, { "$fixedHeader": fixedHeader, "$stickyCell": true, "$minWidth": rowActions?.minWidth, "$headerColor": headerColor, "$columnPadding": columnPadding, "$hasKeyline": hasKeyline }, "Actions"))));
+};
+//# sourceMappingURL=TableHeader.js.map

package/dist/Table/components/TableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/Table/components/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAEhE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAmB,EAC5C,OAAO,EACP,WAAW,EACX,WAAW,EACX,UAAU,EACV,YAAY,EACZ,aAAa,EACb,UAAU,EACV,UAAU,GACU,EAAE,EAAE;IACxB,OAAO,CACL,oBAAC,SAAS;QACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACpC,oBAAC,gBAAgB,IACf,GAAG,EAAE,WAAW,kBACF,WAAW,mBACV,YAAY,eAChB,MAAM,CAAC,QAAQ,eACf,MAAM,CAAC,QAAQ,kBACZ,WAAW,oBACT,aAAa,iBAChB,UAAU,IAEtB,MAAM,CAAC,IAAI,CACK,CACpB,CAAC;QACD,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI,CAC7B,oBAAC,gBAAgB,oBACD,WAAW,iBACZ,IAAI,eACN,UAAU,EAAE,QAAQ,kBACjB,WAAW,oBACT,aAAa,iBAChB,UAAU,cAGN,CACpB,CACS,CACb,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { TableHeaderProps } from '../types'\nimport { StyledHeaderCell, StyledRow } from './commonComponents'\n\nexport const TableHeader = <T extends object>({\n  columns,\n  fixedHeader,\n  headerColor,\n  rowActions,\n  headerHeight,\n  columnPadding,\n  expandable,\n  hasKeyline,\n}: TableHeaderProps<T>) => {\n  return (\n    <StyledRow>\n      {columns.map((column, columnIndex) => (\n        <StyledHeaderCell\n          key={columnIndex}\n          $fixedHeader={fixedHeader}\n          $headerHeight={headerHeight}\n          $minWidth={column.minWidth}\n          $maxWidth={column.maxWidth}\n          $headerColor={headerColor}\n          $columnPadding={columnPadding}\n          $hasKeyline={hasKeyline}\n        >\n          {column.name}\n        </StyledHeaderCell>\n      ))}\n      {(expandable || rowActions) && (\n        <StyledHeaderCell\n          $fixedHeader={fixedHeader}\n          $stickyCell={true}\n          $minWidth={rowActions?.minWidth}\n          $headerColor={headerColor}\n          $columnPadding={columnPadding}\n          $hasKeyline={hasKeyline}\n        >\n          Actions\n        </StyledHeaderCell>\n      )}\n    </StyledRow>\n  )\n}\n"]}

package/dist/Table/components/TableRow.d.ts

@@ -1,3 +1,3 @@
-import { default as React } from 'react';
+import React from 'react';
 import { TableRowProps } from '../types';
 export declare const TableRow: <T extends object>({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, clickableRow, }: TableRowProps<T>) => React.JSX.Element;

package/dist/Table/components/TableRow.js

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { isReactElement } from '../../utils/isReactElement';
+import { isMappedReactElement } from '../helpers';
+import { RowActions } from './RowActions';
+import { StyledCell, StyledRow } from './commonComponents';
+export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, clickableRow, }) => {
+    const [expandedRows, setExpandedRows] = useState([]);
+    const toggleRowExpansion = (rowIndex) => {
+        setExpandedRows((prevState) => prevState.includes(rowIndex)
+            ? prevState.filter((index) => index !== rowIndex)
+            : [...prevState, rowIndex]);
+    };
+    const subRowsData = subRows?.rows(rowData);
+    const subTableData = subTable?.table(rowData);
+    const showSubRowsOnExpand = subRows?.showOnExpand?.(rowData);
+    const showSubTableOnExpand = subTable?.showOnExpand?.(rowData);
+    const showActionsCell = expandable || rowActions;
+    const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledRow, { "$stripedColor": stripedColor, "$rowColor": rowColor, "$rowBorderColor": rowBorderColor, "$clickableRow": !!clickableRow, onClick: () => clickableRow && clickableRow(rowData), tabIndex: clickableRow && 0 },
+            columns.map((column, columnIndex) => {
+                let cellContent;
+                if (column.cell) {
+                    cellContent = column.cell(rowData, rowIndex, column, rowIndex);
+                }
+                return (React.createElement(StyledCell, { key: columnIndex, "$rowPadding": rowPadding, "$columnPadding": columnPadding, "$minWidth": column.minWidth, "$maxWidth": column.maxWidth, "$noWrapContent": column.noWrapContent, "$truncateContent": column.truncateContent, "$hideOverflow": column.hideOverflow }, cellContent));
+            }),
+            (showActionsCell || showActions) && (React.createElement(RowActions, { expandable: expandable, rowActions: rowActions, rowData: rowData, isExpanded: expandedRows.includes(rowIndex), toggleExpansion: () => toggleRowExpansion(rowIndex) }))),
+        expandedRows.includes(rowIndex) && (React.createElement(React.Fragment, null,
+            subRows &&
+                subRowsData &&
+                showSubRowsOnExpand &&
+                isReactElement(subRowsData) &&
+                React.cloneElement(subRowsData, {
+                    rowPadding: rowPadding,
+                    columnPadding: columnPadding,
+                }),
+            subRows &&
+                subRowsData &&
+                showSubRowsOnExpand &&
+                isMappedReactElement(subRowsData) &&
+                subRowsData.map((row) => React.cloneElement(row, {
+                    rowPadding: rowPadding,
+                    showActions: showActionsCell,
+                })),
+            subTable && showSubTableOnExpand && subTableData && (React.createElement(StyledCell, { colSpan: expandSubProp }, React.cloneElement(subTableData, {
+                rowPadding: rowPadding,
+                columnPadding: columnPadding,
+            }))))),
+        subRows &&
+            subRowsData &&
+            !showSubRowsOnExpand &&
+            isReactElement(subRowsData) &&
+            React.cloneElement(subRowsData, {
+                rowPadding: rowPadding,
+                columnPadding: columnPadding,
+            }),
+        subRows &&
+            subRowsData &&
+            !showSubRowsOnExpand &&
+            isMappedReactElement(subRowsData) &&
+            subRowsData.map((row) => React.cloneElement(row, {
+                rowPadding: rowPadding,
+                columnPadding: columnPadding,
+            })),
+        subTable && subTableData && !showSubTableOnExpand && (React.createElement(StyledCell, { colSpan: expandSubProp }, React.cloneElement(subTableData, {
+            rowPadding: rowPadding,
+            columnPadding: columnPadding,
+        })))));
+};
+//# sourceMappingURL=TableRow.js.map

package/dist/Table/components/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/Table/components/TableRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useState } from 'react'\nimport { isReactElement } from '../../utils/isReactElement'\nimport { isMappedReactElement } from '../helpers'\nimport { TableRowProps } from '../types'\nimport { RowActions } from './RowActions'\nimport { StyledCell, StyledRow } from './commonComponents'\n\nexport const TableRow = <T extends object>({\n  rowData,\n  rowIndex,\n  columns,\n  subRows,\n  subTable,\n  stripedColor,\n  rowActions,\n  rowColor,\n  rowBorderColor,\n  rowPadding,\n  columnPadding,\n  showActions,\n  expandable,\n  clickableRow,\n}: TableRowProps<T>) => {\n  const [expandedRows, setExpandedRows] = useState<number[]>([])\n\n  const toggleRowExpansion = (rowIndex: number) => {\n    setExpandedRows((prevState) =>\n      prevState.includes(rowIndex)\n        ? prevState.filter((index) => index !== rowIndex)\n        : [...prevState, rowIndex],\n    )\n  }\n\n  const subRowsData = subRows?.rows(rowData)\n  const subTableData = subTable?.table(rowData)\n  const showSubRowsOnExpand = subRows?.showOnExpand?.(rowData)\n  const showSubTableOnExpand = subTable?.showOnExpand?.(rowData)\n\n  const showActionsCell = expandable || rowActions\n  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n\n  return (\n    <>\n      <StyledRow\n        $stripedColor={stripedColor}\n        $rowColor={rowColor}\n        $rowBorderColor={rowBorderColor}\n        $clickableRow={!!clickableRow}\n        onClick={() => clickableRow && clickableRow(rowData)}\n        tabIndex={clickableRow && 0}\n      >\n        {columns.map((column, columnIndex) => {\n          let cellContent: ReactNode\n          if (column.cell) {\n            cellContent = column.cell(rowData, rowIndex, column, rowIndex)\n          }\n\n          return (\n            <StyledCell\n              key={columnIndex}\n              $rowPadding={rowPadding}\n              $columnPadding={columnPadding}\n              $minWidth={column.minWidth}\n              $maxWidth={column.maxWidth}\n              $noWrapContent={column.noWrapContent}\n              $truncateContent={column.truncateContent}\n              $hideOverflow={column.hideOverflow}\n            >\n              {cellContent}\n            </StyledCell>\n          )\n        })}\n\n        {(showActionsCell || showActions) && (\n          <RowActions\n            expandable={expandable}\n            rowActions={rowActions}\n            rowData={rowData}\n            isExpanded={expandedRows.includes(rowIndex)}\n            toggleExpansion={() => toggleRowExpansion(rowIndex)}\n          />\n        )}\n      </StyledRow>\n      {/**\n       * This could be extracted out and cleaned up\n       * this section is for expanded rows only\n       * Items rendered here wont show unless expanded\n       */}\n      {expandedRows.includes(rowIndex) && (\n        <>\n          {subRows &&\n            subRowsData &&\n            showSubRowsOnExpand &&\n            isReactElement(subRowsData) &&\n            React.cloneElement(subRowsData, {\n              rowPadding: rowPadding,\n              columnPadding: columnPadding,\n            })}\n\n          {subRows &&\n            subRowsData &&\n            showSubRowsOnExpand &&\n            isMappedReactElement(subRowsData) &&\n            subRowsData.map((row) =>\n              React.cloneElement(row, {\n                rowPadding: rowPadding,\n                showActions: showActionsCell,\n              }),\n            )}\n\n          {subTable && showSubTableOnExpand && subTableData && (\n            <StyledCell colSpan={expandSubProp}>\n              {React.cloneElement(subTableData, {\n                rowPadding: rowPadding,\n                columnPadding: columnPadding,\n              })}\n            </StyledCell>\n          )}\n        </>\n      )}\n      {/**\n       * This could be extracted out and cleaned up\n       * this section is for rendering things under a row,\n       * without the need to expand.\n       * Items rendered here wont show when expanded\n       */}\n      {subRows &&\n        subRowsData &&\n        !showSubRowsOnExpand &&\n        isReactElement(subRowsData) &&\n        React.cloneElement(subRowsData, {\n          rowPadding: rowPadding,\n          columnPadding: columnPadding,\n        })}\n      {subRows &&\n        subRowsData &&\n        !showSubRowsOnExpand &&\n        isMappedReactElement(subRowsData) &&\n        subRowsData.map((row) =>\n          React.cloneElement(row, {\n            rowPadding: rowPadding,\n            columnPadding: columnPadding,\n          }),\n        )}\n      {subTable && subTableData && !showSubTableOnExpand && (\n        <StyledCell colSpan={expandSubProp}>\n          {React.cloneElement(subTableData, {\n            rowPadding: rowPadding,\n            columnPadding: columnPadding,\n          })}\n        </StyledCell>\n      )}\n    </>\n  )\n}\n"]}

package/dist/Table/components/commonComponents.d.ts

@@ -1,6 +1,6 @@
 import { TransientProps } from 'utils/utilTypes';
 import { TableStylesProps } from '../types';
-export declare const StyledTable: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
-export declare const StyledHeaderCell: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, TransientProps<TableStylesProps>>> & string;
-export declare const StyledCell: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, TransientProps<TableStylesProps>>> & string;
-export declare const StyledRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, TransientProps<TableStylesProps>>> & string;
+export declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
+export declare const StyledHeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, TransientProps<TableStylesProps>>> & string;
+export declare const StyledCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, TransientProps<TableStylesProps>>> & string;
+export declare const StyledRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, TransientProps<TableStylesProps>>> & string;