@koine/react 1.0.8 → 1.0.11

package/Forms/Toggle/useToggle.d.ts

@@ -1,46 +1,46 @@
-/// <reference types="react" />
-import type { Option } from "../../types";
-import { FormControl } from "../helpers";
-export declare type UseToggleProps = Omit<FormControl, "value"> & {
-    value?: boolean;
-    valueTrue?: string;
-    valueFalse?: string;
-    options?: Option[];
-};
-/**
- * This hook is meant to powere Checkboxes, Switches and checkbox-like Radios
- * components, it works in fact in two modes:
- *
- * 1: behaviour as standard checkbox
- * yup validation would simply look like:
- *
- * ```ts
- * privacy:  boolean().required(),
- * // add `.nullable()` if you do not provide a boolean `defaultValue`
- * ```
- *
- * 2: beahviour as two radio for checkbox with custom true/false values as
- * strings yup validation would look like:
- *
- * ```ts
- * newsletter: string().oneOf(["yes", "no"]).required(),
- * // add `.nullable()` if you do not provide a string `defaultValue`
- *
- * // to do not make it required and avoid triggering an error when the input is
- * // untouched you need to set the default value of the input in the form
- * // initialization's `defaultValues` as such:
- *
- * useForm({ defaultValues: { newsletter: "no" }})
- * ```
- *
- * To enable this mode either pass the props `valueTrue` and `valueFalse` or
- * an array of options with the shape of `Option`
- */
-export declare function useToggle(props: UseToggleProps, ref: React.ForwardedRef<HTMLInputElement>): {
-    Inputs: JSX.Element;
-    rootProps: {
-        htmlFor: string | undefined;
-    };
-    label: any;
-    value: any;
-};
+/// <reference types="react" />
+import type { Option } from "../../types";
+import { FormControl } from "../helpers";
+export declare type UseToggleProps = Omit<FormControl, "value"> & {
+    value?: boolean;
+    valueTrue?: string;
+    valueFalse?: string;
+    options?: Option[];
+};
+/**
+ * This hook is meant to powere Checkboxes, Switches and checkbox-like Radios
+ * components, it works in fact in two modes:
+ *
+ * 1: behaviour as standard checkbox
+ * yup validation would simply look like:
+ *
+ * ```ts
+ * privacy:  boolean().required(),
+ * // add `.nullable()` if you do not provide a boolean `defaultValue`
+ * ```
+ *
+ * 2: beahviour as two radio for checkbox with custom true/false values as
+ * strings yup validation would look like:
+ *
+ * ```ts
+ * newsletter: string().oneOf(["yes", "no"]).required(),
+ * // add `.nullable()` if you do not provide a string `defaultValue`
+ *
+ * // to do not make it required and avoid triggering an error when the input is
+ * // untouched you need to set the default value of the input in the form
+ * // initialization's `defaultValues` as such:
+ *
+ * useForm({ defaultValues: { newsletter: "no" }})
+ * ```
+ *
+ * To enable this mode either pass the props `valueTrue` and `valueFalse` or
+ * an array of options with the shape of `Option`
+ */
+export declare function useToggle(props: UseToggleProps, ref: React.ForwardedRef<HTMLInputElement>): {
+    Inputs: JSX.Element;
+    rootProps: {
+        htmlFor: string | undefined;
+    };
+    label: any;
+    value: any;
+};

