redux-connected-devtools 1.0.2 → 1.0.4

package/dist/components/DevInspector/DevInspector.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container } from './DevInspector.style';
+import RequestJourney from '../RequestJourney/RequestJourney';
+import RequestDetails from '../RequestDetails/RequestDetails';
+export function DevInspector(props) {
+    const { item } = props;
+    if (!item) {
+        return (_jsx(Container, { className: 'DevInspector-container', "data-testid": 'DevInspector-container' }));
+    }
+    return (_jsxs(Container, { className: 'DevInspector-container', "data-testid": 'DevInspector-container', children: [_jsx(RequestDetails, { item: item }), _jsx(RequestJourney, { item: item })] }));
+}
+export default DevInspector;

package/{src/components/DevInspector/DevInspector.style.tsx → dist/components/DevInspector/DevInspector.style.js}

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
-
-export const Container = styled.div`
+export const Container = styled.div `
     flex: 1;
     display: flex;
     flex-direction: column;
-    background-color: rgba(0, 0, 0, 0.1);
 `;

package/dist/components/DevList/DevList.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container, Empty } from './DevList.style';
+import { FixedSizeList as List } from 'react-window';
+import classnames from 'classnames';
+export function DevList(props) {
+    const { row: Cmp, items, selectedRow } = props;
+    const Item = (rowInfo) => {
+        const { index, style } = rowInfo;
+        const item = items[index];
+        const className = classnames({ selected: item.id === selectedRow?.id });
+        return (_jsx(Cmp, { onClick: props.onClick, className: className, index: index, style: style, item: item }));
+    };
+    function renderEmpty() {
+        return _jsx(Empty, { children: "Empty list" });
+    }
+    function renderList() {
+        if (items.length === 0) {
+            return renderEmpty();
+        }
+        return (_jsx(List, { height: 850, itemCount: items.length, itemSize: 68, width: 350, className: 'list', children: Item }));
+    }
+    return (_jsx(Container, { className: 'DevList-container', "data-testid": 'DevList-container', children: renderList() }));
+}
+export default DevList;

package/{src/components/DevList/DevList.style.tsx → dist/components/DevList/DevList.style.js}

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
-
-export const Container = styled.div`
+export const Container = styled.div `
     flex: 1;
 
     .list {
@@ -24,8 +23,7 @@ export const Container = styled.div`
         }
     }
 `;
-
-export const Empty = styled.div`
+export const Empty = styled.div `
     color: #456;
     margin: 30px;
     font-size: 17px;

package/dist/components/DevMenu/DevMenu.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container, MenuGroup, MenuGroupTitle, MenuItem, Title, Badge, BadgeTotal, } from './DevMenu.style';
+import classnames from 'classnames';
+export function DevMenu(props) {
+    const { groups, items, selectedId, badges, badgesTotal } = props;
+    function renderItem(item) {
+        const { title, id } = item;
+        const selected = id === selectedId;
+        const badge = badges[id];
+        const badgeTotal = badgesTotal[id];
+        return (_jsxs(MenuItem, { className: classnames({ selected }), onClick: () => props.onClick(item), children: [_jsx(Title, { children: title }), badgeTotal > 0 && badgeTotal !== badge && (_jsx(BadgeTotal, { children: badgeTotal })), badge > 0 && _jsx(Badge, { children: badge })] }, item.id));
+    }
+    function renderItems(groupItems) {
+        return groupItems.map((item) => renderItem(item));
+    }
+    function renderGroup(group) {
+        const groupItems = items.filter((item) => item.group === group);
+        return (_jsxs(MenuGroup, { children: [_jsx(MenuGroupTitle, { children: group }), renderItems(groupItems)] }, group));
+    }
+    function renderGroups() {
+        return groups.map((group) => renderGroup(group));
+    }
+    return (_jsx(Container, { className: 'DevMenu-container', "data-testid": 'DevMenu-container', children: renderGroups() }));
+}
+export default DevMenu;

package/{src/components/DevMenu/DevMenu.style.tsx → dist/components/DevMenu/DevMenu.style.js}

@@ -1,45 +1,42 @@
 import styled from 'styled-components';
-
-export const Container = styled.div`
+export const Container = styled.div `
     width: 190px;
-    border-right: 1px solid rgba(255, 255, 255, 0.2);
+    ${(props) => props.theme.borderRight('1px solid rgba(255, 255, 255, 0.2)')}
     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 `;
