@koine/react 1.0.8 → 1.0.9

package/scm/index.js

@@ -0,0 +1,30 @@
+export * from "../shared";
+export * from "../Alert";
+export * from "../Animations";
+export * from "../Autocomplete";
+export * from "../Bg";
+export * from "../Breadcrumbs";
+export * from "../Buttons";
+export * from "../Carousel";
+export * from "../Collapsable";
+export * from "../Debug";
+export { KoineDialog } from "../Dialog/sc/framer";
+export * from "../Forms";
+export * from "../Grid";
+export * from "../Hamburger";
+export * from "../Header";
+export * from "../Hidden";
+export * from "../Img";
+export * from "../Link";
+export * from "../MenuItem";
+export * from "../Pagination";
+export * from "../Pill";
+export * from "../Progress";
+export * from "../Rating";
+// export * from "../Select";
+export * from "../Sidebar";
+export * from "../Spacing";
+export * from "../Sticky";
+export * from "../styles";
+export * from "../Tabs";
+export * from "../Typography";

package/scm/package.json

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

package/shared/index.d.ts

@@ -0,0 +1,8 @@
+export * from "../Calendar";
+export * from "../Dialog";
+export * from "../Favicon";
+export * from "../helpers";
+export * from "../hooks";
+export * from "../Meta";
+export * from "../NoJs";
+export * from "../types";

package/shared/index.js

@@ -0,0 +1,8 @@
+export * from "../Calendar";
+export * from "../Dialog";
+export * from "../Favicon";
+export * from "../helpers";
+export * from "../hooks";
+export * from "../Meta";
+export * from "../NoJs";
+export * from "../types";

package/shared/package.json

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

package/styles/Body.d.ts

@@ -1,10 +1,10 @@
-export declare const BodyRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-/**
- * If you have background graphics to overlap you might need to add:
- *
- * ```css
- * z-index: 1;
- * position: relative;
- * ```
- */
-export declare const BodyMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {}, never>;
+export declare const BodyRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+/**
+ * If you have background graphics to overlap you might need to add:
+ *
+ * ```css
+ * z-index: 1;
+ * position: relative;
+ * ```
+ */
+export declare const BodyMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {}, never>;

package/styles/Global.d.ts

@@ -1,15 +1,15 @@
-/**
- * App global style
- *
- * For examples of what to do here take a look at [Bootstrap's reset](https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss)
- * and similar.
- *
- * What we do here:
- * - set the base font family on all possible elements including placeholders prevent Chrome showing a standard font when using the autofill feature
- *  - @see https://stackoverflow.com/a/60987373/1938970
- * - set the base font size on all possible elements to prevent weird zooming on input fields on iPhone iOS devices.
- *  - @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
- *  - @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
- */
-export declare const stylesGlobal = "\n  body {\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: scroll;\n  }\n\n  body,\n  button,\n  input,\n  textarea,\n  select,\n  select:-webkit-autofill::first-line,\n  input:-webkit-autofill::first-line {\n    font-family: var(--font), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n      Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n      sans-serif;\n    font-size: var(--fontSize);\n  }\n\n  html {\n    box-sizing: border-box;\n    @media (prefers-reduced-motion: no-preference) {\n      scroll-behavior: smooth;\n    }\n  }\n\n  *,\n  *:before,\n  *:after {\n    box-sizing: inherit;\n    -webkit-tap-highlight-color: transparent;\n  }\n";
-export declare const StylesGlobal: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+/**
+ * App global style
+ *
+ * For examples of what to do here take a look at [Bootstrap's reset](https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss)
+ * and similar.
+ *
+ * What we do here:
+ * - set the base font family on all possible elements including placeholders prevent Chrome showing a standard font when using the autofill feature
+ *  - @see https://stackoverflow.com/a/60987373/1938970
+ * - set the base font size on all possible elements to prevent weird zooming on input fields on iPhone iOS devices.
+ *  - @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
+ *  - @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
+ */
+export declare const stylesGlobal = "\n  body {\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: scroll;\n  }\n\n  body,\n  button,\n  input,\n  textarea,\n  select,\n  select:-webkit-autofill::first-line,\n  input:-webkit-autofill::first-line {\n    font-family: var(--font), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n      Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n      sans-serif;\n    font-size: var(--fontSize);\n  }\n\n  html {\n    box-sizing: border-box;\n    @media (prefers-reduced-motion: no-preference) {\n      scroll-behavior: smooth;\n    }\n  }\n\n  *,\n  *:before,\n  *:after {\n    box-sizing: inherit;\n    -webkit-tap-highlight-color: transparent;\n  }\n";
+export declare const StylesGlobal: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/styles/index.d.ts

