trepur_components 0.4.7 → 1.0.0

package/dist/src/lib/components/TextArea/TextArea.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,SAAS,CAAA;AAG9B,MAAM,aAAa,GAAmC;IAClD,KAAK,EAAE,kDAAkD;IACzD,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,EAAE;IACd,QAAQ,EAAE;QACN,EAAE,EAAE;YACA,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;gBACZ,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACzC;SACJ;QACD,SAAS,EAAE;YACP,WAAW,EAAE,mDAAmD;YAChE,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;gBACZ,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACzC;SACJ;QACD,KAAK,EAAE;YACH,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;aACf;SACJ;QACD,WAAW,EAAE;YACT,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;aACf;SACJ;QACD,IAAI,EAAE;YACF,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;aACf;SACJ;QACD,KAAK,EAAE;YACH,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE;YACvE,YAAY,EAAE,MAAM;YACpB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC7B;KACJ;IACD,IAAI,EAAE;QACF,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,iCAAiC;QAC9C,WAAW,EAAE,IAAI;KACpB;CACJ,CAAA;AAED,MAAM,QAAQ,GAAoC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CAAA;AAElF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,eAAe,aAAa,CAAA"}

package/dist/src/lib/components/TextArea/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export interface Props {
+    id?: string;
+    className?: string;
+    labelClasses?: string;
+    textAreaClasses?: string;
+    label?: string;
+    placeholder?: string;
+    bold?: boolean;
+    name?: string;
+    disabled?: boolean;
+    rows?: number;
+    cols?: number;
+    autoFocus?: boolean;
+    formId?: string;
+    maxLength?: number;
+    readOnly?: boolean;
+    required?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    onChange?: (e: any) => void;
+    withPadding?: boolean;
+    children?: any;
+    theme?: 'dark' | 'light';
+}
+declare const TextArea: ({ id, className, labelClasses, textAreaClasses, label, placeholder, bold, name, disabled, rows, cols, autoFocus, formId, maxLength, readOnly, required, onBlur, onFocus, onChange, withPadding, children, theme }: Props) => JSX.Element;
+export default TextArea;

package/dist/src/lib/components/TextArea/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+const TextArea = ({ id, className, labelClasses, textAreaClasses, label, placeholder, bold, name, disabled, rows, cols, autoFocus, formId, maxLength, readOnly, required, onBlur, onFocus, onChange, withPadding, children, theme = 'light' }) => {
+    const colours = theme === 'dark' ? 'placeholder-white bg-primary text-white' : 'placeholder-primary bg-white text-primary';
+    const classList = classNames(className, colours, 'flex flex-col');
+    const labelClassList = classNames({
+        'font-bold': bold
+    }, labelClasses, 'w-auto pb-2');
+    const textAreaClassList = classNames({
+        'p-2': withPadding
+    }, textAreaClasses, colours, 'border rounded-md mb-2');
+    return (React.createElement("div", { id: id, className: classList },
+        label &&
+            React.createElement("label", { className: labelClassList, htmlFor: `text-area-${id}` }, label),
+        React.createElement("textarea", { className: textAreaClassList, autoFocus: autoFocus, form: formId, maxLength: maxLength, readOnly: readOnly, required: required, disabled: disabled, rows: rows, cols: cols, name: name, placeholder: placeholder, onChange: onChange, onFocus: onFocus, onBlur: onBlur }, children)));
+};
+export default TextArea;
+//# sourceMappingURL=index.js.map