-
-export const MenuGroup = styled.div`
+export const MenuGroup = styled.div `
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 `;
-
-export const MenuGroupTitle = styled.div`
+export const MenuGroupTitle = styled.div `
     font-size: 13px;
     padding: 5px 10px;
     color: rgba(255, 255, 255, 0.5);
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     background-color: rgba(0, 0, 0, 0.1);
 `;
-
-export const MenuItem = styled.div<{ selected: boolean }>`
+export const MenuItem = styled.div `
     display: flex;
     flex-direction: row;
     align-items: center;
     padding: 6px 10px;
     font-size: 14px;
-    color: ${(props) =>
-        props.selected ? 'gold' : 'rgba(255, 255, 255, 0.89)'};
-    background-color: ${(props) =>
-        props.selected ? 'rgba(255, 255, 255, 0.05)' : 'transparent'};
+    color: rgba(255, 255, 255, 0.89);
+    background-color: transparent;
+
+    &.selected {
+        color: gold;
+        background-color: rgba(255, 255, 255, 0.05);
+    }
 
     &:hover {
         background-color: rgba(255, 255, 255, 0.1);
         cursor: pointer;
     }
 `;
-
-export const Title = styled.div`
+export const Title = styled.div `
     flex: 1;
 `;
-
-export const Badge = styled.div`
+export const Badge = styled.div `
     background-color: rgba(0, 0, 80, 0.3);
     padding: 0 4px;
     font-size: 12px;
@@ -47,7 +44,6 @@ export const Badge = styled.div`
     border: 1px solid #334;
     color: cyan;
 `;