package/Forms/Toggle/useToggle.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { useWatch } from "react-hook-form";
@@ -33,12 +32,12 @@ import { InputInvisible } from "../styles";
  * an array of options with the shape of `Option`
  */
 export function useToggle(props, ref) {
-    const { name, control, register, label, options, value: propValue } = props, restProps = __rest(props, ["name", "control", "register", "label", "options", "value"]);
-    let { id, valueTrue, valueFalse } = restProps, 
+    const { name, control, register, label, options, value: propValue, ...restProps } = props;
+    let { id, valueTrue, valueFalse, 
     // defaultChecked,
     // defaultValue,
     // eslint-disable-next-line prefer-const
-    remainingInputProps = __rest(restProps, ["id", "valueTrue", "valueFalse"]);
+    ...remainingInputProps } = restProps;
     // use options data convention to pass on the true/false values
     if (options) {
         valueTrue = options
@@ -97,7 +96,7 @@ export function useToggle(props, ref) {
             const firstInput = event.target;
             const next = firstInput.nextElementSibling;
             const prev = firstInput.previousElementSibling;
-            const secondInput = (next === null || next === void 0 ? void 0 : next.tagName) === "INPUT" ? next : prev;
+            const secondInput = next?.tagName === "INPUT" ? next : prev;
             let target = firstInput;
             if (firstInput.checked) {
                 target = secondInput;
@@ -125,7 +124,7 @@ export function useToggle(props, ref) {
         label: label ? label : value,
         value,
     }), [value, valueFalse, isRadio, id, idTrue, idFalse, label]);
-    const Inputs = useMemo(() => isRadio ? (_jsxs(_Fragment, { children: [_jsx(InputInvisible, Object.assign({ id: idFalse }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueFalse })), _jsx(InputInvisible, Object.assign({ id: idTrue }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueTrue }))] })) : (_jsx(InputInvisible, Object.assign({ id: id, type: "checkbox" }, inputProps, remainingInputProps))), [
+    const Inputs = useMemo(() => isRadio ? (_jsxs(_Fragment, { children: [_jsx(InputInvisible, { id: idFalse, ...inputProps, ...remainingInputProps, onKeyDown: handleKeyDown, type: "radio", value: valueFalse }), _jsx(InputInvisible, { id: idTrue, ...inputProps, ...remainingInputProps, onKeyDown: handleKeyDown, type: "radio", value: valueTrue })] })) : (_jsx(InputInvisible, { id: id, type: "checkbox", ...inputProps, ...remainingInputProps })), [
         inputProps,
         remainingInputProps,
         handleKeyDown,
@@ -139,5 +138,8 @@ export function useToggle(props, ref) {
         // defaultValue,
     ]);
     // console.log("useToggle: render", value);
-    return Object.assign(Object.assign({}, valueDependentProps), { Inputs });
+    return {
+        ...valueDependentProps,
+        Inputs,
+    };
 }

package/Forms/antispam.d.ts

@@ -1,24 +1,24 @@
-import type { ObjectShape } from "yup/lib/object";
-/**
- * Encode form
- *
- * Takes a record of yup validations and outputs a `yup` schema with encoded
- * names (antispam technique) and a record of the encoded/decoded input `name`s.
- *
- * We skip the names prefixed wth an underscore which are considered programmatic
- * form data not created by user input.
- */
-export declare function encodeForm<T extends ObjectShape = {}>(validationRules: T): {
-    encodedSchema: import("yup/lib/object").RequiredObjectSchema<Record<string, T[keyof T]>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<Record<string, T[keyof T]>>>;
-    encodedNames: Record<keyof T, string>;
-};
-/**
- * Decode form data
- *
- * This function is meant to be used inside an api endpoint to gather an encoded
- * form submit data and transform it to the decoded desired json data.
- *
- * Here too we skip encoding/decoding process for names prefixed wth an underscore
- * which are considered programmatic form data not created by user input.
- */
-export declare function decodeForm<ReturnAs extends Record<string, unknown> = {}, FormData extends Record<string, unknown> = {}>(formData: FormData): ReturnAs;
+import type { ObjectShape } from "yup/lib/object";
+/**
+ * Encode form
+ *
+ * Takes a record of yup validations and outputs a `yup` schema with encoded
+ * names (antispam technique) and a record of the encoded/decoded input `name`s.
+ *
+ * We skip the names prefixed wth an underscore which are considered programmatic
+ * form data not created by user input.
+ */
+export declare function encodeForm<T extends ObjectShape = {}>(validationRules: T): {
+    encodedSchema: import("yup/lib/object").RequiredObjectSchema<Record<string, T[keyof T]>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<Record<string, T[keyof T]>>>;
+    encodedNames: Record<keyof T, string>;
+};
+/**
+ * Decode form data
+ *
+ * This function is meant to be used inside an api endpoint to gather an encoded
+ * form submit data and transform it to the decoded desired json data.
+ *
+ * Here too we skip encoding/decoding process for names prefixed wth an underscore
+ * which are considered programmatic form data not created by user input.
+ */
+export declare function decodeForm<ReturnAs extends Record<string, unknown> = {}, FormData extends Record<string, unknown> = {}>(formData: FormData): ReturnAs;

package/Forms/helpers.d.ts

@@ -1,26 +1,26 @@
-/// <reference types="react" />
-import type { Control, UseFormRegister, UseFormSetValue } from "react-hook-form";
-import type { Option } from "../types";
-declare type FormControlNativeType = "input" | "select" | "textarea";
-declare type FormControlFieldValues = Record<string, any>;
-export declare type FormControlNative<T extends FormControlNativeType = "input"> = Omit<React.ComponentPropsWithRef<T>, "name">;
-export declare type FormControlProps<T extends FormControlFieldValues = any> = {
-    label?: React.ReactNode;
-    name: string;
-    control?: Control<T>;
-    register?: UseFormRegister<T>;
-    setValue?: UseFormSetValue<T>;
-};
-export declare type FormControl<TControlType extends FormControlNativeType = "input", TFieldValues extends FormControlFieldValues = any> = FormControlNative<TControlType> & FormControlProps<TFieldValues>;
-export declare const normaliseOptions: (options?: (string | Option)[]) => Option[];
-export declare function defaultOptionsFilterFn(options: Option[], inputValue?: string): Option[];
-/**
- * We are faking the native input `onChange` event
- */
-export declare function triggerOnChange<T extends HTMLElement = HTMLInputElement>(onChange?: React.ChangeEventHandler<T>, name?: string, value?: any): void;
-/**
- * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
- * @deprecated
- */
-export declare function triggerChange(input: HTMLInputElement, value?: string): void;
-export {};
+/// <reference types="react" />
+import type { Control, UseFormRegister, UseFormSetValue } from "react-hook-form";
+import type { Option } from "../types";
+declare type FormControlNativeType = "input" | "select" | "textarea";
+declare type FormControlFieldValues = Record<string, any>;
+export declare type FormControlNative<T extends FormControlNativeType = "input"> = Omit<React.ComponentPropsWithRef<T>, "name">;
+export declare type FormControlProps<T extends FormControlFieldValues = any> = {
+    label?: React.ReactNode;
+    name: string;
+    control?: Control<T>;
+    register?: UseFormRegister<T>;
+    setValue?: UseFormSetValue<T>;
+};
+export declare type FormControl<TControlType extends FormControlNativeType = "input", TFieldValues extends FormControlFieldValues = any> = FormControlNative<TControlType> & FormControlProps<TFieldValues>;
+export declare const normaliseOptions: (options?: (string | Option)[]) => Option[];
+export declare function defaultOptionsFilterFn(options: Option[], inputValue?: string): Option[];
+/**
+ * We are faking the native input `onChange` event
+ */
+export declare function triggerOnChange<T extends HTMLElement = HTMLInputElement>(onChange?: React.ChangeEventHandler<T>, name?: string, value?: any): void;
+/**
+ * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
+ * @deprecated
+ */
+export declare function triggerChange(input: HTMLInputElement, value?: string): void;
+export {};

package/Forms/helpers.js

@@ -30,7 +30,7 @@ export function triggerOnChange(onChange, name, value) {
 export function triggerChange(input, value) {
     const obj = window.Object;
     if (!obj) {
-        // if (__DEV__) {
+        // if (process.env["NODE_ENV"] !== "production") {
         //   console.warn("triggerChange: window.Object does not exists, bailing.");
         // }
         return;

package/Forms/index.d.ts

@@ -1,16 +1,15 @@
-export * from "./antispam";
-export * from "./Checkbox";
-export * from "./Input";
-export * from "./InputGroup";
-export * from "./Feedback";
-export * from "./Field";
-export * from "./InputGroup";
-export * from "./Form";
-export * from "./Label";
-export * from "./Password";
-export * from "./Radio";
-export * from "./Switch";
-export * from "./Textarea";
-export * from "./Toggle";
-export * from "./helpers";
-export * from "./styles";
+export * from "./antispam";
+export * from "./Checkbox";
+export * from "./Input";
+export * from "./InputGroup";
+export * from "./Feedback";
+export * from "./Field";
+export * from "./InputGroup";
+export * from "./Label";
+export * from "./Password";
+export * from "./Radio";
+export * from "./Switch";
+export * from "./Textarea";
+export * from "./Toggle";
+export * from "./helpers";
+export * from "./styles";

package/Forms/index.js

@@ -5,7 +5,6 @@ export * from "./InputGroup";
 export * from "./Feedback";
 export * from "./Field";
 export * from "./InputGroup";
-export * from "./Form";
 export * from "./Label";
 export * from "./Password";
 export * from "./Radio";

package/Forms/package.json

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

package/Forms/styles.d.ts

@@ -1,20 +1,19 @@
-/// <reference types="react" />
-export declare const InputInvisible: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputHoneypot: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
-    type: "text";
-    autoComplete: "new-password";
-    tabIndex: -1;
-}, "type" | "autoComplete" | "tabIndex">;
-export declare const InputProgress: import("styled-components").StyledComponent<(p: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-/**
- * Remove the default light blue background on autofilled inputs. To be used as
- * a function that outputs a CSS string.
- *
- * @see https://stackoverflow.com/a/62624824/1938970
- */
-export declare const inputResetAutofill = "\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-background-clip: text;\n  }\n";
-export declare const inputBorder = "\n  border: 1px solid var(--forms-border-color);\n";
-export declare const inputPadding = "\n  padding: var(--forms-gutter-y) var(--forms-gutter-x);\n";
-export declare const inputReset: string;
-export declare const inputBase: string;
-export declare const inputFocus: string;
+export declare const InputInvisible: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const InputHoneypot: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
+    type: "text";
+    autoComplete: "new-password";
+    tabIndex: -1;
+}, "tabIndex" | "type" | "autoComplete">;
+export declare const InputProgress: import("styled-components").StyledComponent<(p: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+/**
+ * Remove the default light blue background on autofilled inputs. To be used as
+ * a function that outputs a CSS string.
+ *
+ * @see https://stackoverflow.com/a/62624824/1938970
+ */
+export declare const inputResetAutofill = "\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-background-clip: text;\n  }\n";
+export declare const inputBorder = "\n  border: 1px solid var(--forms-border-color);\n";
+export declare const inputPadding = "\n  padding: var(--forms-gutter-y) var(--forms-gutter-x);\n";
+export declare const inputReset: string;
+export declare const inputBase: string;
+export declare const inputFocus: string;

package/Forms/styles.js

@@ -11,7 +11,7 @@ export const InputHoneypot = styled(InputInvisible).attrs({
     autoComplete: "new-password",
     tabIndex: -1,
 }) ``;
-export const InputProgress = styled((p) => (_jsx(ProgressLinear, Object.assign({ fg: "var(--accent300)", bg: "var(--accent400)" }, p)))) `
+export const InputProgress = styled((p) => (_jsx(ProgressLinear, { fg: "var(--accent300)", bg: "var(--accent400)", ...p }))) `
   position: absolute;
   bottom: 0;
   left: 0;

package/Gauge/Gauge.d.ts

@@ -1,5 +1,5 @@
-export declare type GaugeProps = {
-    /** In percentage */
-    value: number;
-};
-export declare const Gauge: (_props: GaugeProps) => null;
+export declare type GaugeProps = {
+    /** In percentage */
+    value: number;
+};
+export declare const Gauge: (_props: GaugeProps) => null;

package/Grid/Grid.d.ts

@@ -1,60 +1,64 @@
-/// <reference types="react" />
-import type { Theme, Breakpoint } from "../styles/theme";
-export declare const GRID_COLUMNS = 12;
-export declare const GRID_GUTTER_DEFAULT: keyof Theme["gutter"];
-export declare type GridProps = {
-    /**
-     * @default "half"
-     */
-    $gutter?: keyof Theme["gutter"];
-};
-export declare type ContainerProps = GridProps & {
-    size: Breakpoint;
-    clamp?: boolean;
-};
-export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
-    size: Breakpoint;
-    clamp?: boolean | undefined;
-}, never>;
-export declare type ContainerFluidProps = GridProps & {
-    size: Breakpoint;
-};
-export declare const ContainerFluid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
-    size: Breakpoint;
-}, never>;
-declare type Direction = "min" | "max";
-export declare type RowProps = GridProps & {
-    $valign?: React.CSSProperties["alignItems"];
-    $reverse?: `${Direction}:${Breakpoint}`;
-    /**
-     * It forces child columns to be on one line overflowing the content when it does not fit,
-     * it is suggested to use with children having a minimum width not in percentage,
-     * for things like sliders and carousels
-     */
-    $noWrap?: boolean;
-};
-export declare const Row: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
-    $valign?: React.CSSProperties["alignItems"];
-    $reverse?: "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | undefined;
-    /**
-     * It forces child columns to be on one line overflowing the content when it does not fit,
-     * it is suggested to use with children having a minimum width not in percentage,
-     * for things like sliders and carousels
-     */
-    $noWrap?: boolean | undefined;
-}, never>;
-export declare type ColProps = GridProps & Partial<Record<Breakpoint, number>> & {
-    $width?: number;
-    $flex?: boolean;
-    $valign?: React.CSSProperties["alignItems"];
-    $auto?: boolean;
-    $offset?: string;
-};
-export declare const Col: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & Partial<Record<Breakpoint, number>> & {
-    $width?: number | undefined;
-    $flex?: boolean | undefined;
-    $valign?: React.CSSProperties["alignItems"];
-    $auto?: boolean | undefined;
-    $offset?: string | undefined;
-}, never>;
-export {};
+/// <reference types="react" />
+import type { Theme, Breakpoint } from "../styles/theme";
+export declare const GRID_COLUMNS = 12;
+export declare const GRID_GUTTER_DEFAULT: keyof Theme["gutter"];
+export declare type GridProps = {
+    /**
+     * @default "half"
+     */
+    $gutter?: keyof Theme["gutter"];
+};
+export declare type ContainerProps = React.PropsWithChildren<GridProps & {
+    size: Breakpoint;
+    clamp?: boolean;
+}>;
+export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
+    size: Breakpoint;
+    clamp?: boolean | undefined;
+} & {
+    children?: import("react").ReactNode;
+}, never>;
+export declare type ContainerFluidProps = React.PropsWithChildren<GridProps & {
+    size: Breakpoint;
+}>;
+export declare const ContainerFluid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
+    size: Breakpoint;
+} & {
+    children?: import("react").ReactNode;
+}, never>;
+declare type Direction = "min" | "max";
+export declare type RowProps = GridProps & {
+    $valign?: React.CSSProperties["alignItems"];
+    $reverse?: `${Direction}:${Breakpoint}`;
+    /**
+     * It forces child columns to be on one line overflowing the content when it does not fit,
+     * it is suggested to use with children having a minimum width not in percentage,
+     * for things like sliders and carousels
+     */
+    $noWrap?: boolean;
+};
+export declare const Row: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
+    $valign?: React.CSSProperties["alignItems"];
+    $reverse?: "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | undefined;
+    /**
+     * It forces child columns to be on one line overflowing the content when it does not fit,
+     * it is suggested to use with children having a minimum width not in percentage,
+     * for things like sliders and carousels
+     */
+    $noWrap?: boolean | undefined;
+}, never>;
+export declare type ColProps = GridProps & Partial<Record<Breakpoint, number>> & {
+    $width?: number;
+    $flex?: boolean;
+    $valign?: React.CSSProperties["alignItems"];
+    $auto?: boolean;
+    $offset?: string;
+};
+export declare const Col: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & Partial<Record<Breakpoint, number>> & {
+    $width?: number | undefined;
+    $flex?: boolean | undefined;
+    $valign?: React.CSSProperties["alignItems"];
+    $auto?: boolean | undefined;
+    $offset?: string | undefined;
+}, never>;
+export {};