package/dist/src/lib/components/TextArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/TextArea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AA4BnC,MAAM,QAAQ,GAAG,CAAC,EACd,EAAE,EACF,SAAS,EACT,YAAY,EACZ,eAAe,EACf,KAAK,EACL,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,GAAG,OAAO,EACX,EAAE,EAAE;IACR,MAAM,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,yCAAyC,CAAC,CAAC,CAAC,2CAA2C,CAAA;IAC1H,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,CAAC,CAAA;IAEjE,MAAM,cAAc,GAAG,UAAU,CAAC;QAC9B,WAAW,EAAE,IAAI;KACpB,EAAE,YAAY,EAAE,aAAa,CAAC,CAAA;IAE/B,MAAM,iBAAiB,GAAG,UAAU,CAAC;QACjC,KAAK,EAAE,WAAW;KACrB,EAAE,eAAe,EAAE,OAAO,EAAE,wBAAwB,CAAC,CAAA;IAEtD,OAAO,CACH,6BACI,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS;QAEnB,KAAK;YACF,+BACI,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,aAAa,EAAE,EAAE,IAEzB,KAAK,CACF;QACR,kCACI,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,IAEb,QAAQ,CACF,CACb,CACT,CAAA;AACL,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/src/lib/components/Timeline/Timeline.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import Timeline from './index';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof Timeline>;
+export declare const _Timeline: ComponentStory<({ id, className, isHorizontal, items, reverse, textCenter, useImages, horizontalComponentClasses, isSm }: import("./index").Props) => JSX.Element>;
+export default componentMeta;