-
-export const BadgeTotal = styled(Badge)`
+export const BadgeTotal = styled(Badge) `
     color: #555;
 `;

package/dist/components/DevPanel/DevPanel.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DevMenu from '../../containers/DevMenuContainer';
+import { useState } from 'react';
+import { Actions, Container, Content } from './DevPanel.style';
+import { devComponents } from '../../data/devComponents';
+import { devRoutes } from '../../data/devRoutes';
+export function DevPanel(props) {
+    const [route, setRoute] = useState(devRoutes[0]);
+    function renderRoute() {
+        const Cmp = devComponents[route.componentId];
+        return _jsx(Cmp, {}, route.id);
+    }
+    return (_jsxs(Container, { className: 'DevPanel-container', "data-testid": 'DevPanel-container', children: [_jsx(DevMenu, { selectedId: route.id, onClick: (item) => setRoute(item) }), _jsx(Actions, { children: props.children }), _jsx(Content, { children: renderRoute() })] }));
+}
+/*
+    for the chrome extension devtools panel
+    TODO: find another way to encapsulate this
+
+let bgConnection;
+
+function init(id: string) {
+    bgConnection = chrome.runtime?.connect({
+        name: id,
+    });
+
+    if (bgConnection) {
+        bgConnection.onMessage.addListener((message: Json) => {
+            console.log('message ->', message);
+        });
+    }
+}
+
+if (chrome) {
+    const tabId = String(chrome.devtools?.inspectedWindow.tabId ?? '');
+    init(tabId);
+}
+*/
+export default DevPanel;

package/dist/components/DevPanel/DevPanel.style.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+export const Container = styled.div `
+    flex: 1;
+    color: #eee;
+    background-color: #232332;
+    display: flex;
+    flex-direction: row;
+`;
+export const Content = styled.div `
+    flex: 1;
+    background-color: rgba(0, 0, 0, 0.15);
+    display: flex;
+    flex-direction: column;
+`;
+export const Actions = styled.div `
+    position: absolute;
+    bottom: 5px;
+    ${(props) => props.theme.left('10px')}
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+`;

package/dist/components/DevtoolsApp/DevtoolsApp.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '../Icon/Icon';
+import { useRef } from 'react';
+import { Container } from './DevtoolsApp.style';
+import { DevPanelContainer } from '../../containers/DevPanelContainer';
+import { Provider } from 'react-redux';
+import Size from '../Size/Size';
+import classnames from 'classnames';
+export function DevtoolsApp(props) {
+    const { connectedStore, storeSizeInBytes, isDarkMode } = props;
+    const ref = useRef(null);
+    const className = classnames('DevtoolsApp-container', {
+        darkMode: isDarkMode,
+    });
+    return (_jsx(Container, { ref: ref, className: className, "data-testid": 'DevtoolsApp-container', children: _jsx(Provider, { store: connectedStore, children: _jsxs(DevPanelContainer, { children: [_jsx(Size, { size: storeSizeInBytes }), _jsx(Icon, { name: 'clearAll', onClick: () => props.clearRequests() }), _jsx(Icon, { name: 'download', onClick: props.downloadState })] }) }) }));
+}
+export default DevtoolsApp;

package/dist/components/DevtoolsApp/DevtoolsApp.style.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+export const Container = styled.div `
+    flex: 1;
+    background-color: #223;
+    z-index: 3;
+    color: #eee;
+    display: flex;
+    flex-direction: column;
+    min-width: 880px;
+    min-height: 880px;
+`;

package/dist/components/Icon/AllIcons.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Download = (props) => {
+    const { size = 24 } = props;
+    return (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: `${size}px`, height: `${size}px`, fill: 'currentColor', children: [_jsx("path", { d: 'M0 0h24v24H0z', fill: 'none' }), _jsx("path", { d: 'M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z' })] }));
+};
+const Close = (props) => {
+    const { size = 24 } = props;
+    return (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: `${size}px`, height: `${size}px`, fill: 'currentColor', children: [_jsx("path", { d: 'M0 0h24v24H0z', fill: 'none' }), _jsx("path", { d: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' })] }));
+};
+const ClearAll = (props) => {
+    const { size = 24 } = props;
+    return (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: `${size}px`, height: `${size}px`, fill: 'currentColor', children: [_jsx("path", { d: 'M0 0h24v24H0z', fill: 'none' }), _jsx("path", { d: 'M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z' })] }));
+};
+export const allIcons = {
+    close: Close,
+    clearAll: ClearAll,
+    download: Download,
+};

package/dist/components/Icon/Icon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { allIcons } from './AllIcons';
+import { Container } from './Icon.style';
+export function Icon(props) {
+    const { name, size = 20, color } = props;
+    const Cmp = allIcons[name];
+    return (_jsx(Container, { className: 'Icon-container', "data-testid": 'Icon-container', color: color, onClick: props.onClick, children: _jsx(Cmp, { size: size }) }));
+}
+export default Icon;

package/dist/components/Icon/Icon.style.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+export const Container = styled.div `
+    margin: 0 3px;
+    color: ${(props) => props.color ?? 'inherit'};
+    cursor: pointer;
+
+    &:hover {
+        color: gold;
+    }
+`;

package/{src/components/JourneyRow/JourneyRow.tsx → dist/components/JourneyRow/JourneyRow.js}

@@ -1,58 +1,35 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Time from '../Time/Time';
 import { Container, Status, DataIcon, Delta, Flex } from './JourneyRow.style';
-import { JourneyPoint, LifecycleStatus } from 'redux-connected';
-
-export type JourneyRowProps = {
-    point: JourneyPoint;
-};
-
-const statusMap: Record<LifecycleStatus, string> = {
+import { LifecycleStatus } from 'redux-connected';
+const statusMap = {
     [LifecycleStatus.RECEIVED]: 'Received',
+    [LifecycleStatus.POST_ACTION_OPTIMISTIC]: 'Post action (optimistic)',
     [LifecycleStatus.IN_QUEUE]: 'In queue',
     [LifecycleStatus.GENERAL_ERROR]: 'General error',
     [LifecycleStatus.PENDING_API_RESPONSE]: 'Pending API',
     [LifecycleStatus.API_ERROR]: 'API error',
     [LifecycleStatus.POST_ACTION]: 'Post action',
+    [LifecycleStatus.FAILED]: 'Failed',
 };
-
-export function JourneyRow(props: JourneyRowProps) {
+export function JourneyRow(props) {
     const { point } = props;
     const { status, timestamp, data, delta = '' } = point;
-
     function printPoint() {
         console.log(data);
     }
-
     function renderDataIcon() {
         if (!data) {
             return null;
         }
-
-        return <DataIcon>D</DataIcon>;
+        return _jsx(DataIcon, { children: "D" });
     }
-
     function renderDelta() {
         if (!delta) {
             return null;
         }
-
-        return <Delta>+{delta.toLocaleString()}</Delta>;
+        return _jsxs(Delta, { children: ["+", delta.toLocaleString()] });
     }
-
-    return (
-        <Container
-            className='JourneyRow-container'
-            data-testid='JourneyRow-container'
-            onClick={printPoint}
-        >
-            <Status>{statusMap[status]}</Status>
-            {renderDataIcon()}
-            <Flex />
-            {renderDelta()}
-            <Time value={timestamp} />
-        </Container>
-    );
+    return (_jsxs(Container, { className: 'JourneyRow-container', "data-testid": 'JourneyRow-container', onClick: printPoint, children: [_jsx(Status, { children: statusMap[status] }), renderDataIcon(), _jsx(Flex, {}), renderDelta(), _jsx(Time, { value: timestamp })] }));
 }
-
 export default JourneyRow;

package/{src/components/JourneyRow/JourneyRow.style.tsx → dist/components/JourneyRow/JourneyRow.style.js}

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
-
-export const Container = styled.div`
+export const Container = styled.div `
     flex: 1;
     display: flex;
     flex-direction: row;
@@ -16,31 +15,27 @@ export const Container = styled.div`
         cursor: pointer;
     }
 `;
-
-export const Status = styled.div`
+export const Status = styled.div `
     color: #aaa;
 `;