@@ -1,7 +1,7 @@
-export * from "./Body";
-export * from "./Global";
-export * from "./media";
-export * from "./spacing";
-export * from "./styled";
-export * from "./theme";
-export * from "./theme--vanilla";
+export * from "./Body";
+export * from "./Global";
+export * from "./media";
+export * from "./spacing";
+export * from "./styled";
+export * from "./theme";
+export * from "./theme--vanilla";

package/styles/media.d.ts

@@ -1,67 +1,67 @@
-import { Breakpoint, Breakpoints } from "./theme";
-export declare const min: MediaQueryFunction, max: MediaQueryFunction, up: MediaQueryFunction, down: (br: Breakpoint) => string, between: (br1: Breakpoint, br2: Breakpoint) => string, only: (br: Breakpoint) => string;
-export declare type MediaDirection = "min" | "max";
-export declare type MediaQuery = `${MediaDirection}:${Breakpoint}`;
-export declare type MediaQueryFunction = {
-    [Breakpoint in keyof Breakpoints]: string;
-} & {
-    (breakpoint: Breakpoint): string;
-};
-export declare function useMedia(media: MediaQuery): boolean;
-/**
- * Generate media queries helpers
- *
- * Usage:
- * ```jsx
- * import { generateMediaQueries } from "@koine/react";
- *
- * export const breakpoints = {
- *   xs: 0,
- *   sm: 440,
- *   md: 768,
- *   lg: 1024,
- *   xl: 1368,
- *   xxl: 1690,
- * } as const;
- *
- * export const { min, max, up, down, between, only } = generateMediaQueries(breakpoints);
- * ```
- *
- * Consider the following syntaxes, using normal CSS is just slightly
- * longer but it aovid js imports, reduce the js overhead and improve CSS
- * highlighting in the editor.
- *
- * Even if we would reduce the function signature to the bare minimum the advantage
- * in terms of typing would not be much, also loosing in readability.
- *
- * ```css
- * // but unfortunately this does not work
- * @media (min-width: var(--b-sm)) {}
- * @media (min-width: 480px) {}
- *
- * ${media("min", "sm")} {}
- * ${mediaMin("sm")} {}
- * ${min.sm} {}
- * ${p => p.theme.min.sm}``
- * ```
- *
- * Related projects:
- * @see https://github.com/mg901/styled-breakpoints
- * @see https://github.com/morajabi/styled-media-query
- *
- * @see https://www.w3.org/TR/mediaqueries-5/#custom-mq The spec would allow for
- * something like this syntax
- *
- * ```css
- * @custom-media --narrow-window (max-width: 30em);
- * @media (--narrow-window) {}
- * ```
- */
-export declare function generateMediaQueries(breakpoints: Breakpoints): {
-    min: MediaQueryFunction;
-    max: MediaQueryFunction;
-    up: MediaQueryFunction;
-    down: (br: Breakpoint) => string;
-    between: (br1: Breakpoint, br2: Breakpoint) => string;
-    only: (br: Breakpoint) => string;
-};
+import { Breakpoint, Breakpoints } from "./theme";
+export declare const min: MediaQueryFunction, max: MediaQueryFunction, up: MediaQueryFunction, down: (br: Breakpoint) => string, between: (br1: Breakpoint, br2: Breakpoint) => string, only: (br: Breakpoint) => string;
+export declare type MediaDirection = "min" | "max";
+export declare type MediaQuery = `${MediaDirection}:${Breakpoint}`;
+export declare type MediaQueryFunction = {
+    [Breakpoint in keyof Breakpoints]: string;
+} & {
+    (breakpoint: Breakpoint): string;
+};
+export declare function useMedia(media: MediaQuery): boolean;
+/**
+ * Generate media queries helpers
+ *
+ * Usage:
+ * ```jsx
+ * import { generateMediaQueries } from "@koine/react";
+ *
+ * export const breakpoints = {
+ *   xs: 0,
+ *   sm: 440,
+ *   md: 768,
+ *   lg: 1024,
+ *   xl: 1368,
+ *   xxl: 1690,
+ * } as const;
+ *
+ * export const { min, max, up, down, between, only } = generateMediaQueries(breakpoints);
+ * ```
+ *
+ * Consider the following syntaxes, using normal CSS is just slightly
+ * longer but it aovid js imports, reduce the js overhead and improve CSS
+ * highlighting in the editor.
+ *
+ * Even if we would reduce the function signature to the bare minimum the advantage
+ * in terms of typing would not be much, also loosing in readability.
+ *
+ * ```css
+ * // but unfortunately this does not work
+ * @media (min-width: var(--b-sm)) {}
+ * @media (min-width: 480px) {}
+ *
+ * ${media("min", "sm")} {}
+ * ${mediaMin("sm")} {}
+ * ${min.sm} {}
+ * ${p => p.theme.min.sm}``
+ * ```
+ *
+ * Related projects:
+ * @see https://github.com/mg901/styled-breakpoints
+ * @see https://github.com/morajabi/styled-media-query
+ *
+ * @see https://www.w3.org/TR/mediaqueries-5/#custom-mq The spec would allow for
+ * something like this syntax
+ *
+ * ```css
+ * @custom-media --narrow-window (max-width: 30em);
+ * @media (--narrow-window) {}
+ * ```
+ */
+export declare function generateMediaQueries(breakpoints: Breakpoints): {
+    min: MediaQueryFunction;
+    max: MediaQueryFunction;
+    up: MediaQueryFunction;
+    down: (br: Breakpoint) => string;
+    between: (br1: Breakpoint, br2: Breakpoint) => string;
+    only: (br: Breakpoint) => string;
+};