package/dist/src/lib/components/Timeline/Timeline.stories.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import Timeline from './index';
+import CardWithTopImage from '../CardWithTopImage';
+import logo from '../../assets/images/primary-logo.png';
+const timelineItems = () => {
+    return new Array(8).fill(null).map(() => {
+        return ({
+            component: React.createElement(CardWithTopImage, { id: 'cardwithtopimage', imageProps: {
+                    image: logo,
+                    roundedFull: true,
+                    className: 'rounded-full',
+                    width: 4,
+                    height: 4
+                }, className: 'px-4' },
+                React.createElement("p", null, "This is some text"),
+                React.createElement("p", null, "This is some more text"),
+                React.createElement("p", null, "This is a bit more text"),
+                React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem odit ad sed, quam recusandae voluptatem provident eveniet beatae omnis vero minus unde facilis. Quia commodi quas odit iusto ut enim!")),
+            centerImageProps: {
+                image: logo,
+                imageClasses: 'mx-auto',
+                title: 'This is a title',
+                altText: 'This is a description',
+                width: 4,
+                height: 4
+            }
+        });
+    });
+};
+const componentMeta = {
+    title: 'Trepur Components/Rupert Bennett/Organisms/Timeline',
+    component: Timeline,
+    parameters: {},
+    argTypes: {
+        id: {
+            description: 'Defines the id of the component',
+            control: { type: 'text', default: false },
+            table: {
+                category: 'Id',
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        className: {
+            description: 'Defines any additional classes for the components',
+            control: { type: 'text', default: false },
+            table: {
+                category: 'Classes',
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        isHorizontal: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: '',
+            },
+        },
+        useImages: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: '',
+            },
+        },
+        items: {
+            description: '',
+            control: 'array',
+            table: {
+                category: '',
+            },
+        }
+    },
+    args: {
+        isHorizontal: false,
+        reverse: false,
+        items: timelineItems(),
+        textCenter: true,
+        useImages: true,
+        horizontalComponentClasses: 'w-96 h-96',
+        isSm: true
+    }
+};
+const Template = (args) => React.createElement(Timeline, Object.assign({}, args));
+export const _Timeline = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=Timeline.stories.js.map

package/dist/src/lib/components/Timeline/Timeline.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,SAAS,CAAA;AAC9B,OAAO,gBAAgB,MAAM,qBAAqB,CAAA;AAElD,OAAO,IAAI,MAAM,sCAAsC,CAAA;AACvD,MAAM,aAAa,GAAG,GAAG,EAAE;IACvB,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE;QACpC,OAAO,CACH;YACI,SAAS,EACL,oBAAC,gBAAgB,IACb,EAAE,EAAE,kBAAkB,EACtB,UAAU,EAAE;oBACR,KAAK,EAAE,IAAI;oBACX,WAAW,EAAE,IAAI;oBACjB,SAAS,EAAE,cAAc;oBACzB,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,CAAC;iBACZ,EACD,SAAS,EAAC,MAAM;gBAEhB,mDAAwB;gBACxB,wDAA6B;gBAC7B,yDAA8B;gBAC9B,wOAA6M,CAC9L;YACvB,gBAAgB,EAAE;gBACd,KAAK,EAAE,IAAI;gBACX,YAAY,EAAE,SAAS;gBACvB,KAAK,EAAE,iBAAiB;gBACxB,OAAO,EAAE,uBAAuB;gBAChC,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;aACZ;SACJ,CACJ,CAAA;IACL,CAAC,CAAC,CAAA;AACN,CAAC,CAAA;AAED,MAAM,aAAa,GAAmC;IAClD,KAAK,EAAE,qDAAqD;IAC5D,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,EAAE;IACd,QAAQ,EAAE;QACN,EAAE,EAAE;YACA,WAAW,EAAE,iCAAiC;YAC9C,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE;YACzC,KAAK,EAAE;gBACH,QAAQ,EAAE,IAAI;gBACd,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACzC;SACJ;QACD,SAAS,EAAE;YACP,WAAW,EAAE,mDAAmD;YAChE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE;YACzC,KAAK,EAAE;gBACH,QAAQ,EAAE,SAAS;gBACnB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACzC;SACJ;QACD,YAAY,EAAE;YACV,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;aACf;SACJ;QACD,SAAS,EAAE;YACP,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;aACf;SACJ;QACD,KAAK,EAAE;YACH,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;aACf;SACJ;KACJ;IACD,IAAI,EAAE;QACF,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,aAAa,EAAE;QACtB,UAAU,EAAE,IAAI;QAChB,SAAS,EAAE,IAAI;QACf,0BAA0B,EAAE,WAAW;QACvC,IAAI,EAAE,IAAI;KACb;CACJ,CAAA;AAGD,MAAM,QAAQ,GAAoC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CAAA;AAElF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,eAAe,aAAa,CAAA"}

package/dist/src/lib/components/Timeline/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface Props {
+    id?: string;
+    className?: string;
+    isHorizontal?: boolean;
+    items?: Array<object>;
+    reverse?: boolean;
+    textCenter?: boolean;
+    useImages?: boolean;
+    horizontalComponentClasses?: string;
+    isSm?: boolean;
+}
+declare const Timeline: ({ id, className, isHorizontal, items, reverse, textCenter, useImages, horizontalComponentClasses, isSm }: Props) => JSX.Element;
+export default Timeline;

package/dist/src/lib/components/Timeline/index.js

@@ -0,0 +1,186 @@
+import React from 'react';
+import classNames from 'classnames';
+import Image from '../Image';
+import Column from '../Column';
+import Row from '../Row/index';
+const Timeline = ({ id, className, isHorizontal, items, reverse, textCenter, useImages, horizontalComponentClasses, isSm = false }) => {
+    const classList = classNames({}, `${className} w-full list-none overflow-x-auto pb-4`);
+    const ulClasses = classNames({
+        'flex-row none-reverse justify-between': !reverse && isHorizontal,
+        'flex-col none-reverse': !reverse && !isHorizontal,
+        'flex-row reverse justify-between': reverse && isHorizontal,
+        'flex-col reverse': reverse && !isHorizontal,
+    }, `${className} timeline status-flow relative list-none pl-0 flex`);
+    const liClasses = classNames({
+        'text-center': textCenter,
+        'items-center flex-col justify-between': !reverse && isHorizontal,
+        'flex-row none-reverse': !reverse && !isHorizontal,
+        'items-center flex-col-reverse': reverse && isHorizontal,
+        'flex-row-reverse': reverse && !isHorizontal,
+    }, 'status-flow-item relative flex flex-auto flex-row leading-tight');
+    const circle = classNames({
+        'horizontal collapse': isHorizontal && isSm,
+        'horizontal': isHorizontal && !isSm,
+        'vertical collapse': !isHorizontal && isSm,
+        'vertical': !isHorizontal && !isSm
+    }, 'w-4 h-4 my-16 text-center mx-auto rounded-full border bg-black');
+    const circleVerticalBefore = {
+        'position': 'absolute',
+        'display': 'block',
+        'borderLeft': '1px solid',
+        'borderColor': 'text-primary',
+        'content': '""',
+        'height': '50%',
+        'top': '0%',
+        'left': '49.9%',
+        'zIndex': '-1'
+    };
+    const circleVerticalCollapseBefore = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        top: '0%',
+        left: '8.2%',
+        zIndex: '-1'
+    };
+    const lastCircleVerticalBefore = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        top: '0%',
+        left: '49.9%',
+        zIndex: '-1',
+    };
+    const lastCircleVerticalCollapseBefore = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        top: '0%',
+        left: '8.2%',
+        zIndex: '-1',
+    };
+    const circleVerticalAfter = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        bottom: '0%',
+        left: '49.9%',
+        zIndex: '-1'
+    };
+    const firstCircleVerticalAfter = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        bottom: '0%',
+        left: '49.9%',
+        zIndex: '-1'
+    };
+    const circleVerticalCollapseAfter = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        bottom: '0%',
+        left: '8.2%',
+        zIndex: '-1'
+    };
+    const firstCircleVerticalCollapseAfter = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        bottom: '0%',
+        left: '8.2%',
+        zIndex: '-1'
+    };
+    return (React.createElement(Column, { sm: 12, md: 12, lg: 12, xl: 12, id: id, className: classList },
+        React.createElement("div", { className: ulClasses }, items && items.map((item, i) => {
+            let before;
+            if (i % 2 === 0)
+                before = true;
+            else
+                before = false;
+            let circlePos;
+            if (items.length - 1 > 0) {
+                if (i === 0)
+                    circlePos = 'first-circle';
+                else if (i === items.length - 1)
+                    circlePos = 'last-circle';
+                else
+                    circlePos = `circle`;
+            }
+            let verticalCircleStylesBefore;
+            if (circlePos === 'circle' && isSm) {
+                verticalCircleStylesBefore = circleVerticalCollapseBefore;
+            }
+            else if (circlePos === 'circle' && !isSm) {
+                verticalCircleStylesBefore = circleVerticalBefore;
+            }
+            else if (circlePos === 'last-circle' && isSm) {
+                verticalCircleStylesBefore = lastCircleVerticalCollapseBefore;
+            }
+            else if (circlePos === 'last-circle' && !isSm) {
+                verticalCircleStylesBefore = lastCircleVerticalBefore;
+            }
+            let verticalCircleStylesAfter;
+            if (circlePos === 'circle' && isSm) {
+                verticalCircleStylesAfter = circleVerticalCollapseAfter;
+            }
+            else if (circlePos === 'circle' && !isSm) {
+                verticalCircleStylesAfter = circleVerticalAfter;
+            }
+            else if (circlePos === 'first-circle' && isSm) {
+                verticalCircleStylesAfter = firstCircleVerticalCollapseAfter;
+            }
+            else if (circlePos === 'first-circle' && !isSm) {
+                verticalCircleStylesAfter = firstCircleVerticalAfter;
+            }
+            if (isHorizontal) {
+                return (React.createElement(Column, { key: `horizontal_col_${i + 0}`, id: 'timeline-item', className: `${liClasses} py-4 mb-8` },
+                    React.createElement(Row, { className: horizontalComponentClasses }, before && item.component),
+                    React.createElement(Row, null, useImages ?
+                        React.createElement("div", { id: circlePos, className: isHorizontal ? 'horizontal py-0 my-0' : 'vertical' },
+                            React.createElement(Image, Object.assign({}, item.centerImageProps)))
+                        :
+                            React.createElement("p", { id: circlePos, className: circle })),
+                    React.createElement(Row, { className: horizontalComponentClasses }, !before && item.component)));
+            }
+            else {
+                return (React.createElement(Row, { key: `vertical_row_${i + 0}`, id: 'timeline-item', className: `${liClasses} py-4` },
+                    !isSm &&
+                        React.createElement(Column, { sm: 5, md: 5, lg: 5, xl: 5, className: 'text-center my-auto' }, before && item.component),
+                    React.createElement(Column, { sm: 2, md: 2, lg: 2, xl: 2, id: 'circle-wrapper', className: 'my-auto' }, useImages ?
+                        React.createElement("div", { id: circlePos, className: isSm ? 'vertical collapse' : 'vertical' },
+                            React.createElement("span", { style: verticalCircleStylesBefore }),
+                            React.createElement(Image, Object.assign({}, item.centerImageProps)),
+                            React.createElement("span", { style: verticalCircleStylesAfter }))
+                        :
+                            React.createElement("p", { id: circlePos, className: circle })),
+                    isSm &&
+                        React.createElement(Column, { sm: 10, md: 10, lg: 10, xl: 10, className: 'text-center my-auto' }, item.component),
+                    !isSm &&
+                        React.createElement(Column, { sm: 5, md: 5, lg: 5, xl: 5, className: 'text-center my-auto' }, !before && item.component)));
+            }
+        }))));
+};
+export default Timeline;
+//# sourceMappingURL=index.js.map