-
-export const DataIcon = styled.div`
+export const DataIcon = styled.div `
     background-color: #000;
     padding: 3px 7px;
     font-size: 13px;
     font-weight: bold;
     color: purple;
     border-radius: 5px;
-    margin-left: 10px;
+    ${(props) => props.theme.marginLeft('10px')}
 `;
-
-export const Delta = styled.div`
+export const Delta = styled.div `
     font-size: 13px;
     width: 60px;
     font-weight: bold;
     color: olive;
-    margin-right: 10px;
+    ${(props) => props.theme.marginRight('10px')}
     text-align: center;
     font-family: monospace;
 `;
-
-export const Flex = styled.div`
+export const Flex = styled.div `
     flex: 1;
 `;

package/dist/components/JsonViewer/JsonViewer.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container } from './JsonViewer.style';
+export function JsonViewer(props) {
+    const { json, width } = props;
+    return (_jsx(Container, { className: 'JsonViewer-container', "data-testid": 'JsonViewer-container', width: width, children: _jsx("pre", { children: JSON.stringify(json, null, 4) }) }));
+}
+export default JsonViewer;

package/{src/components/JsonViewer/JsonViewer.style.tsx → dist/components/JsonViewer/JsonViewer.style.js}

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
-
-export const Container = styled.div<{ width?: number }>`
+export const Container = styled.div `
     flex: 1;
     max-height: 850px;
     overflow: auto;

package/dist/components/Lifecycle/Lifecycle.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DevInspector from '../DevInspector/DevInspector';
+import DevList from '../DevList/DevList';
+import { useState } from 'react';
+import RequestRow from '../RequestRow/RequestRow';
+import { Container } from './Lifecycle.style';
+export function Lifecycle(props) {
+    const { requests } = props;
+    const [item, setItem] = useState();
+    function onClick(newItem) {
+        setItem(newItem);
+    }
+    return (_jsxs(Container, { className: 'Lifecycle-container', "data-testid": 'Lifecycle-container', children: [_jsx(DevList, { items: requests, row: RequestRow, onClick: onClick, selectedRow: item }), _jsx(DevInspector, { item: item })] }));
+}
+export default Lifecycle;

package/{src/components/Lifecycle/Lifecycle.style.tsx → dist/components/Lifecycle/Lifecycle.style.js}

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
-
-export const Container = styled.div`
+export const Container = styled.div `
     flex: 1;
     display: flex;
 `;

package/dist/components/RequestDetails/RequestDetails.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container, Table, Tr, Td } from './RequestDetails.style';
+import JsonViewer from '../JsonViewer/JsonViewer';
+import bytes from 'bytes';
+export function RequestDetails(props) {
+    const { item } = props;
+    return (_jsxs(Container, { className: 'RequestDetails-container', "data-testid": 'RequestDetails-container', children: [_jsx(Table, { children: _jsxs("tbody", { children: [_jsxs(Tr, { children: [_jsx(Td, { children: "sequence" }), _jsx(Td, { children: item.sequence })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "id" }), _jsx(Td, { children: item.shortId })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "apiVerb" }), _jsx(Td, { children: item.argsApiVerb })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "connection" }), _jsx(Td, { children: item.argsConnectionType })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "duration" }), _jsx(Td, { children: item.apiDuration })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "nodeName" }), _jsx(Td, { children: item.argsNodeName })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "responseSize" }), _jsx(Td, { children: item.apiResponseSize &&
+                                        bytes(item.apiResponseSize) })] })] }) }), _jsx(JsonViewer, { width: 290, json: item.originalAction })] }));
+}
+export default RequestDetails;

package/dist/components/RequestDetails/RequestDetails.style.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+export const Container = styled.div `
+    flex: 1;
+    padding: 20px;
+`;
+export const Table = styled.table ``;
+export const Tr = styled.tr ``;
+export const Td = styled.td `
+    color: goldenrod;
+
+    &:first-child {
+        color: #778;
+        text-align: right;
+        ${(props) => props.theme.paddingRight('10px')}
+    }
+`;

