trepur_components 0.4.7 → 1.0.0

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import InformationIcon from './index';
+import { idAndClassName } from '@utils/controls';
+const componentMeta = {
+    title: 'Trepur Components/Rupert Bennett/Atoms/Information Icon',
+    component: InformationIcon,
+    argTypes: Object.assign(Object.assign({}, idAndClassName), { text: {
+            type: { name: 'string', required: false },
+            description: 'The text to display on the component',
+            table: {
+                type: { summary: 'string' }
+            }
+        }, number: {
+            type: { name: 'number', required: false },
+            description: 'The number to display on the component',
+            table: {
+                type: { summary: 'number' }
+            }
+        }, bordered: {
+            type: { name: 'boolean', required: false },
+            description: 'Applies a border to the component',
+            table: {
+                type: { summary: 'boolean' }
+            },
+            defaultValue: 'false'
+        }, rounded: {
+            type: { name: 'boolean', required: false },
+            description: 'Enabled rounded corners on the component',
+            table: {
+                type: { summary: 'boolean' }
+            },
+            defaultValue: 'false'
+        }, withAnimation: {
+            type: { name: 'boolean', required: false },
+            description: 'Enabled the counter animation on the component',
+            table: {
+                type: { summary: 'boolean' }
+            },
+            defaultValue: 'false'
+        }, iconProps: {
+            type: { name: 'string', required: false },
+            description: 'The props to pass to the icon to display on the component',
+            table: {
+                type: { summary: 'string' }
+            }
+        }, theme: {
+            type: { name: 'string', required: false },
+            options: ['dark', 'light'],
+            description: 'The variant of component to render',
+            table: { type: { summary: 'light' }, defaultValue: { summary: 'light' } },
+            defaultValue: 'light',
+            control: { type: 'radio' }
+        } }),
+    args: {
+        text: 'Projects Completed',
+        number: 21,
+        bordered: true,
+        rounded: true,
+        withAnimation: true,
+        theme: 'dark',
+        iconProps: {
+            type: 'heart',
+            size: 3,
+            className: 'mr-4 mb-8'
+        }
+    }
+};
+const Template = (args) => React.createElement(InformationIcon, Object.assign({}, args));
+export const _InformationIcon = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=InformationIcon.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InformationIcon.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/InformationIcon/InformationIcon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAAe,MAAM,SAAS,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAEhD,MAAM,aAAa,GAA0C;IACzD,KAAK,EAAE,yDAAyD;IAChE,SAAS,EAAE,eAAe;IAC1B,QAAQ,kCACD,cAAc,KACjB,IAAI,EAAE;YACF,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,sCAAsC;YACnD,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACJ,EACD,MAAM,EAAE;YACJ,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,wCAAwC;YACrD,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC9B;SACJ,EACD,QAAQ,EAAE;YACN,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,WAAW,EAAE,mCAAmC;YAChD,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC/B;YACD,YAAY,EAAE,OAAO;SACxB,EACD,OAAO,EAAE;YACL,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC/B;YACD,YAAY,EAAE,OAAO;SACxB,EACD,aAAa,EAAE;YACX,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,WAAW,EAAE,gDAAgD;YAC7D,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC/B;YACD,YAAY,EAAE,OAAO;SACxB,EACD,SAAS,EAAE;YACP,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,2DAA2D;YACxE,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC9B;SACJ,EACD,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,oCAAoC;YACjD,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;YACzE,YAAY,EAAE,OAAO;YACrB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC7B,GACJ;IACD,IAAI,EAAE;QACF,IAAI,EAAE,oBAAoB;QAC1B,MAAM,EAAE,EAAE;QACV,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,IAAI;QACb,aAAa,EAAE,IAAI;QACnB,KAAK,EAAE,MAAM;QACb,SAAS,EAAE;YACP,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,CAAC;YACP,SAAS,EAAE,WAAW;SACzB;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAA2C,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,eAAe,oBAAK,IAAI,EAAI,CAAA;AAEhG,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,eAAe,aAAa,CAAA"}

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { Props as iconProps } from '../Icon';
+export interface Props {
+    id?: string;
+    className?: string;
+    text?: string;
+    number: number;
+    bordered?: boolean;
+    rounded?: boolean;
+    withAnimation?: boolean;
+    iconProps?: iconProps;
+    theme?: 'dark' | 'light';
+}
+declare const InformationIcon: ({ id, className, text, number, bordered, rounded, withAnimation, iconProps, theme }: Props) => JSX.Element;
+export default InformationIcon;

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

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef } from 'react';
+import Icon from '../Icon';
+import classNames from 'classnames';
+const InformationIcon = ({ id, className, text, number, bordered = false, rounded = false, withAnimation = false, iconProps, theme = 'light' }) => {
+    const colours = theme === 'dark' ? 'placeholder-white bg-primary text-white' : 'placeholder-primary bg-white text-primary';
+    let loaded = useRef(false);
+    useEffect(() => {
+        const element = document.getElementById(id + '_number');
+        let observer = new IntersectionObserver((entries, observer) => {
+            entries.forEach(entry => {
+                if (entry.intersectionRatio >= 0.1 && loaded.current == false) {
+                    loaded.current = true;
+                    counterAnimation(document.getElementById(id + '_number'), 0, number, 3000);
+                }
+            });
+        }, { threshold: 1 });
+        element && withAnimation && observer.observe(element);
+    }, []);
+    const wrapperClasses = 'h-96 flex items-center text-center ease-out duration-300';
+    const classList = classNames({
+        'border': bordered,
+        'rounded-2xl': rounded,
+    }, className, colours, 'flex flex-col justify-center w-full h-full items-center ease-out duration-300 text-md lg:text-md hover:text-lg');
+    const counterAnimation = (obj, start, end, duration) => {
+        let startTimestamp = undefined;
+        const step = (timestamp) => {
+            if (!startTimestamp)
+                startTimestamp = timestamp;
+            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+            obj.innerHTML = Math.floor(progress * (end - start) + start);
+            if (progress < 1) {
+                window.requestAnimationFrame(step);
+            }
+        };
+        window.requestAnimationFrame(step);
+    };
+    return (React.createElement("div", { id: id, className: wrapperClasses },
+        React.createElement("div", { className: classList },
+            iconProps &&
+                React.createElement(Icon, Object.assign({}, iconProps)),
+            number &&
+                React.createElement("p", null, number),
+            React.createElement("p", null, text))));
+};
+export default InformationIcon;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/InformationIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,IAA2B,MAAM,SAAS,CAAA;AACjD,OAAO,UAAU,MAAM,YAAY,CAAA;AAcnC,MAAM,eAAe,GAAG,CAAC,EACrB,EAAE,EACF,SAAS,EACT,IAAI,EACJ,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,GAAG,OAAO,EACZ,EAAE,EAAE;IACP,MAAM,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,yCAAyC,CAAC,CAAC,CAAC,2CAA2C,CAAA;IAC1H,IAAI,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAE1B,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,GAAG,SAAS,CAAC,CAAA;QACvD,IAAI,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;YAC1D,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACtB,IAAG,KAAK,CAAC,iBAAiB,IAAI,GAAG,IAAI,MAAM,CAAC,OAAO,IAAI,KAAK,EAAC;oBAC3D,MAAM,CAAC,OAAO,GAAG,IAAI,CAAA;oBACrB,gBAAgB,CACZ,QAAQ,CAAC,cAAc,CACnB,EAAE,GAAG,SAAS,CACjB,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,CAAA;iBACxB;YACH,CAAC,CAAC,CAAA;QACN,CAAC,EAAE,EAAC,SAAS,EAAE,CAAC,EAAC,CAAC,CAAA;QAClB,OAAO,IAAI,aAAa,IAAI,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,cAAc,GAAG,0DAA0D,CAAA;IAEjF,MAAM,SAAS,GAAG,UAAU,CAAC;QACrB,QAAQ,EAAE,QAAQ;QAClB,aAAa,EAAG,OAAO;KAC1B,EACD,SAAS,EACT,OAAO,EACP,gHAAgH,CAAC,CAAA;IAErH,MAAM,gBAAgB,GAAG,CAAC,GAAQ,EAAE,KAAa,EAAE,GAAW,EAAE,QAAgB,EAAE,EAAE;QAChF,IAAI,cAAc,GAAuB,SAAS,CAAA;QAClD,MAAM,IAAI,GAAG,CAAC,SAAiB,EAAE,EAAE;YAC/B,IAAI,CAAC,cAAc;gBAAE,cAAc,GAAG,SAAS,CAAA;YAC/C,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,cAAc,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAA;YACrE,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,CAAA;YAC5D,IAAI,QAAQ,GAAG,CAAC,EAAE;gBACd,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAA;aACrC;QACL,CAAC,CAAC;QACF,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAA;IACtC,CAAC,CAAA;IAED,OAAO,CACH,6BACI,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,cAAc;QAEzB,6BAAK,SAAS,EAAE,SAAS;YACpB,SAAS;gBACN,oBAAC,IAAI,oBAAK,SAAS,EAAI;YAE1B,MAAM;gBACH,+BAAI,MAAM,CAAK;YAEnB,+BAAI,IAAI,CAAK,CACX,CACJ,CACT,CAAA;AACL,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import Input from './index';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof Input>;
+export declare const _Input: ComponentStory<({ id, className, labelClasses, inputClasses, autoComplete, disabled, formId, height, maxLength, minLength, pattern, required, readOnly, autoFocus, label, type, name, placeholder, bold, onChange, onBlur, onFocus, hasValidation, errors, value, theme }: import("./index").Props) => JSX.Element>;
+export default componentMeta;

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import Input from './index';
+const componentMeta = {
+    title: 'Trepur Components/Rupert Bennett/Atoms/Input',
+    component: Input,
+    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' }
+            }
+        },
+        label: {
+            description: '',
+            control: 'text',
+            table: {
+                category: '',
+            }
+        },
+        placeholder: {
+            description: '',
+            control: 'text',
+            table: {
+                category: '',
+            }
+        },
+        bold: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: '',
+            }
+        },
+        required: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: '',
+            }
+        },
+        hasValidation: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: '',
+            }
+        },
+        errors: {
+            description: '',
+            control: 'array',
+            table: {
+                category: '',
+            }
+        },
+        value: {
+            description: 'The default value of the input',
+            control: 'text',
+            table: {
+                category: '',
+            }
+        },
+        theme: {
+            type: { name: 'string', required: false },
+            options: ['dark', 'light'],
+            description: 'The variant of button to render',
+            table: { type: { summary: 'dark' }, defaultValue: { summary: 'dark' } },
+            defaultValue: 'dark',
+            control: { type: 'radio' }
+        }
+    },
+    args: {
+        label: 'This is a label',
+        placeholder: 'This is a placeholder',
+        errors: [
+            "This is an error",
+            "This is another error",
+            "This is a third error"
+        ]
+    }
+};
+const Template = (args) => React.createElement(Input, Object.assign({}, args));
+export const _Input = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=Input.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,MAAM,SAAS,CAAA;AAG3B,MAAM,aAAa,GAAgC;IAC/C,KAAK,EAAE,8CAA8C;IACrD,SAAS,EAAE,KAAK;IAChB,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,QAAQ,EAAE;YACN,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;aACf;SACJ;QACD,aAAa,EAAE;YACX,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;aACf;SACJ;QACD,MAAM,EAAE;YACJ,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;aACf;SACJ;QACD,KAAK,EAAE;YACH,WAAW,EAAE,gCAAgC;YAC7C,OAAO,EAAE,MAAM;YACf,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,uBAAuB;QACpC,MAAM,EAAE;YACJ,kBAAkB;YAClB,uBAAuB;YACvB,uBAAuB;SAC1B;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAiC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,KAAK,oBAAK,IAAI,EAAI,CAAA;AAE5E,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEvC,eAAe,aAAa,CAAA"}

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

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export interface Props {
+    id?: string;
+    className?: string;
+    labelClasses?: string;
+    inputClasses?: string;
+    autoComplete?: string;
+    disabled?: boolean;
+    formId?: string;
+    height?: string;
+    maxLength?: number;
+    minLength?: number;
+    pattern?: string;
+    required?: boolean;
+    readOnly?: boolean;
+    label?: string;
+    type?: string;
+    name?: string;
+    placeholder?: string;
+    hasValidation?: boolean;
+    bold?: boolean;
+    autoFocus?: boolean;
+    onChange?: (e: any) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    errors?: Array<string>;
+    value?: string;
+    theme?: 'dark' | 'light';
+}
+declare const Input: ({ id, className, labelClasses, inputClasses, autoComplete, disabled, formId, height, maxLength, minLength, pattern, required, readOnly, autoFocus, label, type, name, placeholder, bold, onChange, onBlur, onFocus, hasValidation, errors, value, theme }: Props) => JSX.Element;
+export default Input;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+const Input = ({ id, className, labelClasses, inputClasses, autoComplete, disabled, formId, height, maxLength, minLength, pattern, required, readOnly, autoFocus, label, type, name, placeholder, bold, onChange, onBlur, onFocus, hasValidation, errors, value, theme }) => {
+    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 inputClassList = classNames({}, `${inputClasses} ${colours} border px-2 py-2 mb-2 rounded-md`);
+    return (React.createElement("div", Object.assign({}, (id && { id: id }), { className: classList }),
+        label &&
+            React.createElement("label", { id: `label-${id}`, className: labelClassList, htmlFor: `input-${id}` },
+                React.createElement("p", null,
+                    label,
+                    required &&
+                        React.createElement("span", { className: 'text-red' }, "*"))),
+        React.createElement("input", { id: `input-${id}`, className: inputClassList, autoComplete: autoComplete, disabled: disabled, form: formId, height: height, maxLength: maxLength, minLength: minLength, pattern: pattern, required: required, readOnly: readOnly, type: type, name: name, value: value, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus }),
+        hasValidation &&
+            React.createElement("div", { id: `${id}-errors` }, errors &&
+                errors.map((error, i) => {
+                    return (React.createElement("p", { key: `error_msg_${i + 0}`, className: 'text-red text-sm' }, error));
+                }))));
+};
+export default Input;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AA+BnC,MAAM,KAAK,GAAG,CAAC,EACX,EAAE,EACF,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,MAAM,EACN,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,aAAa,EACb,MAAM,EACN,KAAK,EACL,KAAK,EACD,EAAE,EAAE;IACR,MAAM,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,yCAAyC,CAAC,CAAC,CAAC,2CAA2C,CAAA;IAC1H,MAAM,SAAS,GAAG,UAAU,CAAC,EAC5B,EAAE,GAAG,SAAS,IAAI,OAAO,gBAAgB,CAAC,CAAA;IAE3C,MAAM,cAAc,GAAG,UAAU,CAAC;QAC9B,WAAW,EAAE,IAAI;KACpB,EAAE,GAAG,YAAY,cAAc,CAAC,CAAA;IAEjC,MAAM,cAAc,GAAG,UAAU,CAAC,EACjC,EAAE,GAAG,YAAY,IAAI,OAAO,mCAAmC,CAAC,CAAA;IAEjE,OAAO,CACH,6CACQ,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,IACtB,SAAS,EAAE,SAAS;QAEnB,KAAK;YACF,+BACI,EAAE,EAAE,SAAS,EAAE,EAAE,EACjB,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,SAAS,EAAE,EAAE;gBAE1B;oBACK,KAAK;oBACL,QAAQ;wBACL,8BAAM,SAAS,EAAC,UAAU,QAAS,CAEvC,CACA;QACR,+BACI,EAAE,EAAE,SAAS,EAAE,EAAE,EACjB,SAAS,EAAE,cAAc,EACzB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,GAClB;QACD,aAAa;YACV,6BAAK,EAAE,EAAE,GAAG,EAAE,SAAS,IAClB,MAAM;gBACH,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;oBACpB,OAAO,CACH,2BACI,GAAG,EAAE,aAAa,CAAC,GAAC,CAAC,EAAE,EACvB,SAAS,EAAC,kBAAkB,IAE3B,KAAK,CACN,CACP,CAAA;gBACL,CAAC,CAAC,CAEJ,CAER,CACT,CAAA;AACL,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { idAndClassName } from '@utils/controls';
+import Jumbotron from './index';
+const componentMeta = {
+    title: 'Trepur Components/Rupert Bennett/Organisms/Jumbotron',
+    component: Jumbotron,
+    parameters: {},
+    argTypes: Object.assign({}, idAndClassName),
+    args: {
+        image: 'https://picsum.photos/1500/400'
+    }
+};
+const Template = (args) => React.createElement(Jumbotron, Object.assign({}, args));
+export const _Jumbotron = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=Jumbotron.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Jumbotron.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/Jumbotron/Jumbotron.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,SAAS,MAAM,SAAS,CAAA;AAG/B,MAAM,aAAa,GAAoC;IACnD,KAAK,EAAE,sDAAsD;IAC7D,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,EAAE;IACd,QAAQ,oBACD,cAAc,CACpB;IACD,IAAI,EAAE;QACF,KAAK,EAAE,gCAAgC;KAC1C;CACJ,CAAA;AAED,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/Jumbotron/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface Props {
+    id?: string;
+    className?: string;
+    image?: string;
+    altText?: string;
+}
+declare const Jumbotron: ({ id, className, image, altText }: Props) => JSX.Element;
+export default Jumbotron;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import classNames from 'classnames';
+const Jumbotron = ({ id, className, image, altText }) => {
+    const classList = classNames(className);
+    return (React.createElement("div", Object.assign({}, (id && { id: id }), { className: classList }),
+        React.createElement("img", { className: 'w-full object-cover', src: image, alt: altText })));
+};
+export default Jumbotron;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Jumbotron/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AAQnC,MAAM,SAAS,GAAG,CAAC,EACf,EAAE,EACF,SAAS,EACT,KAAK,EACL,OAAO,EACH,EAAE,EAAE;IACR,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,CAAC,CAAA;IAEvC,OAAO,CACH,6CAAS,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,IAAE,SAAS,EAAE,SAAS;QAC7C,6BAAK,SAAS,EAAC,qBAAqB,EAAC,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,GAAG,CAC9D,CACT,CAAA;AACL,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import Nav from './index';
+import { idAndClassName } from '@utils/controls';
+import logoDarkTheme from '../../assets/images/primary-logo-bold.png';
+import logo from '../../assets/images/secondary-logo-bold.png';
+const navLinks = [
+    { title: 'Home', href: '/', isActive: true },
+    { title: 'Resume', href: '/', isActive: false },
+    { title: 'Contact Me', href: '/', isActive: false }
+];
+const componentMeta = {
+    title: 'Trepur Components/Rupert Bennett/Organisms/Nav',
+    component: Nav,
+    parameters: {
+        backgrounds: {
+            default: 'grey',
+            values: [
+                {
+                    name: 'grey',
+                    value: '#f3f3f3'
+                }
+            ]
+        }
+    },
+    argTypes: Object.assign(Object.assign({}, idAndClassName), { navLinks: {
+            description: 'An array of nav links to display in the component',
+            table: {
+                type: { summary: 'array' }
+            }
+        }, asSideBar: {
+            type: { name: 'boolean', required: false },
+            description: 'Sets the expanding mechanism to work as a side bar on mobile',
+            table: {
+                type: { summary: 'boolean' }
+            }
+        }, dropdownNavHeight: {
+            type: { name: 'string', required: false },
+            description: 'The distance in which the dropdown should come on mobile',
+            table: {
+                type: { summary: 'string' }
+            }
+        }, logo: {
+            type: { name: 'string', required: false },
+            description: 'The logo to display on the component',
+            table: {
+                type: { summary: 'string' }
+            }
+        }, logoDarkTheme: {
+            type: { name: 'string', required: false },
+            description: 'An optional dark them logo for dark mode',
+            table: {
+                type: { summary: 'string' }
+            }
+        }, mobileLogo: {
+            type: { name: 'string', required: false },
+            description: 'An optional mobile logo for mobile devices',
+            table: {
+                type: { summary: 'string' }
+            }
+        }, mobileLogoDarkTheme: {
+            type: { name: 'string', required: false },
+            description: 'An optional dark them mobile logo for mobile dark mode',
+            table: {
+                type: { summary: 'string' }
+            }
+        }, logoLink: {
+            type: { name: 'string', required: false },
+            description: 'The link to navigate to when clicking on the logo',
+            table: {
+                type: { summary: 'string' }
+            }
+        }, mobileClasses: {
+            type: { name: 'string', required: false },
+            description: '',
+            table: {
+                type: { summary: 'string' }
+            }
+        }, fixedTop: {
+            type: { name: 'boolean', required: false },
+            description: 'Sets the header to fix at the top when true',
+            table: {
+                type: { summary: 'boolean' }
+            }
+        }, getNavStatus: {
+            type: { name: 'boolean', required: false },
+            description: 'Returns the status of the header, opened or closed in mobile',
+            table: {
+                type: { summary: 'function' }
+            }
+        }, theme: {
+            type: { name: 'string', required: false },
+            options: ['dark', 'light'],
+            description: 'The them to render the component in',
+            table: {
+                type: { summary: 'dark' },
+                defaultValue: { summary: 'dark' }
+            },
+            defaultValue: 'dark',
+            control: { type: 'radio' }
+        }, text: {
+            type: { name: 'string', required: false },
+            description: 'Text to display on the component',
+            table: {
+                type: { summary: 'string' }
+            }
+        }, textLink: {
+            type: { name: 'string', required: false },
+            description: 'A link to navigate to when clicking on the text in the component',
+            control: 'string',
+            table: {
+                category: '',
+            }
+        } }),
+    args: {
+        logoLink: '/',
+        navLinks: navLinks,
+        asSideBar: true,
+        dropdownNavHeight: '80',
+        logo: logo,
+        logoDarkTheme: logoDarkTheme,
+        mobileLogo: logo,
+        mobileLogoDarkTheme: logoDarkTheme,
+        fixedTop: true,
+        theme: 'dark',
+        text: 'rupertbennett.com',
+        // getNavStatus: (status) => {
+        //     console.log({ status })
+        // }
+    },
+};
+const Template = (args) => React.createElement(Nav, Object.assign({}, args));
+export const _Nav = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=Nav.stories.js.map

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

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

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Props as navItemProps } from '../NavItem';
+interface Props {
+    id: string;
+    className: string;
+    navLinks: Array<navItemProps>;
+    asSideBar: boolean;
+    dropdownNavHeight: string;
+    logo: string;
+    logoDarkTheme: string;
+    mobileLogo: string;
+    mobileLogoDarkTheme: string;
+    logoLink: string;
+    mobileClasses: string;
+    fixedTop: boolean;
+    getNavStatus: ({}: object) => {};
+    theme: 'light' | 'dark';
+    text?: string;
+    textLink?: string;
+}
+declare const Nav: ({ id, className, navLinks, asSideBar, dropdownNavHeight, logo, logoDarkTheme, mobileLogo, mobileLogoDarkTheme, logoLink, fixedTop, mobileClasses, getNavStatus, theme, text, textLink }: Props) => JSX.Element;
+export default Nav;

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

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import Icon from '../Icon';
+import classNames from 'classnames';
+import Button from '../Button';
+import NavItem from '../NavItem';
+const Nav = ({ id, className, navLinks, asSideBar, dropdownNavHeight, logo, logoDarkTheme, mobileLogo, mobileLogoDarkTheme, logoLink, fixedTop, mobileClasses, getNavStatus, theme = 'dark', text, textLink }) => {
+    const [showSideNav, setShowSideNav] = useState(false);
+    const [showDropdownNav, setShowDropdownNav] = useState(false);
+    const colours = theme === 'dark' ? 'text-white bg-primary' : 'text-primary bg-white';
+    const textColour = theme === 'dark' ? 'text-white' : 'text-primary';
+    const navItemsClassList = 'flex justify-center my-auto px-4 lg:px-8';
+    const logoClassList = 'flex justify-center my-auto pl-16 lg:pl-24';
+    const emailClassList = 'flex justify-center my-auto pr-24';
+    const classList = classNames(className, colours, 'h-16');
+    const sideNavClasses = classNames({
+        'w-0': !showSideNav,
+        [`w-full sm:w-1/3`]: showSideNav
+    }, colours, 'z-50 shadow-inner shaddow-lg md:hidden pt-20 fixed top-0 left-0 z-1 overflow-hidden h-full duration-700');
+    const dropdownNavClasses = classNames({
+        'h-0': !showDropdownNav,
+        [`h-${dropdownNavHeight}`]: showDropdownNav
+    }, colours, 'z-50 md:hidden overflow-hidden pt-20');
+    const logoImageClassList = classNames('h-16 w-auto');
+    const mobileClassList = classNames({
+        'fixed w-full z-50 top-0 mt-0': fixedTop
+    }, colours, mobileClasses, 'flex items-center md:hidden py-2');
+    const desktopClassList = classNames({
+        'fixed w-full z-50 top-0 mt-0': fixedTop,
+    }, `w-full justify-between hidden md:flex items-center justify-between sm:items-stretch text-center`);
+    const openMenu = () => {
+        getNavStatus && getNavStatus({ asSideBar: asSideBar, open: true });
+        if (asSideBar) {
+            setShowSideNav(true);
+        }
+        else {
+            setShowDropdownNav(!showDropdownNav);
+        }
+    };
+    const closeMenu = () => {
+        getNavStatus && getNavStatus({ asSideBar: asSideBar, open: false });
+        setShowSideNav(false);
+    };
+    return (React.createElement("header", { id: id, className: classList },
+        React.createElement("div", { id: 'mobile-nav', className: `${mobileClassList}` },
+            React.createElement("div", { id: 'nav-collapse-btn-wrapper', className: "absolute inset-y-0 left-8 top-5" },
+                React.createElement(Button, { onClick: openMenu, variant: 'primary', type: 'icon' },
+                    React.createElement(Icon, { type: 'bars', size: 1, colour: 'white', bgColour: 'primary' }))),
+            React.createElement("a", { id: 'logo-link', className: 'mx-auto', href: logoLink },
+                React.createElement("img", { className: logoImageClassList, src: theme === 'dark' ? mobileLogoDarkTheme : mobileLogo, alt: "Logo" }))),
+        React.createElement("div", { id: 'destop-nav', className: `${desktopClassList} flex` },
+            React.createElement("div", { className: logoClassList },
+                React.createElement("a", { id: 'logo-link', className: 'mx-auto', href: logoLink },
+                    React.createElement("img", { className: logoImageClassList, src: theme === 'dark' ? logoDarkTheme : logo, alt: "Logo" }))),
+            React.createElement("div", { className: navItemsClassList }, navLinks && navLinks.map((navLink, i) => {
+                return (React.createElement(NavItem, Object.assign({}, navLink, { className: i !== 0 ? 'pl-8' : '', bordered: false, rounded: false, underlineOnHover: true, variant: theme === 'dark' ? 'secondary' : 'primary' })));
+            })),
+            React.createElement("div", { className: emailClassList },
+                React.createElement("a", { className: `hidden lg:inline-block ${textColour}`, href: textLink }, text))),
+        asSideBar ?
+            React.createElement("div", { className: sideNavClasses },
+                React.createElement("div", { className: 'absolute inset-y-0 left-8 top-5' },
+                    React.createElement(Button, { onClick: closeMenu, variant: 'primary', type: 'icon' },
+                        React.createElement(Icon, { type: 'multiply', size: 1, colour: 'white', bgColour: 'primary' }))),
+                navLinks && navLinks.map((navLink, i) => {
+                    return (React.createElement(NavItem, Object.assign({}, navLink, { className: 'pl-8 pt-2', bordered: false, rounded: false, underlineOnHover: true, variant: theme === 'dark' ? 'secondary' : 'primary' })));
+                }))
+            :
+                /* dropdown */
+                React.createElement("div", { className: dropdownNavClasses, id: "mobile-menu" },
+                    React.createElement("div", { className: "pt-2 pb-3 space-y-1" }, navLinks && navLinks.map((navLink, i) => {
+                        return (React.createElement(NavItem, Object.assign({}, navLink, { className: 'pl-8 pt-2', bordered: false, rounded: false, underlineOnHover: true, variant: theme === 'dark' ? 'secondary' : 'primary' })));
+                    })))));
+};
+export default Nav;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Nav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,MAAM,MAAM,WAAW,CAAA;AAC9B,OAAO,OAAiC,MAAM,YAAY,CAAA;AAqB1D,MAAM,GAAG,GAAG,CAAC,EACT,EAAE,EACF,SAAS,EACT,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,IAAI,EACJ,aAAa,EACb,UAAU,EACV,mBAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,KAAK,GAAG,MAAM,EACd,IAAI,EACJ,QAAQ,EACJ,EAAE,EAAE;IACR,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACrD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7D,MAAM,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAA;IACpF,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAA;IACnE,MAAM,iBAAiB,GAAG,0CAA0C,CAAA;IACpE,MAAM,aAAa,GAAG,4CAA4C,CAAA;IAClE,MAAM,cAAc,GAAG,mCAAmC,CAAA;IAC1D,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;IAExD,MAAM,cAAc,GAAG,UAAU,CAAC;QAC9B,KAAK,EAAE,CAAC,WAAW;QACnB,CAAC,iBAAiB,CAAC,EAAE,WAAW;KACnC,EAAE,OAAO,EAAE,yGAAyG,CAAC,CAAA;IAEtH,MAAM,kBAAkB,GAAG,UAAU,CAAC;QAClC,KAAK,EAAE,CAAC,eAAe;QACvB,CAAC,KAAK,iBAAiB,EAAE,CAAC,EAAE,eAAe;KAC9C,EAAE,OAAO,EAAE,sCAAsC,CAAC,CAAA;IAEnD,MAAM,kBAAkB,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;IAEpD,MAAM,eAAe,GAAG,UAAU,CAAC;QAC/B,8BAA8B,EAAE,QAAQ;KAC3C,EAAE,OAAO,EAAE,aAAa,EAAE,kCAAkC,CAAC,CAAA;IAE9D,MAAM,gBAAgB,GAAG,UAAU,CAAC;QAChC,8BAA8B,EAAE,QAAQ;KAC3C,EAAE,iGAAiG,CAAC,CAAA;IAErG,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,YAAY,IAAI,YAAY,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAA;QACjE,IAAI,SAAS,EAAC;YACV,cAAc,CAAC,IAAI,CAAC,CAAA;SACvB;aAAM;YACH,kBAAkB,CAAC,CAAC,eAAe,CAAC,CAAA;SACvC;IACL,CAAC,CAAA;IAED,MAAM,SAAS,GAAG,GAAG,EAAE;QACnB,YAAY,IAAI,YAAY,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAC,CAAC,CAAA;QAClE,cAAc,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC,CAAA;IAED,OAAO,CACH,gCAAQ,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS;QAEhC,6BACI,EAAE,EAAC,YAAY,EACf,SAAS,EAAE,GAAG,eAAe,EAAE;YAG/B,6BACI,EAAE,EAAC,0BAA0B,EAC7B,SAAS,EAAC,iCAAiC;gBAE3C,oBAAC,MAAM,IACH,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM;oBAEX,oBAAC,IAAI,IACD,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,CAAC,EACP,MAAM,EAAC,OAAO,EACd,QAAQ,EAAC,SAAS,GACpB,CACG,CACP;YAEN,2BAAG,EAAE,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,IAAI,EAAE,QAAQ;gBAChD,6BAAK,SAAS,EAAE,kBAAkB,EAAE,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,UAAU,EAAE,GAAG,EAAC,MAAM,GAAE,CAC1G,CACF;QAEN,6BAAK,EAAE,EAAC,YAAY,EAAC,SAAS,EAAE,GAAG,gBAAgB,OAAO;YACtD,6BAAK,SAAS,EAAE,aAAa;gBACzB,2BAAG,EAAE,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,IAAI,EAAE,QAAQ;oBAChD,6BAAK,SAAS,EAAE,kBAAkB,EAAE,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,EAAC,MAAM,GAAE,CAC9F,CACF;YACN,6BAAK,SAAS,EAAE,iBAAiB,IAC5B,QAAQ,IAAI,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;gBACrC,OAAO,CACH,oBAAC,OAAO,oBACA,OAAO,IACX,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAChC,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,KAAK,EACd,gBAAgB,EAAE,IAAI,EACtB,OAAO,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,IACrD,CACL,CAAA;YACL,CAAC,CAAC,CACA;YACN,6BAAK,SAAS,EAAE,cAAc;gBAC1B,2BACI,SAAS,EAAE,0BAA0B,UAAU,EAAE,EACjD,IAAI,EAAE,QAAQ,IAEb,IAAI,CACL,CACF,CACJ;QAIL,SAAS,CAAC,CAAC;YACR,6BAAK,SAAS,EAAE,cAAc;gBAC1B,6BAAK,SAAS,EAAC,iCAAiC;oBAC5C,oBAAC,MAAM,IACH,OAAO,EAAE,SAAS,EAClB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM;wBAEX,oBAAC,IAAI,IACD,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,CAAC,EACP,MAAM,EAAC,OAAO,EACd,QAAQ,EAAC,SAAS,GACpB,CACG,CACP;gBACL,QAAQ,IAAI,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;oBACrC,OAAO,CACH,oBAAC,OAAO,oBACA,OAAO,IACX,SAAS,EAAC,WAAW,EACrB,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,KAAK,EACd,gBAAgB,EAAE,IAAI,EACtB,OAAO,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,IACrD,CACL,CAAA;gBACL,CAAC,CAAC,CACA;YACV,CAAC;gBACG,cAAc;gBACd,6BACI,SAAS,EAAE,kBAAkB,EAC7B,EAAE,EAAC,aAAa;oBAEhB,6BAAK,SAAS,EAAC,qBAAqB,IAC/B,QAAQ,IAAI,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;wBACrC,OAAO,CACH,oBAAC,OAAO,oBACA,OAAO,IACX,SAAS,EAAC,WAAW,EACrB,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,KAAK,EACd,gBAAgB,EAAE,IAAI,EACtB,OAAO,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,IACrD,CACL,CAAA;oBACL,CAAC,CAAC,CACA,CACJ,CAEL,CACZ,CAAA;AACL,CAAC,CAAA;AAED,eAAe,GAAG,CAAA"}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import NavItem from './index';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof NavItem>;
+export declare const _NavItem: ComponentStory<({ id, className, title, href, onClick, bordered, rounded, underlineOnHover, isActive, variant }: import("./index").Props) => JSX.Element>;
+export default componentMeta;