@darajs/components 1.0.0-a.1

package/dist/common/dropzone/dropzone.js.map

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

package/dist/common/form/form.d.ts

@@ -0,0 +1,11 @@
+import { Action, ComponentInstance, StyledComponentProps, Variable } from '@darajs/core';
+interface FormProps extends StyledComponentProps {
+    children: Array<ComponentInstance>;
+    /** Action for what happens when the button is clicked */
+    onsubmit: Action;
+    /** Form state */
+    value: Variable<Record<string, any>>;
+}
+declare function Form(props: FormProps): JSX.Element;
+export default Form;
+//# sourceMappingURL=form.d.ts.map

package/dist/common/form/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../js/common/form/form.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,MAAM,EACN,iBAAiB,EAEjB,oBAAoB,EACpB,QAAQ,EAKX,MAAM,cAAc,CAAC;AAuBtB,UAAU,SAAU,SAAQ,oBAAoB;IAC5C,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACnC,yDAAyD;IACzD,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;CACxC;AAQD,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CA0E3C;AAED,eAAe,IAAI,CAAC"}

package/dist/common/form/form.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { DynamicComponent, injectCss, useAction, useComponentStyles, useVariable, } from '@darajs/core';
+import styled from '@darajs/styled-components';
+import { Button } from '@darajs/ui-components';
+import { FormCtx } from '../context';
+const ButtonWrapper = styled.section `
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 0.75rem;
+    justify-content: space-between;
+
+    button {
+        width: 6rem;
+    }
+`;
+const FormWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+`;
+const StyledForm = injectCss('div');
+function Form(props) {
+    const [formState, setFormState] = useVariable(props.value);
+    const [onSubmit] = useAction(props.onsubmit);
+    const [style, css] = useComponentStyles(props);
+    const updateForm = useCallback((value, id) => {
+        setFormState((oldFormState) => (Object.assign(Object.assign({}, oldFormState), { [id]: value })));
+    }, [setFormState]);
+    const resolveInitialValue = useCallback((defaultValue, variable, id) => {
+        if (formState === null || formState === void 0 ? void 0 : formState[id]) {
+            if (variable) {
+                return Object.assign(Object.assign({}, variable), { default: formState === null || formState === void 0 ? void 0 : formState[id] });
+            }
+            return formState === null || formState === void 0 ? void 0 : formState[id];
+        }
+        return variable !== null && variable !== void 0 ? variable : defaultValue;
+    }, [formState]);
+    const pages = useMemo(() => {
+        return props.children.filter((child) => child.name === 'FormPage');
+    }, [props.children]);
+    const [currentPage, setCurrentPage] = useState(0);
+    return (_jsx(FormCtx.Provider, { value: { formValues: formState, resolveInitialValue, updateForm }, children: _jsxs(StyledForm, { "$rawCss": css, className: props.className, style: style, children: [pages.length === 0 && (_jsxs(FormWrapper, { children: [props.children.map((child, idx) => (_jsx(DynamicComponent, { component: child }, `form-${idx}-${child.uid}`))), _jsx(ButtonWrapper, { children: props.onsubmit && (_jsx(Button, { onClick: () => onSubmit(formState), styling: "primary", children: "Submit" })) })] })), pages.length > 0 && (_jsxs(FormWrapper, { children: [_jsx(DynamicComponent, { component: props.children[currentPage] }), _jsxs(ButtonWrapper, { children: [currentPage < pages.length - 1 && (_jsx(Button, { onClick: () => setCurrentPage(currentPage + 1), styling: "primary", children: "Next" })), currentPage === pages.length - 1 && props.onsubmit && (_jsx(Button, { onClick: () => onSubmit(formState), styling: "primary", children: "Submit" })), currentPage > 0 && pages.length > 1 && (_jsx(Button, { onClick: () => setCurrentPage(currentPage - 1), outline: true, styling: "primary", children: "Back" }))] })] }))] }) }));
+}
+export default Form;
+//# sourceMappingURL=form.js.map

package/dist/common/form/form.js.map

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

package/dist/common/form-page/form-page.d.ts

@@ -0,0 +1,12 @@
+import { ComponentInstance, StyledComponentProps } from '@darajs/core';
+export interface FormPageProps extends StyledComponentProps {
+    /** The children to render in the body of the page */
+    children: Array<ComponentInstance>;
+    /** Passthrough the className property */
+    className: string;
+    /** Optional title of the page */
+    title?: string;
+}
+declare function FormPage(props: FormPageProps): JSX.Element;
+export default FormPage;
+//# sourceMappingURL=form-page.d.ts.map

package/dist/common/form-page/form-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-page.d.ts","sourceRoot":"","sources":["../../../js/common/form-page/form-page.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAoB,oBAAoB,EAAiC,MAAM,cAAc,CAAC;AAaxH,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IACvD,qDAAqD;IACrD,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACnC,yCAAyC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAID,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAWnD;AAED,eAAe,QAAQ,CAAC"}

package/dist/common/form-page/form-page.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DynamicComponent, injectCss, useComponentStyles } from '@darajs/core';
+import styled from '@darajs/styled-components';
+const PageWrapper = styled.section `
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+`;
+const PageTitle = styled.h2 `
+    font-size: 1.4rem;
+`;
+const StyledWrapper = injectCss(PageWrapper);
+function FormPage(props) {
+    const [style, css] = useComponentStyles(props);
+    return (_jsxs(StyledWrapper, { "$rawCss": css, className: props.className, style: style, children: [props.title && _jsx(PageTitle, { children: props.title }), props.children.map((child, idx) => (_jsx(DynamicComponent, { component: child }, `form-page-${idx}-${child.uid}`)))] }));
+}
+export default FormPage;
+//# sourceMappingURL=form-page.js.map

package/dist/common/form-page/form-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-page.js","sourceRoot":"","sources":["../../../js/common/form-page/form-page.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,gBAAgB,EAAwB,SAAS,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACxH,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAA;;CAE1B,CAAC;AAWF,MAAM,aAAa,GAAG,SAAS,CAAC,WAAW,CAAC,CAAC;AAE7C,SAAS,QAAQ,CAAC,KAAoB;IAClC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAE/C,OAAO,CACH,MAAC,aAAa,eAAU,GAAG,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,aAChE,KAAK,CAAC,KAAK,IAAI,KAAC,SAAS,cAAE,KAAK,CAAC,KAAK,GAAa,EACnD,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,KAAC,gBAAgB,IAAC,SAAS,EAAE,KAAK,IAAO,aAAa,GAAG,IAAI,KAAK,CAAC,GAAG,EAAE,CAAI,CAC/E,CAAC,IACU,CACnB,CAAC;AACN,CAAC;AAED,eAAe,QAAQ,CAAC"}

package/dist/common/grid/column.d.ts

@@ -0,0 +1,24 @@
+import { ComponentInstance, StyledComponentProps } from '@darajs/core';
+import { Breakpoints } from '../types';
+export interface ColumnProps extends StyledComponentProps {
+    /** css align-item value, for vertical alignment of this column */
+    align_items?: string;
+    /** array of children of column */
+    children: Array<ComponentInstance>;
+    /** An optional value which determines the direction of the Column children by default is horizontal */
+    direction?: 'horizontal' | 'vertical';
+    /** css justify_content value, for horizontal alignment of this column */
+    justify?: string;
+    /** how many columns should this column be offset by */
+    offset?: number | Breakpoints;
+    /** how many columns should this column span */
+    span?: number | Breakpoints;
+}
+/**
+ * Grid Column component
+ *
+ * @param props Column component props
+ */
+declare function Column(props: ColumnProps): JSX.Element;
+export default Column;
+//# sourceMappingURL=column.d.ts.map

package/dist/common/grid/column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column.d.ts","sourceRoot":"","sources":["../../../js/common/grid/column.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,iBAAiB,EAGjB,oBAAoB,EAGvB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,MAAM,WAAW,WAAY,SAAQ,oBAAoB;IACrD,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACnC,uGAAuG;IACvG,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC/B;AAYD;;;;GAIG;AACH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAoB/C;AAED,eAAe,MAAM,CAAC"}

package/dist/common/grid/column.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DisplayCtx, DynamicComponent, injectCss, useComponentStyles, } from '@darajs/core';
+import styled from '@darajs/styled-components';
+const ColumnComponent = injectCss(styled.div `
+    overflow: visible;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: ${(props) => (props.direction === 'horizontal' ? 'row' : 'column')};
+    gap: 0.75rem;
+`);
+const StyledColumn = injectCss(ColumnComponent);
+/**
+ * Grid Column component
+ *
+ * @param props Column component props
+ */
+function Column(props) {
+    const [style, css] = useComponentStyles(props);
+    return (_jsx(StyledColumn, { "$rawCss": css, className: props.className, direction: props.direction, style: Object.assign({ alignItems: props.align_items, justifyContent: props.justify }, style), children: _jsx(DisplayCtx.Provider, { value: { component: 'column', direction: props.direction }, children: props.children.map((child, idx) => (_jsx(DynamicComponent, { component: child }, `cell-${idx}-${child.uid}`))) }) }));
+}
+export default Column;
+//# sourceMappingURL=column.js.map

package/dist/common/grid/column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column.js","sourceRoot":"","sources":["../../../js/common/grid/column.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEH,UAAU,EACV,gBAAgB,EAEhB,SAAS,EACT,kBAAkB,GACrB,MAAM,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAoB/C,MAAM,eAAe,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,CAAa;;;;sBAInC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;;CAErF,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;AAEhD;;;;GAIG;AACH,SAAS,MAAM,CAAC,KAAkB;IAC9B,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC/C,OAAO,CACH,KAAC,YAAY,eACA,GAAG,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,kBACD,UAAU,EAAE,KAAK,CAAC,WAAW,EAC7B,cAAc,EAAE,KAAK,CAAC,OAAO,IAC1B,KAAK,aAGZ,KAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAC1E,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,KAAC,gBAAgB,IAAC,SAAS,EAAE,KAAK,IAAO,QAAQ,GAAG,IAAI,KAAK,CAAC,GAAG,EAAE,CAAI,CAC1E,CAAC,GACgB,GACX,CAClB,CAAC;AACN,CAAC;AAED,eAAe,MAAM,CAAC"}

package/dist/common/grid/grid.d.ts

@@ -0,0 +1,18 @@
+import { ComponentInstance, StyledComponentProps } from '@darajs/core';
+import { Breakpoints } from '../types';
+interface GridProps extends StyledComponentProps {
+    /** object containing when each of the five breakpoints should occur */
+    breakpoints: Breakpoints;
+    /** array of children of Grid component */
+    children: Array<ComponentInstance>;
+    /** css row-gap property */
+    row_gap?: string;
+}
+/**
+ * Grid component
+ *
+ * @param props Grid component props
+ */
+declare function Grid(props: GridProps): JSX.Element;
+export default Grid;
+//# sourceMappingURL=grid.d.ts.map

package/dist/common/grid/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../js/common/grid/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,iBAAiB,EAGjB,oBAAoB,EAGvB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,UAAU,SAAU,SAAQ,oBAAoB;IAC5C,uEAAuE;IACvE,WAAW,EAAE,WAAW,CAAC;IACzB,0CAA0C;IAC1C,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACnC,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD;;;;GAIG;AACH,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAoC3C;AAED,eAAe,IAAI,CAAC"}

package/dist/common/grid/grid.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DisplayCtx, DynamicComponent, injectCss, useComponentStyles, } from '@darajs/core';
+import styled from '@darajs/styled-components';
+const GridComponent = styled.div `
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+`;
+const StyledGrid = injectCss(GridComponent);
+/**
+ * Grid component
+ *
+ * @param props Grid component props
+ */
+function Grid(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const breakpoints = {
+        lg: (_b = (_a = props === null || props === void 0 ? void 0 : props.breakpoints) === null || _a === void 0 ? void 0 : _a.lg) !== null && _b !== void 0 ? _b : 992,
+        md: (_d = (_c = props === null || props === void 0 ? void 0 : props.breakpoints) === null || _c === void 0 ? void 0 : _c.md) !== null && _d !== void 0 ? _d : 768,
+        sm: (_f = (_e = props === null || props === void 0 ? void 0 : props.breakpoints) === null || _e === void 0 ? void 0 : _e.sm) !== null && _f !== void 0 ? _f : 576,
+        xl: (_h = (_g = props === null || props === void 0 ? void 0 : props.breakpoints) === null || _g === void 0 ? void 0 : _g.xl) !== null && _h !== void 0 ? _h : 1200,
+        xs: (_k = (_j = props === null || props === void 0 ? void 0 : props.breakpoints) === null || _j === void 0 ? void 0 : _j.xs) !== null && _k !== void 0 ? _k : 0,
+    };
+    const [style, css] = useComponentStyles(props);
+    const _children = props.children.map((child) => {
+        return Object.assign(Object.assign({}, child), { props: Object.assign(Object.assign({}, child.props), { breakpoints, row_gap: props.row_gap }) });
+    });
+    return (_jsx(StyledGrid, { "$rawCss": css, className: props.className, style: Object.assign({ rowGap: props.row_gap }, style), children: _jsx(DisplayCtx.Provider, { value: { component: 'grid', direction: 'vertical', hug: props.hug }, children: _children.map((child, idx) => (_jsx(DynamicComponent, { component: child }, `grid-${idx}-${child.uid}`))) }) }));
+}
+export default Grid;
+//# sourceMappingURL=grid.js.map

package/dist/common/grid/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../js/common/grid/grid.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEH,UAAU,EACV,gBAAgB,EAEhB,SAAS,EACT,kBAAkB,GACrB,MAAM,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAc/C,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI/B,CAAC;AAEF,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;AAE5C;;;;GAIG;AACH,SAAS,IAAI,CAAC,KAAgB;;IAC1B,MAAM,WAAW,GAAG;QAChB,EAAE,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,0CAAE,EAAE,mCAAI,GAAG;QACjC,EAAE,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,0CAAE,EAAE,mCAAI,GAAG;QACjC,EAAE,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,0CAAE,EAAE,mCAAI,GAAG;QACjC,EAAE,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,0CAAE,EAAE,mCAAI,IAAI;QAClC,EAAE,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,0CAAE,EAAE,mCAAI,CAAC;KAClC,CAAC;IACF,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC3C,uCACO,KAAK,KACR,KAAK,kCACE,KAAK,CAAC,KAAK,KACd,WAAW,EACX,OAAO,EAAE,KAAK,CAAC,OAAO,OAE5B;IACN,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,KAAC,UAAU,eACE,GAAG,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,kBACD,MAAM,EAAE,KAAK,CAAC,OAAO,IAClB,KAAK,aAGZ,KAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,YACnF,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3B,KAAC,gBAAgB,IAAC,SAAS,EAAE,KAAK,IAAO,QAAQ,GAAG,IAAI,KAAK,CAAC,GAAG,EAAE,CAAI,CAC1E,CAAC,GACgB,GACb,CAChB,CAAC;AACN,CAAC;AAED,eAAe,IAAI,CAAC"}

package/dist/common/grid/row.d.ts

@@ -0,0 +1,22 @@
+import { ComponentInstance, StyledComponentProps } from '@darajs/core';
+import { Breakpoints } from '../types';
+import { ColumnProps } from './column';
+interface RowProps extends StyledComponentProps {
+    /** object containing when each of the five breakpoints should occur */
+    breakpoints: Breakpoints;
+    /** array of children of Row component */
+    children: Array<ColumnInstance>;
+    /** css column-gap property */
+    column_gap?: number;
+    /** css row-gap property */
+    row_gap?: string;
+}
+type ColumnInstance = ComponentInstance<ColumnProps>;
+/**
+ * Grid Row component
+ *
+ * @param props Row component props
+ */
+declare function Row(props: RowProps): JSX.Element;
+export default Row;
+//# sourceMappingURL=row.d.ts.map

package/dist/common/grid/row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../js/common/grid/row.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,iBAAiB,EAGjB,oBAAoB,EAGvB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,UAAU,QAAS,SAAQ,oBAAoB;IAC3C,uEAAuE;IACvE,WAAW,EAAE,WAAW,CAAC;IACzB,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAChC,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,KAAK,cAAc,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AA2OrD;;;;GAIG;AACH,iBAAS,GAAG,CAAC,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAiDzC;AAED,eAAe,GAAG,CAAC"}

package/dist/common/grid/row.js

@@ -0,0 +1,236 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { DisplayCtx, DynamicComponent, injectCss, useComponentStyles, } from '@darajs/core';
+import styled from '@darajs/styled-components';
+const RowComponent = styled.div `
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+`;
+// Defines the max column spaces available in a row
+const MAX_COLUMNS = 12;
+/**
+ * Given the breakpoint, finds the value of the span that column should take
+ *
+ * @param span span of child can either be a number or a Breakpoints object
+ * @param breakpoint the breakpoint to consider the span for
+ * @param breakpoints an object containing when all of the breakpoints happen
+ */
+function getSpanForBreakpoint(span, breakpoint, breakpoints) {
+    if (typeof span === 'number') {
+        return span;
+    }
+    switch (true) {
+        case (span === null || span === void 0 ? void 0 : span.xl) && breakpoints.xl <= breakpoint:
+            return span.xl;
+        case (span === null || span === void 0 ? void 0 : span.lg) && breakpoints.lg <= breakpoint:
+            return span.lg;
+        case (span === null || span === void 0 ? void 0 : span.md) && breakpoints.md <= breakpoint:
+            return span.md;
+        case (span === null || span === void 0 ? void 0 : span.sm) && breakpoints.sm <= breakpoint:
+            return span.sm;
+        case (span === null || span === void 0 ? void 0 : span.xs) && breakpoint < breakpoints.sm:
+            return span.xs;
+        default:
+            // no span can be defined return null, so it can be calculated on available space
+            return null;
+    }
+}
+/**
+ * Calculates the available space for a columns of undefined span
+ *
+ * @param row an array containing all children in that row
+ * @param breakpoint the breakpoint to consider the cell width by
+ * @param breakpoints an object containing when all of the breakpoints happen
+ */
+function getCellWidthByRow(row, breakpoint, breakpoints) {
+    const totalAssignedSpan = row
+        .filter((column) => column.props.span !== null)
+        .reduce((sum, current) => sum + getSpanForBreakpoint(current.props.span, breakpoint, breakpoints), 0);
+    const columnsWithNoSpan = row.filter((column) => getSpanForBreakpoint(column.props.span, breakpoint, breakpoints) === null).length;
+    const span = (MAX_COLUMNS - totalAssignedSpan) / columnsWithNoSpan;
+    return span;
+}
+/**
+ * Calculates the width considering the space taken by columnGap
+ *
+ * @param row an array containing all children in that row
+ * @param childSpan the child/column/cell span we want to find the width for
+ * @param columnGap the columnGap applied to that row
+ * @param breakpoint the breakpoint to consider the cell width by
+ * @param breakpoints an object containing when all of the breakpoints happen
+ */
+function getCellWidth(row, childSpan, columnGap, breakpoint, breakpoints) {
+    const widthAvailable = 100 - (row.length - 1) * columnGap;
+    const width = childSpan
+        ? (childSpan * widthAvailable) / MAX_COLUMNS
+        : (getCellWidthByRow(row, breakpoint, breakpoints) * widthAvailable) / MAX_COLUMNS;
+    return width > 100 ? 100 : width;
+}
+/**
+ * Based on all the columns and gaps, fiits the columns to rows
+ *
+ * @param children an array containing all the children to be fit into rows
+ * @param child the child/column we want to know the width for
+ * @param columnGap the columnGap applied to that row
+ * @param breakpoint the breakpoint to consider the cell width by
+ * @param breakpoints an object containing when all of the breakpoints happen
+ */
+function getColumnWidth(children, child, columnGap, breakpoint, breakpoints) {
+    var _a, _b;
+    // contains the current sum of span occupied by all children in current row
+    let currentSum = 0;
+    // contains whether the child is in the current row we are looking at
+    let isChildInRow = false;
+    // this contains the index of first child in a row
+    let startChild = 0;
+    const childSpan = getSpanForBreakpoint((_a = child.props) === null || _a === void 0 ? void 0 : _a.span, breakpoint, breakpoints);
+    for (const [childrenIndex, currentChild] of children.entries()) {
+        // get the current child span for given breakpoint
+        const currentChildSpan = getSpanForBreakpoint((_b = currentChild.props) === null || _b === void 0 ? void 0 : _b.span, breakpoint, breakpoints);
+        // if a column does not have a span we allocate it a temporary value of 1, otherwise we add to the current sum its span
+        currentSum += currentChildSpan !== null && currentChildSpan !== void 0 ? currentChildSpan : 1;
+        // if we are currently looping through the child set that child will be in the current row
+        if (currentChild.uid === child.uid) {
+            isChildInRow = true;
+        }
+        // If the currentSum exceeds or equals the MAX_COLUMNS, and child was not in row, we need to reset/start looking through next row
+        if (currentSum >= MAX_COLUMNS && !isChildInRow) {
+            // define the start of next row, if currentSum is equal to MAX_COLUMNS then next row will be from next child, otherwise if it has overflown starts from current child
+            startChild = currentSum === MAX_COLUMNS ? childrenIndex + 1 : childrenIndex;
+            // the currentSum must be reset, if it has overflown we must consider next element in the starting currentSum value
+            let initialSpan = currentChildSpan !== null && currentChildSpan !== void 0 ? currentChildSpan : 1;
+            // If current child occupies whole row by itself then row begining will be with next child and currentSum starts at 0
+            if (currentChildSpan >= MAX_COLUMNS) {
+                startChild = childrenIndex + 1;
+                initialSpan = 0;
+            }
+            currentSum = currentSum === MAX_COLUMNS ? 0 : initialSpan;
+        }
+        // If the currentChild spans MAX_COLUMNS it should have it's own row
+        if (currentChildSpan >= MAX_COLUMNS && currentChild.uid === child.uid) {
+            const row = children.slice(childrenIndex, childrenIndex + 1);
+            return getCellWidth(row, childSpan, columnGap, breakpoint, breakpoints);
+        }
+        // If the currentSum has exceeded the MAX_COLUMNS and child is in this row then we have found all the children that are in this row
+        if (currentSum > MAX_COLUMNS && isChildInRow) {
+            const row = children.slice(startChild, childrenIndex);
+            return getCellWidth(row, childSpan, columnGap, breakpoint, breakpoints);
+        }
+        // If the currentSum is equal to MAX_COLUMNS and child has been looped through then we have all the children in this row
+        // Otherwise if we have reached the last element and child is in row we know that the last row is incomplete
+        if ((currentSum === MAX_COLUMNS && isChildInRow) || (children.length - 1 === childrenIndex && isChildInRow)) {
+            const row = children.slice(startChild, childrenIndex + 1);
+            return getCellWidth(row, childSpan, columnGap, breakpoint, breakpoints);
+        }
+    }
+}
+/**
+ * Given a column returns an object containing the width percentage that it should take at each breakpoint
+ *
+ * @param children all the columns passed to Row component
+ * @param child the child/column we want to obtain the widths for
+ * @param columnGap the columnGap applied to that row
+ * @param breakpoints an object containing when the breakpoints happen
+ */
+function getAllWidthsForColumn(children, child, columnGap, breakpoints) {
+    return {
+        lg: getColumnWidth(children, child, columnGap, breakpoints.lg, breakpoints),
+        md: getColumnWidth(children, child, columnGap, breakpoints.md, breakpoints),
+        sm: getColumnWidth(children, child, columnGap, breakpoints.sm, breakpoints),
+        xl: getColumnWidth(children, child, columnGap, breakpoints.xl, breakpoints),
+        xs: getColumnWidth(children, child, columnGap, breakpoints.xs, breakpoints),
+    };
+}
+/**
+ * Calculates the margin-left percentage a column should have
+ *
+ * @param width the width of the column
+ * @param offsetWidth if offset was a column the width it would take on the screen
+ * @param columnGap the columnGap applied to that row
+ */
+function getMarginLeft(width, offsetWidth, columnGap) {
+    // if there is no offset or if the column takes the whole row then the margin-left should be 0
+    if (offsetWidth && width !== 100) {
+        // if offset span + width are greater than 12, then offset is corrected so row adds to 12
+        if (offsetWidth + width + columnGap > 100) {
+            return 100 - width;
+        }
+        // otherwise should be the space a column of the offset span would take plus the space taken by a column gap
+        // this is needed to ensure alignment between rows
+        return offsetWidth + columnGap;
+    }
+    return 0;
+}
+/**
+ * Given a column, returns a string of css containing the media queries for the width
+ *
+ * @param children all the columns passed to Row component
+ * @param child the child/column we want to obtain the widths for
+ * @param breakpoints an object containing when the breakpoints happen
+ * @param columnGap the columnGap applied to that row
+ */
+function getColumnStyle(children, child, breakpoints, columnGap) {
+    var _a, _b;
+    const widths = getAllWidthsForColumn(children, child, columnGap, breakpoints);
+    let offsets;
+    if ((_a = child.props) === null || _a === void 0 ? void 0 : _a.offset) {
+        const offset_child = {
+            props: { span: (_b = child.props) === null || _b === void 0 ? void 0 : _b.offset },
+            uid: `${child.uid}offset`,
+        };
+        offsets = getAllWidthsForColumn(children, offset_child, columnGap, breakpoints);
+    }
+    return `
+        @media (max-width: ${breakpoints.sm}px) {
+            width: ${widths.xs}%;
+            margin-left: ${getMarginLeft(widths.xs, offsets === null || offsets === void 0 ? void 0 : offsets.xs, columnGap)}%
+        }
+        @media (min-width: ${breakpoints.sm}px) {
+            width: ${widths.sm}%;
+            margin-left: ${getMarginLeft(widths.sm, offsets === null || offsets === void 0 ? void 0 : offsets.sm, columnGap)}%
+        }
+        @media (min-width: ${breakpoints.md}px) {
+            width: ${widths.md}%;
+            margin-left: ${getMarginLeft(widths.md, offsets === null || offsets === void 0 ? void 0 : offsets.md, columnGap)}%
+        }
+        @media (min-width: ${breakpoints.lg}px) {
+            width: ${widths.lg}%;
+            margin-left: ${getMarginLeft(widths.lg, offsets === null || offsets === void 0 ? void 0 : offsets.lg, columnGap)}%
+        }
+        @media (min-width: ${breakpoints.xl}px) {
+            width: ${widths.xl}%;
+            margin-left: ${getMarginLeft(widths.xl, offsets === null || offsets === void 0 ? void 0 : offsets.xl, columnGap)}%
+        }
+    `;
+}
+const StyledRow = injectCss(RowComponent);
+const StyledColumn = injectCss('div');
+/**
+ * Grid Row component
+ *
+ * @param props Row component props
+ */
+function Row(props) {
+    const [style, css] = useComponentStyles(props);
+    // we create a new list of children with fake "offset children" which will be used to calculate the width and margin column styles
+    const childrenWithOffset = useMemo(() => props.children.flatMap((child) => {
+        var _a, _b;
+        const childWithOffset = [child];
+        if ((_a = child.props) === null || _a === void 0 ? void 0 : _a.offset) {
+            const offset_child = {
+                props: { span: (_b = child.props) === null || _b === void 0 ? void 0 : _b.offset },
+                uid: `${child.uid}offset`,
+            };
+            childWithOffset.unshift(offset_child);
+        }
+        return childWithOffset;
+    }), [props.children]);
+    const allColumnStyles = useMemo(() => props.children.map((child) => {
+        return getColumnStyle(childrenWithOffset, child, props.breakpoints, props.column_gap);
+    }), [childrenWithOffset, props.breakpoints, props.column_gap]);
+    return (_jsx(StyledRow, { "$rawCss": css, className: props.className, style: Object.assign({ columnGap: `${props.column_gap}%` }, style), children: _jsx(DisplayCtx.Provider, { value: { component: 'row', direction: 'horizontal' }, children: props.children.map((child, idx) => (_jsx(StyledColumn, { "$rawCss": allColumnStyles[idx], style: { display: 'flex' }, children: _jsx(DynamicComponent, { component: child }) }, `row-${idx}-${child.uid}`))) }) }));
+}
+export default Row;
+//# sourceMappingURL=row.js.map

package/dist/common/grid/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../js/common/grid/row.tsx"],"names":[],"mappings":"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"}

package/dist/common/heading/heading.d.ts

@@ -0,0 +1,9 @@
+import { StyledComponentProps, Variable } from '@darajs/core';
+interface HeadingProps extends StyledComponentProps {
+    className: string;
+    heading: string | Variable<string>;
+    level: number;
+}
+declare function Heading(props: HeadingProps): JSX.Element;
+export default Heading;
+//# sourceMappingURL=heading.d.ts.map

package/dist/common/heading/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../js/common/heading/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAA8C,MAAM,cAAc,CAAC;AAG1G,UAAU,YAAa,SAAQ,oBAAoB;IAC/C,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;CACjB;AAMD,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAgBjD;AAED,eAAe,OAAO,CAAC"}

package/dist/common/heading/heading.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { injectCss, useComponentStyles, useVariable } from '@darajs/core';
+import { useTheme } from '@darajs/styled-components';
+const StyledTag = injectCss('h1');
+const anchorName = (text) => text.toLowerCase().replace(/\s+/g, '-');
+function Heading(props) {
+    const theme = useTheme();
+    const [style, css] = useComponentStyles(props);
+    const [heading] = useVariable(props.heading);
+    const tag = `h${props.level}`;
+    return (_jsx(StyledTag, { "$rawCss": css, as: tag, className: props.className, id: anchorName(heading), style: Object.assign({ color: theme.colors.text, textAlign: props.align }, style), children: heading }));
+}
+export default Heading;
+//# sourceMappingURL=heading.js.map

package/dist/common/heading/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../js/common/heading/heading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC1G,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAQrD,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;AAElC,MAAM,UAAU,GAAG,CAAC,IAAY,EAAU,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAErF,SAAS,OAAO,CAAC,KAAmB;IAChC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,CAAC,OAAO,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7C,MAAM,GAAG,GAAG,IAAI,KAAK,CAAC,KAAK,EAAiC,CAAC;IAC7D,OAAO,CACH,KAAC,SAAS,eACG,GAAG,EACZ,EAAE,EAAE,GAAG,EACP,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,EAAE,EAAE,UAAU,CAAC,OAAO,CAAC,EACvB,KAAK,kBAAI,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,KAAK,IAAK,KAAK,aAElE,OAAO,GACA,CACf,CAAC;AACN,CAAC;AAED,eAAe,OAAO,CAAC"}

package/dist/common/html-raw/html-raw.d.ts

@@ -0,0 +1,15 @@
+import { StyledComponentProps } from '@darajs/core';
+interface HtmlRawProps extends StyledComponentProps {
+    /** Pass through the className property */
+    className: string;
+    /** The raw html to display, should be string */
+    html: string;
+}
+/**
+ * A component to display a raw HTML. It stretches to fit the container.
+ *
+ * @param props - the component props
+ */
+declare function HtmlRaw(props: HtmlRawProps): JSX.Element;
+export default HtmlRaw;
+//# sourceMappingURL=html-raw.d.ts.map

package/dist/common/html-raw/html-raw.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-raw.d.ts","sourceRoot":"","sources":["../../../js/common/html-raw/html-raw.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAiC,MAAM,cAAc,CAAC;AAUnF,UAAU,YAAa,SAAQ,oBAAoB;IAC/C,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAWjD;AAED,eAAe,OAAO,CAAC"}

package/dist/common/html-raw/html-raw.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { injectCss, useComponentStyles } from '@darajs/core';
+import styled from '@darajs/styled-components';
+const _Wrapper = styled.div `
+    display: flex;
+    width: 100%;
+    height: 100%;
+`;
+const Wrapper = injectCss(_Wrapper);
+/**
+ * A component to display a raw HTML. It stretches to fit the container.
+ *
+ * @param props - the component props
+ */
+function HtmlRaw(props) {
+    const [style, css] = useComponentStyles(props);
+    return (_jsx(Wrapper, { "$rawCss": css, className: props.className, 
+        // bearer:disable javascript_react_dangerously_set_inner_html
+        dangerouslySetInnerHTML: { __html: props.html }, style: style }));
+}
+export default HtmlRaw;
+//# sourceMappingURL=html-raw.js.map

package/dist/common/html-raw/html-raw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-raw.js","sourceRoot":"","sources":["../../../js/common/html-raw/html-raw.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAwB,SAAS,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI1B,CAAC;AACF,MAAM,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;AASpC;;;;GAIG;AACH,SAAS,OAAO,CAAC,KAAmB;IAChC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC/C,OAAO,CACH,KAAC,OAAO,eACK,GAAG,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,6DAA6D;QAC7D,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE,EAC/C,KAAK,EAAE,KAAK,GACd,CACL,CAAC;AACN,CAAC;AAED,eAAe,OAAO,CAAC"}

package/dist/common/icon/icon.d.ts

@@ -0,0 +1,8 @@
+import { StyledComponentProps } from '@darajs/core';
+interface IconProps extends StyledComponentProps {
+    color?: string;
+    icon: string;
+}
+declare function Icon(props: IconProps): JSX.Element;
+export default Icon;
+//# sourceMappingURL=icon.d.ts.map

package/dist/common/icon/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../js/common/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAA+B,MAAM,cAAc,CAAC;AAEjF,UAAU,SAAU,SAAQ,oBAAoB;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAa3C;AAED,eAAe,IAAI,CAAC"}