package/dist/components/RequestJourney/RequestJourney.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container } from './RequestJourney.style';
+import JourneyRow from '../JourneyRow/JourneyRow';
+export function RequestJourney(props) {
+    const { item } = props;
+    function renderItem(point, index) {
+        return _jsx(JourneyRow, { point: point }, index);
+    }
+    function renderItems() {
+        return item.items.map((point, index) => renderItem(point, index));
+    }
+    return (_jsx(Container, { className: 'RequestJourney-container', "data-testid": 'RequestJourney-container', children: renderItems() }));
+}
+export default RequestJourney;

package/dist/components/RequestJourney/RequestJourney.style.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+export const Container = styled.div `
+    flex: 1;
+    border-top: 1px solid #333;
+    max-height: 380px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+        background: #333;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+        background: #555;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+        background: #666;
+    }
+`;

package/dist/components/RequestRow/RequestRow.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container, Col, Id, Type } from './RequestRow.style';
+import Time from '../Time/Time';
+export function RequestRow(props) {
+    const { index, style, item, className } = props;
+    const { sequence, createdTS } = item;
+    return (_jsxs(Container, { className: `DevListRow-container ${className}`, "data-testid": 'DevListRow-container', style: style, index: index, onClick: () => props.onClick(item), children: [_jsxs(Col, { children: [_jsx(Id, { children: sequence }), _jsx(Type, { children: item.originalAction?.type })] }), _jsx(Col, { children: _jsx(Time, { value: createdTS }) })] }));
+}
+export default RequestRow;

package/{src/components/RequestRow/RequestRow.style.tsx → dist/components/RequestRow/RequestRow.style.js}

@@ -1,31 +1,27 @@
 import styled from 'styled-components';
-
-export const Container = styled.div<{ index: number }>`
+export const Container = styled.div `
     flex: 1;
     display: flex;
     flex-direction: row;
     align-items: center;
     padding: 10px;
-    background-color: ${(props) =>
-        props.index % 2 === 1 ? 'rgba(0, 0, 0, 0.2)' : 'transparent'};
+    max-width: 90%;
+    background-color: ${(props) => props.index % 2 === 1 ? 'rgba(0, 0, 0, 0.2)' : 'transparent'};
 
     &:hover {
         background-color: rgba(0, 0, 0, 0.7);
         cursor: pointer;
     }
 `;
-
-export const Col = styled.div`
+export const Col = styled.div `
     &:first-child {
         flex: 1;
     }
 `;
-
-export const Id = styled.div`
+export const Id = styled.div `
     color: goldenrod;
     font-size: 16px;
 `;
-
-export const Type = styled.div`
+export const Type = styled.div `
     color: brown;
 `;

package/dist/components/Size/Size.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container } from './Size.style';
+import bytes from 'bytes';
+import { useMemo } from 'react';
+export function Size(props) {
+    const { size = 0 } = props;
+    const sizeText = useMemo(() => bytes(size), [size]);
+    return (_jsx(Container, { className: 'Size-container', "data-testid": 'Size-container', children: !size ? '-' : sizeText }));
+}
+export default Size;

package/dist/components/Size/Size.style.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const Container = styled.div `
+    color: olive;
+    margin: 0 5px;
+`;

package/{src/components/Time/Time.tsx → dist/components/Time/Time.js}

@@ -1,25 +1,11 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { startOfTime } from '../../utils/date';
 import { Container, Full, Fraction } from './Time.style';
-
-export type TimeProps = {
-    value: number;
-};
-
-export function Time(props: TimeProps) {
+export function Time(props) {
     const { value } = props;
-
     const relativeValue = (value - startOfTime) / 1000;
-
     const full = Math.floor(relativeValue);
     const fraction = (relativeValue - full).toFixed(3).split('.').pop();
-
-    return (
-        <Container className='Time-container' data-testid='Time-container'>
-            <Full>{full}</Full>
-            <Fraction>{fraction}</Fraction>
-        </Container>
-    );
+    return (_jsxs(Container, { className: 'Time-container', "data-testid": 'Time-container', children: [_jsx(Full, { children: full }), _jsx(Fraction, { children: fraction })] }));
 }
-
 export default Time;

package/{src/components/Time/Time.style.tsx → dist/components/Time/Time.style.js}

@@ -1,17 +1,14 @@
 import styled from 'styled-components';
-
-export const Container = styled.div`
-    color: yellowgreen;
+export const Container = styled.div `
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     font-family: monospace;
+    color: #99a;
 `;
-
-export const Full = styled.div`
+export const Full = styled.div `
     font-size: 24px;
 `;
-
-export const Fraction = styled.div`
+export const Fraction = styled.div `
     font-size: 12px;
 `;