package/styles/package.json

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

package/styles/spacing.d.ts

@@ -1,13 +1,13 @@
-import type { DefaultTheme } from "styled-components";
-export declare type SpacingSize = "sm" | "md" | "lg";
-export declare type SpacingProperty = "padding" | "margin";
-/** @default 1 */
-export declare type SpacingFactor = number;
-export declare type SpacingDirection = "top" | "bottom";
-export declare type SpacingDirectionAxis = "vertical" | SpacingDirection;
-export declare type SpacingDevices = keyof DefaultTheme["devices"];
-export declare type SpacingArgs = Parameters<typeof spacing>;
-export declare function spacing(this: DefaultTheme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, direction?: SpacingDirectionAxis, devices?: SpacingDevices[]): string;
-export declare function spacingTop(this: DefaultTheme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, devices?: SpacingDevices[]): string;
-export declare function spacingBottom(this: DefaultTheme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, devices?: SpacingDevices[]): string;
-export declare function spacingVertical(this: DefaultTheme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, devices?: SpacingDevices[]): string;
+import type { Theme } from "./theme";
+export declare type SpacingSize = "sm" | "md" | "lg";
+export declare type SpacingProperty = "padding" | "margin";
+/** @default 1 */
+export declare type SpacingFactor = number;
+export declare type SpacingDirection = "top" | "bottom";
+export declare type SpacingDirectionAxis = "vertical" | SpacingDirection;
+export declare type SpacingDevices = keyof Theme["devices"];
+export declare type SpacingArgs = Parameters<typeof spacing>;
+export declare function spacing(this: Theme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, direction?: SpacingDirectionAxis, devices?: SpacingDevices[]): string;
+export declare function spacingTop(this: Theme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, devices?: SpacingDevices[]): string;
+export declare function spacingBottom(this: Theme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, devices?: SpacingDevices[]): string;
+export declare function spacingVertical(this: Theme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, devices?: SpacingDevices[]): string;

