@koine/react 1.0.8 → 1.0.9

package/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare type AlertProps = {
-    $danger?: boolean;
-};
-export declare const Alert: React.FC<AlertProps>;
+/// <reference types="react" />
+export declare type AlertProps = React.PropsWithChildren<{
+    $danger?: boolean;
+}>;
+export declare const Alert: ({ $danger, children, ...props }: AlertProps) => JSX.Element;

package/Alert/Alert.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 const AlertRoot = styled.div `
@@ -12,7 +11,6 @@ const AlertInner = styled.div `
   /* background: pink; */
   /* color: red; */
 `;
-export const Alert = (_a) => {
-    var { $danger, children } = _a, props = __rest(_a, ["$danger", "children"]);
-    return (_jsx(AlertRoot, Object.assign({ "$danger": $danger }, props, { children: _jsx(AlertInner, { children: children }) })));
+export const Alert = ({ $danger, children, ...props }) => {
+    return (_jsx(AlertRoot, { "$danger": $danger, ...props, children: _jsx(AlertInner, { children: children }) }));
 };

package/Alert/index.d.ts

@@ -1 +1 @@
-export * from "./Alert";
+export * from "./Alert";

package/Alert/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Alert/index.js",
+  "types": "./index.d.ts"
+}

package/Animations/Reveal.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { UseRevealOptions } from "./useReveal";
-export declare type RevealProps = UseRevealOptions;
-export declare const Reveal: React.FC<RevealProps>;
+/// <reference types="react" />
+import { UseRevealOptions } from "./useReveal";
+export declare type RevealProps = React.PropsWithChildren<UseRevealOptions>;
+export declare const Reveal: ({ children, direction, offsetStartY, offsetEndY, offsetStartX, ...props }: RevealProps) => JSX.Element;

package/Animations/Reveal.js

@@ -1,9 +1,7 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { motion, useViewportScroll, useTransform, useSpring, useReducedMotion, } from "framer-motion";
 import { useReveal } from "./useReveal";
-export const Reveal = (_a) => {
-    var { children, direction, offsetStartY, offsetEndY, offsetStartX } = _a, props = __rest(_a, ["children", "direction", "offsetStartY", "offsetEndY", "offsetStartX"]);
+export const Reveal = ({ children, direction, offsetStartY, offsetEndY, offsetStartX, ...props }) => {
     const effectOptions = { direction, offsetStartY, offsetEndY, offsetStartX };
     const prefersReducedMotion = useReducedMotion();
     const { ref, startY, endY, startX } = useReveal(effectOptions);
@@ -13,5 +11,5 @@ export const Reveal = (_a) => {
     const x = useSpring(xRange, { stiffness: 400, damping: 90 });
     const opacity = useSpring(opacityRange);
     // console.log("start, end", startY, endY)
-    return (_jsx(motion.div, Object.assign({}, props, { ref: ref, style: prefersReducedMotion ? {} : { x, opacity } }, { children: children })));
+    return (_jsx(motion.div, { ...props, ref: ref, style: prefersReducedMotion ? {} : { x, opacity }, children: children }));
 };

package/Animations/Underline.d.ts

@@ -1 +1 @@
-export declare const UnderlineSkewed: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"i">>, import("styled-components").DefaultTheme, {}, never>;
+export declare const UnderlineSkewed: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"i">>, import("styled-components").DefaultTheme, {}, never>;

package/Animations/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./Reveal";
-export * from "./Underline";
-export * from "./useReveal";
+export * from "./Reveal";
+export * from "./Underline";
+export * from "./useReveal";

package/Animations/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Animations/index.js",
+  "types": "./index.d.ts"
+}

package/Animations/useReveal.d.ts

@@ -1,34 +1,33 @@
-/// <reference types="react" />
-export declare type UseRevealOptions = {
-    /**
-     * @default "left"
-     */
-    direction?: "left" | "right";
-    /**
-     * A number that represents the offset to start the animations, giving `-1`
-     * means that the animation will start when the scroll position is at
-     * 100% higher than the given element. Giving `2` the animation will starts
-     * when the scroll reached two times the height of the given element below
-     * the top edge of the element itself
-     *
-     * @default -2
-     */
-    offsetStartY?: number;
-    /**
-     * When 0 it defaults to the same as the offsetStartY
-     * @default 0
-     */
-    offsetEndY?: number;
-    /**
-     * A value from `0` to `1` representing a proportion of the element width
-     * or "all" to make it completely out of the viewport
-     * @default "all"
-     * */
-    offsetStartX?: number | "all";
-};
-export declare function useReveal<T extends HTMLElement = HTMLDivElement>({ direction, offsetStartY, offsetEndY, offsetStartX, }: UseRevealOptions): {
-    ref: import("react").RefObject<T>;
-    startY: number;
-    endY: number;
-    startX: number;
-};
+export declare type UseRevealOptions = {
+    /**
+     * @default "left"
+     */
+    direction?: "left" | "right";
+    /**
+     * A number that represents the offset to start the animations, giving `-1`
+     * means that the animation will start when the scroll position is at
+     * 100% higher than the given element. Giving `2` the animation will starts
+     * when the scroll reached two times the height of the given element below
+     * the top edge of the element itself
+     *
+     * @default -2
+     */
+    offsetStartY?: number;
+    /**
+     * When 0 it defaults to the same as the offsetStartY
+     * @default 0
+     */
+    offsetEndY?: number;
+    /**
+     * A value from `0` to `1` representing a proportion of the element width
+     * or "all" to make it completely out of the viewport
+     * @default "all"
+     * */
+    offsetStartX?: number | "all";
+};
+export declare function useReveal<T extends HTMLElement = HTMLDivElement>({ direction, offsetStartY, offsetEndY, offsetStartX, }: UseRevealOptions): {
+    ref: import("react").RefObject<T>;
+    startY: number;
+    endY: number;
+    startX: number;
+};

package/Autocomplete/AutocompleteDownshift.d.ts

@@ -1 +1 @@
-export declare const Autocomplete: null;
+export declare const Autocomplete: null;

package/Autocomplete/AutocompleteDownshiftMultiselect.d.ts

@@ -1 +1 @@
-export declare const Autocomplete: null;
+export declare const Autocomplete: null;

package/Autocomplete/AutocompleteMui.d.ts

@@ -1,47 +1,47 @@
-/// <reference types="react" />
-import type { Option } from "../types";
-import { FormControl } from "../Forms/helpers";
-export declare type AutocompleteOption = Option | string;
-export declare type AutocompleteValue<TMultiple extends boolean | undefined = undefined> = TMultiple extends undefined ? null | Option[] | string[] | Option | string : TMultiple extends true ? Option[] | string[] : null | Option | string;
-export declare type AutocompleteConfig<TOption extends AutocompleteOption, TValue extends AutocompleteValue> = {
-    creatable?: boolean;
-    multiple?: boolean;
-    autoComplete?: boolean;
-    options?: TOption[];
-    loadOptions?: (query?: string) => Promise<TOption[]>;
-    onChange?: (value: TValue) => any;
-    defaultValue?: TValue;
-    value?: TValue;
-    defaultInputValue?: string;
-};
-export declare type AutocompleteProps<TOption extends AutocompleteOption, TValue extends AutocompleteValue> = Omit<FormControl, keyof AutocompleteConfig<TOption, TValue>> & AutocompleteConfig<TOption, TValue> & {
-    className?: string;
-    style?: React.CSSProperties;
-    $ref?: React.ForwardedRef<HTMLInputElement>;
-};
-/**
- * Autocomplete/autocomplete component based on [`@mui useAutocomplete hook`](https://mui.com/components/autocomplete/#useautocomplete).
- *
- * This component is design to work out of the box with [`react-hook-form`](https://react-hook-form.com/)
- * and [`yup`](https://github.com/jquense/yup) alongside our custom `Field`
- * component.
- *
- * After a lot of tests and attempts with `downshift` and `@reach` this proved
- * the best headless hook, small in size and behaving correctly in all scenarios.
- * `downshift` had in fact problems treating the initial `defaultValue` which
- * here is elegantly managed by the `isOptionEqualToValue` option passed into
- * the `useAutocomplete` hook.
- *
- *
- * Validation with `yup` and `react-hook-form` example:
- *
- * ```ts
- * const schema = object({
- *   // the value must be an array with at least one non-empty string
- *   test1: array(string().required()).required().min(1),
- *   // the value must be an array of strings or an empty array
- *   test2: array(string().required()).required(),
- * }).required();
- * ```
- */
-export declare const Autocomplete: <TOption extends AutocompleteOption = AutocompleteOption, TValue extends string | Option | Option[] | string[] | null = string | Option | Option[] | string[] | null>({ creatable, multiple, autoComplete, loadOptions, options: defaultOptions, defaultValue, value: controlledValue, defaultInputValue, label, placeholder, register, setValue, name, onChange, $ref, children, ...props }: AutocompleteProps<TOption, TValue>) => JSX.Element;
+import React from "react";
+import type { Option } from "../types";
+import { FormControl } from "../Forms/helpers";
+export declare type AutocompleteOption = Option | string;
+export declare type AutocompleteValue<TMultiple extends boolean | undefined = undefined> = TMultiple extends undefined ? null | Option[] | string[] | Option | string : TMultiple extends true ? Option[] | string[] : null | Option | string;
+export declare type AutocompleteConfig<TOption extends AutocompleteOption, TValue extends AutocompleteValue> = {
+    creatable?: boolean;
+    multiple?: boolean;
+    autoComplete?: boolean;
+    options?: TOption[];
+    loadOptions?: (query?: string) => Promise<TOption[]>;
+    onChange?: (value: TValue) => any;
+    defaultValue?: TValue;
+    value?: TValue;
+    defaultInputValue?: string;
+};
+export declare type AutocompleteProps<TOption extends AutocompleteOption, TValue extends AutocompleteValue> = Omit<FormControl, keyof AutocompleteConfig<TOption, TValue>> & AutocompleteConfig<TOption, TValue> & {
+    className?: string;
+    style?: React.CSSProperties;
+    $ref?: React.ForwardedRef<HTMLInputElement>;
+};
+/**
+ * Autocomplete/autocomplete component based on [`@mui useAutocomplete hook`](https://mui.com/components/autocomplete/#useautocomplete).
+ *
+ * This component is design to work out of the box with [`react-hook-form`](https://react-hook-form.com/)
+ * and [`yup`](https://github.com/jquense/yup) alongside our custom `Field`
+ * component.
+ *
+ * After a lot of tests and attempts with `downshift` and `@reach` this proved
+ * the best headless hook, small in size and behaving correctly in all scenarios.
+ * `downshift` had in fact problems treating the initial `defaultValue` which
+ * here is elegantly managed by the `isOptionEqualToValue` option passed into
+ * the `useAutocomplete` hook.
+ *
+ *
+ * Validation with `yup` and `react-hook-form` example:
+ *
+ * ```ts
+ * const schema = object({
+ *   // the value must be an array with at least one non-empty string
+ *   test1: array(string().required()).required().min(1),
+ *   // the value must be an array of strings or an empty array
+ *   test2: array(string().required()).required(),
+ * }).required();
+ * ```
+ */
+export declare const Autocomplete: <TOption extends AutocompleteOption = AutocompleteOption, TValue extends string | string[] | Option | Option[] | null = string | string[] | Option | Option[] | null>({ creatable, multiple, autoComplete, loadOptions, options: defaultOptions, defaultValue, value: controlledValue, defaultInputValue, label, placeholder, register, setValue, name, onChange, $ref, children, ...props }: AutocompleteProps<TOption, TValue>) => JSX.Element;

package/Autocomplete/AutocompleteMui.js

@@ -1,4 +1,3 @@
-import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { 
 // forwardRef,
@@ -61,10 +60,9 @@ import { InputProgress } from "../Forms/styles";
 //  },
 //  ref
 // ) {
-export const Autocomplete = (_a) => {
-    var { creatable, multiple, autoComplete, loadOptions, options: defaultOptions = [], defaultValue, value: controlledValue, defaultInputValue, label, placeholder, register, setValue, 
-    // trigger,
-    name, onChange, $ref, children } = _a, props = __rest(_a, ["creatable", "multiple", "autoComplete", "loadOptions", "options", "defaultValue", "value", "defaultInputValue", "label", "placeholder", "register", "setValue", "name", "onChange", "$ref", "children"]);
+export const Autocomplete = ({ creatable, multiple, autoComplete, loadOptions, options: defaultOptions = [], defaultValue, value: controlledValue, defaultInputValue, label, placeholder, register, setValue, 
+// trigger,
+name, onChange, $ref, children, ...props }) => {
     const defaultOptionsMemo = useMemo(() => normaliseOptions(defaultOptions), [defaultOptions]);
     const [options, setOptions] = useState(defaultOptionsMemo);
     const [loading, setLoading] = useState(false);
@@ -92,14 +90,14 @@ export const Autocomplete = (_a) => {
         options: useMemo(() => (loadOptions ? options : defaultOptions), [loadOptions, options, defaultOptions]),
         // update input change only if we are searching as you type, @see
         // https://mui.com/components/autocomplete/#search-as-you-type
-        onInputChange: useCallback((_event, inputValue) => __awaiter(void 0, void 0, void 0, function* () {
+        onInputChange: useCallback(async (_event, inputValue) => {
             if (!loadOptions) {
                 return;
             }
             if (inputValue) {
                 setLoading(true);
                 try {
-                    const newOptions = yield loadOptions(inputValue);
+                    const newOptions = await loadOptions(inputValue);
                     setOptions(newOptions);
                 }
                 catch (e) {
@@ -114,7 +112,7 @@ export const Autocomplete = (_a) => {
                 // TODO: clear like behaviour?
                 // triggerChange({ value: "", label: "" });
             }
-        }), [loadOptions, options]),
+        }, [loadOptions, options]),
         // TODO: check if we need this, probably, and check how to structure the
         // callback, here we get the actual input event
         onChange: (event, newValue) => {
@@ -151,7 +149,14 @@ export const Autocomplete = (_a) => {
                 value: normaliseAutocompleteValue(value, multiple),
             })
             : {};
-        return Object.assign(Object.assign({}, registerProps), autocompleteProps);
+        return {
+            ...registerProps,
+            ...autocompleteProps,
+            // onChange: (event: FormEvent<HTMLInputElement>) => {
+            //   registerProps.onChange(event);
+            //   autocompleteProps?.onChange(event);
+            // },
+        };
     };
     // to focus the input on error this works too
     // @see https://react-hook-form.com/faqs#question12 but probably it is
@@ -161,12 +166,12 @@ export const Autocomplete = (_a) => {
     //     inputProps.ref.current.focus();
     //   }
     // }, [errors, name, inputProps.ref]);
-    return (_jsxs(AutocompleteRoot, { children: [label && (_jsx(AutocompleteLabel, Object.assign({}, getInputLabelProps(), { children: label }))), _jsxs(AutocompleteWrap, Object.assign({}, getRootProps(), { "data-focus": focused }, { children: [_jsxs(AutocompleteInner, Object.assign({ ref: setAnchorEl }, { children: [multiple &&
+    return (_jsxs(AutocompleteRoot, { children: [label && (_jsx(AutocompleteLabel, { ...getInputLabelProps(), children: label })), _jsxs(AutocompleteWrap, { ...getRootProps(), "data-focus": focused, children: [_jsxs(AutocompleteInner, { ref: setAnchorEl, children: [multiple &&
                                 value.map((valueItem, index) => {
-                                    const _a = getTagProps({ index }), { onDelete, key } = _a, tagProps = __rest(_a, ["onDelete", "key"]);
-                                    return (_jsxs(AutocompleteItem, Object.assign({}, tagProps, { children: [_jsx(AutocompleteItemLabel, { children: isString(valueItem)
+                                    const { onDelete, key, ...tagProps } = getTagProps({ index });
+                                    return (_jsxs(AutocompleteItem, { ...tagProps, children: [_jsx(AutocompleteItemLabel, { children: isString(valueItem)
                                                     ? valueItem
-                                                    : valueItem.Label || valueItem.label }), _jsx(AutocompleteItemRemove, Object.assign({ onClick: onDelete }, { children: "\u2715" }))] }), key));
-                                }), _jsx(AutocompleteInput, Object.assign({}, inputProps(), { placeholder: placeholder }))] })), !!options.length && (_jsx(AutocompleteInputArrow, Object.assign({}, getPopupIndicatorProps(), { isOpen: popupOpen }))), loading && _jsx(InputProgress, {})] })), groupedOptions.length ? (_jsx(AutocompleteMenu, Object.assign({}, getListboxProps(), { children: groupedOptions.map((option, index) => (_jsx(AutocompleteMenuItem, Object.assign({}, getOptionProps({ option, index }), { children: isString(option) ? option : option.Label || option.label }), index))) }))) : null, children] }));
+                                                    : valueItem.Label || valueItem.label }), _jsx(AutocompleteItemRemove, { onClick: onDelete, children: "\u2715" })] }, key));
+                                }), _jsx(AutocompleteInput, { ...inputProps(), placeholder: placeholder })] }), !!options.length && (_jsx(AutocompleteInputArrow, { ...getPopupIndicatorProps(), isOpen: popupOpen })), loading && _jsx(InputProgress, {})] }), groupedOptions.length ? (_jsx(AutocompleteMenu, { ...getListboxProps(), children: groupedOptions.map((option, index) => (_jsx(AutocompleteMenuItem, { ...getOptionProps({ option, index }), children: isString(option) ? option : option.Label || option.label }, index))) })) : null, children] }));
     // });
 };

package/Autocomplete/AutocompleteReach.d.ts

@@ -1 +1 @@
-export declare const Autocomplete: null;
+export declare const Autocomplete: null;

package/Autocomplete/components.d.ts

@@ -1,21 +1,21 @@
-/// <reference types="react" />
-export declare const AutocompleteRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteItem: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteItemLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteItemRemove: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteInputWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-/**
- * This cannot be a button otherwise on `Enter` the form would submit instead
- * of opening the dropdown or adding the selection. There are too many events
- * to prevent if we were using a standard HTML `<button>`
- */
-export declare const AutocompleteInputArrow: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Select/components").SelectArrowProps & import("react").RefAttributes<HTMLSpanElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteMenu: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteMenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
-    $active?: boolean | undefined;
-    disabled?: boolean | undefined;
-}, never>;
+/// <reference types="react" />
+export declare const AutocompleteRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const AutocompleteLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+export declare const AutocompleteWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const AutocompleteInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const AutocompleteItem: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const AutocompleteItemLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const AutocompleteItemRemove: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const AutocompleteInputWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const AutocompleteInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+/**
+ * This cannot be a button otherwise on `Enter` the form would submit instead
+ * of opening the dropdown or adding the selection. There are too many events
+ * to prevent if we were using a standard HTML `<button>`
+ */
+export declare const AutocompleteInputArrow: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Select/components").SelectArrowProps & import("react").RefAttributes<HTMLSpanElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const AutocompleteMenu: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const AutocompleteMenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    $active?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, never>;

package/Autocomplete/helpers.d.ts

@@ -1,3 +1,3 @@
-import type { Option } from "../types";
-export declare type AutocompleteValue = null | undefined | (string | Option)[] | Option | string;
-export declare function normaliseAutocompleteValue(value?: AutocompleteValue, asArray?: boolean): any;
+import type { Option } from "../types";
+export declare type AutocompleteValue = null | undefined | (string | Option)[] | Option | string;
+export declare function normaliseAutocompleteValue(value?: AutocompleteValue, asArray?: boolean): any;

package/Autocomplete/index.d.ts

@@ -1,2 +1,2 @@
-export type { AutocompleteProps, AutocompleteConfig } from "./AutocompleteMui";
-export { Autocomplete } from "./AutocompleteMui";
+export type { AutocompleteProps, AutocompleteConfig } from "./AutocompleteMui";
+export { Autocomplete } from "./AutocompleteMui";

package/Autocomplete/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Autocomplete/index.js",
+  "types": "./index.d.ts"
+}

package/Bg/BgColor.d.ts

@@ -1,36 +1,36 @@
-/// <reference types="react" />
-import { ContainerProps } from "../Grid";
-export declare const BgColor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    $bg: BgContainerProps["color"];
-}, never>;
-export declare const BgColorSkewed: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    $bg: BgContainerProps["color"];
-    $transform: string;
-}, never>;
-export declare type BgContainerProps = ContainerProps & {
-    color: NonNullable<React.CSSProperties["background"]>;
-    /**
-     * In `deg` unit.
-     * @default 0
-     */
-    skewY?: number;
-    /**
-     * In `deg` unit. Suggested `10` to `20`
-     * @default 0
-     */
-    rotate?: number;
-    /**
-     * @default  1
-     */
-    scaleY?: number;
-    /**
-     * @default 1
-     */
-    scaleX?: number;
-    /**
-     * In `vw` unit
-     * @default 0
-     */
-    perspective?: number;
-};
-export declare const BgContainer: React.FC<BgContainerProps>;
+/// <reference types="react" />
+import { ContainerProps } from "../Grid";
+export declare const BgColor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $bg: BgContainerProps["color"];
+}, never>;
+export declare const BgColorSkewed: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $bg: BgContainerProps["color"];
+    $transform: string;
+}, never>;
+export declare type BgContainerProps = ContainerProps & {
+    color: NonNullable<React.CSSProperties["background"]>;
+    /**
+     * In `deg` unit.
+     * @default 0
+     */
+    skewY?: number;
+    /**
+     * In `deg` unit. Suggested `10` to `20`
+     * @default 0
+     */
+    rotate?: number;
+    /**
+     * @default  1
+     */
+    scaleY?: number;
+    /**
+     * @default 1
+     */
+    scaleX?: number;
+    /**
+     * In `vw` unit
+     * @default 0
+     */
+    perspective?: number;
+};
+export declare const BgContainer: ({ color, skewY, rotate, scaleY, scaleX, perspective, ...containerProps }: BgContainerProps) => JSX.Element;

package/Bg/BgColor.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { overlay } from "../styles";
@@ -20,14 +19,13 @@ export const BgColorSkewed = styled.div `
     `}
   }
 `;