package/Grid/index.d.ts

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

package/Grid/package.json

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

package/Hamburger/Hamburger.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-export declare type HamburgerProps = {
-    /** A way to provide your own state value. Can be used together with a state action (the `toggle` prop). */
-    toggled?: boolean;
-};
-export declare const Hamburger: React.FC<HamburgerProps>;
+/// <reference types="react" />
+export declare type HamburgerProps = React.ComponentProps<"div"> & {
+    /** A way to provide your own state value. Can be used together with a state action (the `toggle` prop). */
+    toggled?: boolean;
+};
+export declare const Hamburger: ({ toggled, ...props }: HamburgerProps) => JSX.Element;

package/Hamburger/Hamburger.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @file
@@ -49,7 +48,17 @@ const barStyles = {
     background: "currentColor",
     transition,
 };
-export const Hamburger = (_a) => {
-    var { toggled } = _a, props = __rest(_a, ["toggled"]);
-    return (_jsxs("div", Object.assign({ style: Object.assign(Object.assign({}, burgerStyles), { transform: `${toggled ? `rotate(90deg)` : "none"}` }), tabIndex: 0 }, props, { children: [_jsx("div", { style: Object.assign(Object.assign({}, barStyles), { top: `${topOffset}px`, transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}` }) }), _jsx("div", { style: Object.assign(Object.assign({}, barStyles), { top: `${topOffset + barHeight + margin}px`, transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}` }) }), _jsx(HamburgerLabel, Object.assign({ "$toggled": toggled }, { children: "Menu" }))] })));
+export const Hamburger = ({ toggled, ...props }) => {
+    return (_jsxs("div", { style: {
+            ...burgerStyles,
+            transform: `${toggled ? `rotate(90deg)` : "none"}`,
+        }, tabIndex: 0, ...props, children: [_jsx("div", { style: {
+                    ...barStyles,
+                    top: `${topOffset}px`,
+                    transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}`,
+                } }), _jsx("div", { style: {
+                    ...barStyles,
+                    top: `${topOffset + barHeight + margin}px`,
+                    transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}`,
+                } }), _jsx(HamburgerLabel, { "$toggled": toggled, children: "Menu" })] }));
 };

package/Hamburger/index.d.ts

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

package/Hamburger/package.json

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

package/Header/index.d.ts

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

package/Header/package.json

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