package/styles/spacing.js

@@ -2,7 +2,7 @@ function _spacing(theme, size = "md", factor = 1, property = "padding", directio
     const { breakpoints, devices: DEVICES, spaces: SPACES } = theme;
     let css = "";
     const prop = `${property}-${direction}`;
-    if (devices === ["mobile"]) {
+    if (!devices.length || devices[0] === "mobile") {
         css += `@media(max-width: ${breakpoints[DEVICES.mobile]}px){
         ${prop}: ${SPACES["mobile"][size] * factor}px;
       }`;

package/styles/styled.d.ts

@@ -1,12 +1,12 @@
-import React from "react";
-export declare function colStretch(direction: "left" | "right", bg: React.CSSProperties["background"]): string;
-/** @see https://caniuse.com/?search=inset */
-export declare const inset0 = "top:0;left:0;right:0;bottom:0;";
-export declare const overlay: string;
-export declare const centered = "display: flex;align-items: center;justify-content: center;";
-export declare const ellipsis = "overflow: hidden;text-overflow: ellipsis;white-space: nowrap;";
-/**
- * @see import("@mui/utils").visuallyHidden https://github.com/mui-org/material-ui/blob/master/packages/mui-utils/src/visuallyHidden.ts
- */
-export declare const invisible = "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;";
-export declare const stateFocus = "outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);";
+import React from "react";
+export declare function colStretch(direction: "left" | "right", bg: React.CSSProperties["background"]): string;
+/** @see https://caniuse.com/?search=inset */
+export declare const inset0 = "top:0;left:0;right:0;bottom:0;";
+export declare const overlay: string;
+export declare const centered = "display: flex;align-items: center;justify-content: center;";
+export declare const ellipsis = "overflow: hidden;text-overflow: ellipsis;white-space: nowrap;";
+/**
+ * @see import("@mui/utils").visuallyHidden https://github.com/mui-org/material-ui/blob/master/packages/mui-utils/src/visuallyHidden.ts
+ */
+export declare const invisible = "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;";
+export declare const stateFocus = "outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);";

package/styles/theme--vanilla.d.ts

@@ -1,18 +1,18 @@
-import { FC } from "react";
-export declare const THEME_KEY = "theme";
-export declare const THEME_DEFAULT: ThemeVanillaValue;
-export declare const getInitialThemeFromRequest: (cookie?: string | undefined) => ThemeVanillaValue;
-export declare const getInitialThemeFromClient: () => ThemeVanillaValue;
-export declare type ThemeCookie = {
-    [THEME_KEY]: ThemeVanillaValue;
-};
-export declare type ThemeVanillaValue = "light" | "dark";
-export declare type ThemeVanillaContextType = {
-    theme: ThemeVanillaValue;
-    setTheme?: React.Dispatch<React.SetStateAction<ThemeVanillaValue>>;
-};
-export declare const ThemeVanillaContext: import("react").Context<ThemeVanillaContextType>;
-export declare type ThemeVanillaProviderProps = {
-    initialTheme: ThemeVanillaValue;
-};
-export declare const ThemeVanillaProvider: FC<ThemeVanillaProviderProps>;
+/// <reference types="react" />
+export declare const THEME_KEY = "theme";
+export declare const THEME_DEFAULT: ThemeVanillaValue;
+export declare const getInitialThemeFromRequest: (cookie?: string | undefined) => ThemeVanillaValue;
+export declare const getInitialThemeFromClient: () => ThemeVanillaValue;
+export declare type ThemeCookie = {
+    [THEME_KEY]: ThemeVanillaValue;
+};
+export declare type ThemeVanillaValue = "light" | "dark";
+export declare type ThemeVanillaContextType = {
+    theme: ThemeVanillaValue;
+    setTheme?: React.Dispatch<React.SetStateAction<ThemeVanillaValue>>;
+};
+export declare const ThemeVanillaContext: import("react").Context<ThemeVanillaContextType>;
+export declare type ThemeVanillaProviderProps = React.PropsWithChildren<{
+    initialTheme: ThemeVanillaValue;
+}>;
+export declare const ThemeVanillaProvider: ({ initialTheme, children, }: ThemeVanillaProviderProps) => JSX.Element;

package/styles/theme--vanilla.js

@@ -7,7 +7,7 @@ export const THEME_DEFAULT = "light";
 export const getInitialThemeFromRequest = (cookie) => {
     if (cookie) {
         const parsed = parseCookie(cookie);
-        return parsed === null || parsed === void 0 ? void 0 : parsed.theme;
+        return parsed?.theme;
     }
     return THEME_DEFAULT;
 };
@@ -49,5 +49,5 @@ export const ThemeVanillaProvider = ({ initialTheme, children, }) => {
     useUpdateEffect(() => {
         rawSetTheme(theme);
     }, [theme]);
-    return (_jsx(ThemeVanillaContext.Provider, Object.assign({ value: { theme, setTheme } }, { children: children })));
+    return (_jsx(ThemeVanillaContext.Provider, { value: { theme, setTheme }, children: children }));
 };

package/styles/theme.d.ts

@@ -1,82 +1,82 @@
-export declare type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-export declare type Breakpoints = Record<Breakpoint, number>;
-/**
- * You can override the default breakpoints through the .env variable
- *
- * FIXME: find a better way to configure it, the problem is that we use the media
- * queries within this pre-compiled library and thrught it was better to avoid
- * using theming props for a more ergonomic usage.
- *
- * ```.env
- * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
- * ```
- */
-export declare const breakpoints: Breakpoints;
-export declare const createTheme: (options: ThemeOptions) => Theme;
-export declare const useTheme: () => Theme;
-export declare type Theme = {
-    maxWidth: number;
-    gutter: {
-        quarter: number;
-        third: number;
-        half: number;
-        /** @default 60 */
-        normal: number;
-        double: number;
-        triple: number;
-    };
-    breakpoints: Breakpoints;
-    devices: {
-        /** @default "sm" */
-        mobile: keyof Breakpoints;
-        /** @default "md" */
-        tablet: keyof Breakpoints;
-        /** @default "lg" */
-        desktop: keyof Breakpoints;
-    };
-    spaces: {
-        mobile: {
-            /** @default 10 */
-            sm: number;
-            /** @default 20 */
-            md: number;
-            /** @default 40 */
-            lg: number;
-        };
-        tablet: {
-            /** @default 15 */
-            sm: number;
-            /** @default 30 */
-            md: number;
-            /** @default 60 */
-            lg: number;
-        };
-        desktop: {
-            /** @default 20 */
-            sm: number;
-            /** @default 40 */
-            md: number;
-            /** @default 80 */
-            lg: number;
-        };
-    };
-    header: {
-        /** @default "lg" */
-        breakpoint: keyof Breakpoints;
-        /** @default [82, 134] */
-        height: [number, number];
-        /** @default [60, 90] */
-        heightSticky: [number, number];
-        /** @default [76, 76] */
-        logoWidth: [number, number];
-        /** @default [70, 70] */
-        logoWidthSticky: [number, number];
-    };
-};
-export declare type ThemeOptions = {
-    maxWidth?: number;
-    gutter: NonNullable<Theme["gutter"]>;
-    devices?: Theme["devices"];
-    spaces: NonNullable<Theme["spaces"]>;
-    header: NonNullable<Theme["header"]>;
-};
+export declare type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export declare type Breakpoints = Record<Breakpoint, number>;
+/**
+ * You can override the default breakpoints through the .env variable
+ *
+ * FIXME: find a better way to configure it, the problem is that we use the media
+ * queries within this pre-compiled library and thrught it was better to avoid
+ * using theming props for a more ergonomic usage.
+ *
+ * ```.env
+ * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
+ * ```
+ */
+export declare const breakpoints: Breakpoints;
+export declare const createTheme: (options: ThemeOptions) => Theme;
+export declare const useTheme: () => Theme;
+export declare type Theme = {
+    maxWidth: number;
+    gutter: {
+        quarter: number;
+        third: number;
+        half: number;
+        /** @default 60 */
+        normal: number;
+        double: number;
+        triple: number;
+    };
+    breakpoints: Breakpoints;
+    devices: {
+        /** @default "sm" */
+        mobile: keyof Breakpoints;
+        /** @default "md" */
+        tablet: keyof Breakpoints;
+        /** @default "lg" */
+        desktop: keyof Breakpoints;
+    };
+    spaces: {
+        mobile: {
+            /** @default 10 */
+            sm: number;
+            /** @default 20 */
+            md: number;
+            /** @default 40 */
+            lg: number;
+        };
+        tablet: {
+            /** @default 15 */
+            sm: number;
+            /** @default 30 */
+            md: number;
+            /** @default 60 */
+            lg: number;
+        };
+        desktop: {
+            /** @default 20 */
+            sm: number;
+            /** @default 40 */
+            md: number;
+            /** @default 80 */
+            lg: number;
+        };
+    };
+    header: {
+        /** @default "lg" */
+        breakpoint: keyof Breakpoints;
+        /** @default [82, 134] */
+        height: [number, number];
+        /** @default [60, 90] */
+        heightSticky: [number, number];
+        /** @default [76, 76] */
+        logoWidth: [number, number];
+        /** @default [70, 70] */
+        logoWidthSticky: [number, number];
+    };
+};
+export declare type ThemeOptions = {
+    maxWidth?: number;
+    gutter: NonNullable<Theme["gutter"]>;
+    devices?: Theme["devices"];
+    spaces: NonNullable<Theme["spaces"]>;
+    header: NonNullable<Theme["header"]>;
+};

package/styles/theme.js

@@ -34,5 +34,8 @@ const themeDefault = {
         desktop: "lg",
     },
 };
-export const createTheme = (options) => (Object.assign(Object.assign({}, themeDefault), options));
+export const createTheme = (options) => ({
+    ...themeDefault,
+    ...options,
+});
 export const useTheme = _useTheme;

package/tw/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../shared";
+export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/bare";

package/tw/index.js

@@ -0,0 +1,30 @@
+export * from "../shared";
+// export * from "../Alert";
+// export * from "../Animations";
+// export * from "../Autocomplete";
+// export * from "../Bg";
+// export * from "../Breadcrumbs";
+// export * from "../Buttons";
+// export * from "../Carousel";
+// export * from "../Collapsable";
+// export * from "../Debug";
+export { KoineDialog } from "../Dialog/tw/bare";
+// export * from "../Forms";
+// export * from "../Grid";
+// export * from "../Hamburger";
+// export * from "../Header";
+// export * from "../Hidden";
+// export * from "../Img";
+// export * from "../Link";
+// export * from "../MenuItem";
+// export * from "../Pagination";
+// export * from "../Pill";
+// export * from "../Progress";
+// export * from "../Rating";
+// // export * from "../Select";
+// export * from "../Sidebar";
+// export * from "../Spacing";
+// export * from "../Sticky";
+// export * from "../styles";
+// export * from "../Tabs";
+// export * from "../Typography";

package/tw/package.json

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

package/twm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../shared";
+export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/framer";