-export const BgContainer = (_a) => {
-    var { color, skewY = 0, rotate = 0, scaleY = 1, // 0.85,
-    scaleX = 1, // 4,
-    perspective = 0 } = _a, //100,
-    containerProps = __rest(_a, ["color", "skewY", "rotate", "scaleY", "scaleX", "perspective"]);
+export const BgContainer = ({ color, skewY = 0, rotate = 0, scaleY = 1, // 0.85,
+scaleX = 1, // 4,
+perspective = 0, //100,
+...containerProps }) => {
     let $transform = "";
     if (skewY || rotate) {
         $transform = `perspective(${perspective}vw) rotateY(${rotate}deg) skewY(${skewY}deg) scaleY(${scaleY}) scaleX(${scaleX})`;
     }
-    return $transform ? (_jsx(BgColorSkewed, Object.assign({ "$bg": color, "$transform": $transform }, { children: _jsx(Container, Object.assign({ style: { position: "relative" } }, containerProps)) }))) : (_jsx(BgColor, Object.assign({ "$bg": color }, { children: _jsx(Container, Object.assign({}, containerProps)) })));
+    return $transform ? (_jsx(BgColorSkewed, { "$bg": color, "$transform": $transform, children: _jsx(Container, { style: { position: "relative" }, ...containerProps }) })) : (_jsx(BgColor, { "$bg": color, children: _jsx(Container, { ...containerProps }) }));
 };

package/Bg/BgPhoto.d.ts

@@ -1,14 +1,13 @@
-/// <reference types="react" />
-import { ContainerProps } from "../Grid";
-export declare type BgPhotoPropsStyled = Required<Pick<BgPhotoProps, "containerSize" | "$overlap">>;
-export declare type BgPhotoProps = {
-    src: string;
-    containerSize?: ContainerProps["size"];
-    /**
-     * Bg photo overlap on container, in px
-     *
-     * @default 0
-     */
-    $overlap?: number;
-};
-export declare const BgPhoto: ({ src, containerSize, $overlap, }: BgPhotoProps) => JSX.Element;
+import { ContainerProps } from "../Grid";
+export declare type BgPhotoPropsStyled = Required<Pick<BgPhotoProps, "containerSize" | "$overlap">>;
+export declare type BgPhotoProps = {
+    src: string;
+    containerSize?: ContainerProps["size"];
+    /**
+     * Bg photo overlap on container, in px
+     *
+     * @default 0
+     */
+    $overlap?: number;
+};
+export declare const BgPhoto: ({ src, containerSize, $overlap, }: BgPhotoProps) => JSX.Element;

package/Bg/BgPhoto.js

@@ -55,5 +55,5 @@ const BgPhotoMask = styled(Container) `
 `;
 export const BgPhoto = ({ src, containerSize = "xl", $overlap = 0, }) => {
     const styledProps = { containerSize, $overlap };
-    return (_jsx(BgPhotoWrap, Object.assign({ style: { backgroundImage: `url(${src})` }, "$max": "xxl" }, { children: _jsx(BgPhotoMask, Object.assign({ size: containerSize }, styledProps)) })));
+    return (_jsx(BgPhotoWrap, { style: { backgroundImage: `url(${src})` }, "$max": "xxl", children: _jsx(BgPhotoMask, { size: containerSize, ...styledProps }) }));
 };

package/Bg/BgSvg.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-export declare type BgSvgProps = {
-    color: string;
-};
-/**
- * Centered triangle shape
- */
-export declare const BgSvg: ({ color }: BgSvgProps) => JSX.Element;
+export declare type BgSvgProps = {
+    color: string;
+};
+/**
+ * Centered triangle shape
+ */
+export declare const BgSvg: ({ color }: BgSvgProps) => JSX.Element;

package/Bg/BgSvg.js

@@ -11,5 +11,5 @@ const Root = styled.svg `
  * Centered triangle shape
  */
 export const BgSvg = ({ color }) => {
-    return (_jsx(Root, Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1200 120", preserveAspectRatio: "none" }, { children: _jsx("path", { d: "M1200 0L0 0 598.97 114.72 1200 0z", fill: color }) })));
+    return (_jsx(Root, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1200 120", preserveAspectRatio: "none", children: _jsx("path", { d: "M1200 0L0 0 598.97 114.72 1200 0z", fill: color }) }));
 };

package/Bg/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./BgColor";
-export * from "./BgPhoto";
-export * from "./BgSvg";
+export * from "./BgColor";
+export * from "./BgPhoto";
+export * from "./BgSvg";