package/dist/src/lib/components/Timeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Timeline/index.tsx"],"names":[],"mappings":"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"}

package/dist/src/lib/components/Tubestops/Tubestops.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import Tubestops from './index';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof Tubestops>;
+export declare const _Tubestops: ComponentStory<React.FC<import("./index").Props>>;
+export default componentMeta;

package/dist/src/lib/components/Tubestops/Tubestops.stories.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import Tubestops from './index';
+const componentMeta = {
+    title: 'Trepur Components/Other/Atoms/Tubestops',
+    component: Tubestops,
+    parameters: {},
+    argTypes: {
+        id: {
+            description: 'Defines the id of the component',
+            table: {
+                category: '',
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        className: {
+            description: 'Defines any additional classes for the components',
+            table: {
+                category: '',
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        isHorizontal: {
+            description: '',
+            table: {
+                category: '',
+            },
+        },
+        items: {
+            description: '',
+            table: {
+                category: '',
+            },
+        }
+    },
+    args: {
+        isHorizontal: false,
+        reverse: false,
+        items: [
+            {
+                title: 'This is a title',
+                subtitle: 'This is a subtitle'
+            },
+            {
+                title: 'This is a title',
+                subtitle: 'This is a subtitle'
+            },
+            {
+                title: 'This is a title',
+                subtitle: 'This is a subtitle'
+            }
+        ],
+        textCenter: true,
+        id: '',
+        className: ''
+    }
+};
+const Template = (args) => React.createElement(Tubestops, Object.assign({}, args));
+export const _Tubestops = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=Tubestops.stories.js.map

package/dist/src/lib/components/Tubestops/Tubestops.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tubestops.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/Tubestops/Tubestops.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,SAAS,MAAM,SAAS,CAAA;AAG/B,MAAM,aAAa,GAAoC;IACnD,KAAK,EAAE,yCAAyC;IAChD,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,EAAE;IACd,QAAQ,EAAE;QACN,EAAE,EAAE;YACA,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;gBACZ,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACzC;SACJ;QACD,SAAS,EAAE;YACP,WAAW,EAAE,mDAAmD;YAChE,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;gBACZ,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACzC;SACJ;QACD,YAAY,EAAE;YACV,WAAW,EAAE,EAAE;YACf,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;aACf;SACJ;QACD,KAAK,EAAE;YACH,WAAW,EAAE,EAAE;YACf,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;aACf;SACJ;KACJ;IACD,IAAI,EAAE;QACF,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,KAAK;QACd,KAAK,EAAE;YACH;gBACI,KAAK,EAAE,iBAAiB;gBACxB,QAAQ,EAAE,oBAAoB;aACjC;YACD;gBACI,KAAK,EAAE,iBAAiB;gBACxB,QAAQ,EAAE,oBAAoB;aACjC;YACD;gBACI,KAAK,EAAE,iBAAiB;gBACxB,QAAQ,EAAE,oBAAoB;aACjC;SACJ;QACD,UAAU,EAAE,IAAI;QAChB,EAAE,EAAE,EAAE;QACN,SAAS,EAAE,EAAE;KAChB;CACJ,CAAA;AAGD,MAAM,QAAQ,GAAqC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,SAAS,oBAAK,IAAI,EAAI,CAAA;AAEpF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE3C,eAAe,aAAa,CAAA"}

package/dist/src/lib/components/Tubestops/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.css';
+export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
+    isHorizontal?: boolean;
+    items?: Array<{
+        title: string;
+        subtitle: string;
+    }>;
+    reverse?: boolean;
+    textCenter?: boolean;
+}
+declare const Tubestops: React.FC<Props>;
+export default Tubestops;

package/dist/src/lib/components/Tubestops/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import classNames from 'classnames';
+import './index.css';
+const Tubestops = ({ id, className, isHorizontal = false, items = [], reverse = false, textCenter = false }) => {
+    const circle = 'w-4 h-4 rounded-full bg-black z-10';
+    const classList = classNames({}, `${className} w-full list-none`);
+    const liClasses = classNames({
+        'text-center': textCenter,
+        'items-center flex-col-reverse justify-between': !reverse && isHorizontal,
+        'flex-row none-reverse': !reverse && !isHorizontal,
+        'items-center flex-col': reverse && isHorizontal,
+        'flex-row-reverse': reverse && !isHorizontal
+    }, 'mb-0 status-flow-item relative flex flex-auto flex-row leading-tight');
+    const ulClasses = classNames({
+        'flex-row none-reverse justify-between': !reverse && isHorizontal,
+        'flex-col none-reverse': !reverse && !isHorizontal,
+        'flex-row reverse justify-between': reverse && isHorizontal,
+        'flex-col reverse': reverse && !isHorizontal
+    }, 'tubestop status-flow relative list-none pl-0 flex');
+    const padding = classNames({
+        'pb-2': !reverse && isHorizontal,
+        'pl-4': !reverse && !isHorizontal,
+        'pt-2': reverse && isHorizontal,
+        'pr-4': reverse && !isHorizontal
+    });
+    return (React.createElement("div", { id: id, className: classList },
+        React.createElement("ul", { className: ulClasses }, items && items.map((item, i) => {
+            let a = isHorizontal
+                ? i === 0
+                    ? ''
+                    : ''
+                : i === 0
+                    ? ''
+                    : 'my-12';
+            return (React.createElement("li", { key: `tubestop_${i + 0}`, className: `${liClasses} ${a}` },
+                React.createElement("span", { className: circle }),
+                React.createElement("div", { className: padding },
+                    React.createElement("p", null, item.title + i),
+                    React.createElement("p", null,
+                        React.createElement("small", null, item.subtitle)))));
+        }))));
+};
+export default Tubestops;
+//# sourceMappingURL=index.js.map

package/dist/src/lib/components/Tubestops/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Tubestops/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,aAAa,CAAA;AASpB,MAAM,SAAS,GAAoB,CAAC,EAChC,EAAE,EACF,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,KAAK,EACf,UAAU,GAAG,KAAK,EACrB,EAAE,EAAE;IACD,MAAM,MAAM,GAAG,oCAAoC,CAAA;IAEnD,MAAM,SAAS,GAAG,UAAU,CAAC,EAC5B,EAAE,GAAG,SAAS,mBAAmB,CAAC,CAAA;IAEnC,MAAM,SAAS,GAAG,UAAU,CAAC;QACzB,aAAa,EAAE,UAAU;QACzB,+CAA+C,EAAE,CAAC,OAAO,IAAI,YAAY;QACzE,uBAAuB,EAAE,CAAC,OAAO,IAAI,CAAC,YAAY;QAClD,uBAAuB,EAAE,OAAO,IAAI,YAAY;QAChD,kBAAkB,EAAE,OAAO,IAAI,CAAC,YAAY;KAC/C,EAAE,sEAAsE,CAAC,CAAA;IAE1E,MAAM,SAAS,GAAG,UAAU,CAAC;QACzB,uCAAuC,EAAE,CAAC,OAAO,IAAI,YAAY;QACjE,uBAAuB,EAAE,CAAC,OAAO,IAAI,CAAC,YAAY;QAClD,kCAAkC,EAAE,OAAO,IAAI,YAAY;QAC3D,kBAAkB,EAAE,OAAO,IAAI,CAAC,YAAY;KAC/C,EAAE,mDAAmD,CAAC,CAAA;IAEvD,MAAM,OAAO,GAAG,UAAU,CAAC;QACvB,MAAM,EAAE,CAAC,OAAO,IAAI,YAAY;QAChC,MAAM,EAAE,CAAC,OAAO,IAAI,CAAC,YAAY;QACjC,MAAM,EAAE,OAAO,IAAI,YAAY;QAC/B,MAAM,EAAE,OAAO,IAAI,CAAC,YAAY;KACnC,CAAC,CAAA;IAEF,OAAO,CACH,6BACI,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS;QAEpB,4BAAI,SAAS,EAAE,SAAS,IACnB,KAAK,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAQ,EAAE,CAAS,EAAE,EAAE;YACxC,IAAI,CAAC,GAAG,YAAY;gBAChB,CAAC,CAAC,CAAC,KAAK,CAAC;oBACL,CAAC,CAAC,EAAE;oBACJ,CAAC,CAAC,EAAE;gBACR,CAAC,CAAC,CAAC,KAAK,CAAC;oBACL,CAAC,CAAC,EAAE;oBACJ,CAAC,CAAC,OAAO,CAAA;YACjB,OAAO,CACH,4BACI,GAAG,EAAE,YAAY,CAAC,GAAC,CAAC,EAAE,EACtB,SAAS,EAAE,GAAG,SAAS,IAAI,CAAC,EAAE;gBAE9B,8BAAM,SAAS,EAAE,MAAM,GAAS;gBAChC,6BAAK,SAAS,EAAE,OAAO;oBACnB,+BAAI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAK;oBACvB;wBAAG,mCAAQ,IAAI,CAAC,QAAQ,CAAS,CAAI,CACnC,CACL,CACR,CAAA;QACL,CAAC,CAAC,CACD,CACH,CACT,CAAA;AACL,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/src/lib/components/UserIcon/UserIcon.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import UserIcon from './index';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof UserIcon>;
+export declare const _UserIcon: ComponentStory<({ id, className, name, description, imageProps }: import("./index").Props) => JSX.Element>;
+export default componentMeta;

package/dist/src/lib/components/UserIcon/UserIcon.stories.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import UserIcon from './index';
+const componentMeta = {
+    title: 'Trepur Components/Other/Organisms/User Icon',
+    component: UserIcon,
+    argTypes: {
+        id: {
+            description: 'Defines the id of the component',
+            control: { type: 'text', default: false },
+            table: {
+                category: 'Id',
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        className: {
+            description: 'Defines any additional classes for the components',
+            control: { type: 'text', default: false },
+            table: {
+                category: 'Classes',
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        name: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        description: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        imageProps: {
+            type: { name: 'other', value: 'object' },
+            description: 'The props to pass to the image to display on the component',
+            table: {
+                type: {
+                    summary: 'object'
+                },
+                defaultValue: { summary: 'undefined' }
+            }
+        }
+    },
+    args: {
+        imageProps: {
+            title: '',
+            altText: '',
+            image: ''
+        },
+        name: 'Someones name',
+        description: 'someone info'
+    }
+};
+const Template = (args) => React.createElement(UserIcon, Object.assign({}, args));
+export const _UserIcon = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=UserIcon.stories.js.map

package/dist/src/lib/components/UserIcon/UserIcon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserIcon.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/UserIcon/UserIcon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,SAAS,CAAA;AAG9B,MAAM,aAAa,GAAmC;IAClD,KAAK,EAAE,6CAA6C;IACpD,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACN,EAAE,EAAE;YACA,WAAW,EAAE,iCAAiC;YAC9C,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE;YACzC,KAAK,EAAE;gBACH,QAAQ,EAAE,IAAI;gBACd,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACzC;SACJ;QACD,SAAS,EAAE;YACP,WAAW,EAAE,mDAAmD;YAChE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE;YACzC,KAAK,EAAE;gBACH,QAAQ,EAAE,SAAS;gBACnB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACzC;SACJ;QACD,IAAI,EAAE;YACF,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;aACf;SACJ;QACD,WAAW,EAAE;YACT,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;aACf;SACJ;QACD,UAAU,EAAE;YACR,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE;YACxC,WAAW,EAAE,4DAA4D;YACzE,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;gBACD,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACJ;KACJ;IACD,IAAI,EAAE;QACF,UAAU,EAAE;YACR,KAAK,EAAE,EAAE;YACT,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,EAAE;SACZ;QACD,IAAI,EAAE,eAAe;QACrB,WAAW,EAAE,cAAc;KAC9B;CACJ,CAAA;AAED,MAAM,QAAQ,GAAoC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CAAA;AAElF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,eAAe,aAAa,CAAA"}

package/dist/src/lib/components/UserIcon/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Props as imageProps } from '../Image';
+export interface Props {
+    id?: string;
+    className?: string;
+    name?: string;
+    description?: string;
+    imageProps?: imageProps;
+}
+declare const UserIcon: ({ id, className, name, description, imageProps }: Props) => JSX.Element;
+export default UserIcon;

package/dist/src/lib/components/UserIcon/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+import Image from '../Image';
+const UserIcon = ({ id, className, name, description, imageProps }) => {
+    const classList = classNames({
+        className: className !== undefined
+    }, 'group flex items-center');
+    const classs = (imageProps === null || imageProps === void 0 ? void 0 : imageProps.className) + " shrink-0 h-12 w-12 rounded-full";
+    imageProps = Object.assign(Object.assign({}, imageProps), { className: classs });
+    return (React.createElement("div", Object.assign({}, (id && { id: id }), { className: classList }),
+        React.createElement(Image, Object.assign({}, imageProps)),
+        React.createElement("div", { className: "ltr:ml-3 rtl:mr-3" },
+            React.createElement("p", { className: "text-xs font-medium" }, name),
+            React.createElement("p", { className: "text-xs font-medium " }, description))));
+};
+export default UserIcon;
+//# sourceMappingURL=index.js.map

package/dist/src/lib/components/UserIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/UserIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,KAA6B,MAAM,UAAU,CAAA;AASpD,MAAM,QAAQ,GAAG,CAAC,EACd,EAAE,EACF,SAAS,EACT,IAAI,EACJ,WAAW,EACX,UAAU,EACN,EAAE,EAAE;IACR,MAAM,SAAS,GAAG,UAAU,CAAC;QACzB,SAAS,EAAE,SAAS,KAAK,SAAS;KACrC,EAAE,yBAAyB,CAAC,CAAA;IAE7B,MAAM,MAAM,GAAG,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,IAAG,kCAAkC,CAAA;IACzE,UAAU,mCACH,UAAU,KACb,SAAS,EAAE,MAAM,GACpB,CAAA;IACD,OAAO,CACH,6CAAS,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,IAAE,SAAS,EAAE,SAAS;QAC7C,oBAAC,KAAK,oBAAK,UAAU,EAAI;QACzB,6BAAK,SAAS,EAAC,mBAAmB;YAC9B,2BAAG,SAAS,EAAC,qBAAqB,IAC7B,IAAI,CACL;YACJ,2BAAG,SAAS,EAAC,sBAAsB,IAC9B,WAAW,CACZ,CACF,CACJ,CACT,CAAA;AACL,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/src/lib/components/Video/Video.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import Video from './index';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof Video>;
+export declare const _Video: ComponentStory<({ id, className, autoPlay, muted, poster, mp4File, webmFile, ogvFile, height, width, withControls }: import("./index").Props) => JSX.Element>;
+export default componentMeta;