react-better-html 1.1.14 → 1.1.16

package/dist/components/Button.d.ts

@@ -8,14 +8,14 @@ type ButtonProps<Value> = {
     href?: string;
     text?: string;
     value?: Value;
-    icon?: IconName;
+    icon?: IconName | AnyOtherString;
     /** @default "left" */
     iconPosition?: "left" | "right";
     /** @default Same as text color */
     iconColor?: string;
     /** @default 16 */
     iconSize?: number;
-    image?: AssetName;
+    image?: AssetName | AnyOtherString;
     /** @default "left" */
     imagePosition?: "left" | "right";
     /** @default 16 */
@@ -40,7 +40,7 @@ type ButtonComponent = {
     secondary: <Value>(props: ButtonProps<Value>) => React.ReactElement;
     destructive: <Value>(props: ButtonProps<Value>) => React.ReactElement;
     icon: <Value>(props: OmitProps<ButtonProps<Value>, "icon" | "width" | "height" | "isSmall"> & {
-        icon: IconName;
+        icon: IconName | AnyOtherString;
         /** @default 16 */
         size?: number;
         /** @default "#000000" */

package/dist/components/Div.d.ts

@@ -1,10 +1,10 @@
-import { JSX } from "react";
+import { WebTarget } from "styled-components";
 import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
 import { OmitProps } from "../types/app";
 export type DivProps<Value> = {
     value?: Value;
     /** @default "div" */
-    as?: keyof JSX.IntrinsicElements;
+    as?: WebTarget;
     isTabAccessed?: boolean;
     onClickWithValue?: (value: Value) => void;
 } & OmitProps<React.ComponentProps<"div">, "style" | "defaultValue"> & ComponentStyle & ComponentHoverStyle;

package/dist/components/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropWithRef } from "../types/components";
-import { OmitProps } from "../types/app";
+import { AnyOtherString, OmitProps } from "../types/app";
 import { IconName } from "../types/icon";
 import { DivProps } from "./Div";
 export type DropdownOption<Value, Data = unknown> = {
@@ -18,7 +18,7 @@ type DropdownProps<Value, Data> = {
     options: DropdownOption<Value, Data>[];
     value?: Value;
     placeholder?: string;
-    leftIcon?: IconName;
+    leftIcon?: IconName | AnyOtherString;
     withSearch?: boolean;
     withDebounce?: boolean;
     /** @default 0.5s */

package/dist/components/Icon.d.ts

@@ -5,7 +5,7 @@ type IconProps = {
     name: IconName | AnyOtherString;
     /** @default 16 */
     size?: number;
-} & OmitProps<React.ComponentProps<"svg">, "style" | "width" | "height" | "viewBox" | "fill" | "xmlns"> & ComponentStyle & ComponentHoverStyle;
+} & OmitProps<React.ComponentProps<"svg">, "style" | "width" | "height" | "viewBox" | "fill" | "xmlns" | "name"> & ComponentStyle & ComponentHoverStyle;
 type IconComponent = {
     (props: ComponentPropWithRef<SVGSVGElement, IconProps>): React.ReactElement;
 };

package/dist/components/Icon.js

@@ -27,10 +27,10 @@ const Icon = (0, react_2.forwardRef)(function Icon({ name, size = 16, ...props }
     const restProps = (0, hooks_1.useComponentPropsWithoutStyle)(props);
     const svgColor = props.color ?? theme.colors.textPrimary;
     (0, react_2.useEffect)(() => {
-        if (!icons[name])
+        if (!icons[name.toString()])
             console.warn(`The icon \`${name}\` you are trying to use does not exist. Make sure to add it to the \`icons\` object in \`<BetterHtmlProvider>\` config value prop.`);
     }, [icons, name]);
-    return ((0, jsx_runtime_1.jsx)(IconElement, { width: size, height: size, viewBox: `0 0 ${icons[name]?.width ?? 0} ${icons[name]?.height ?? 0}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref, children: icons[name]?.paths.map((path) => ((0, react_1.createElement)("path", { ...path, fill: path.type === "fill" ? svgColor : undefined, stroke: path.type === "stroke" ? svgColor : undefined, key: path.d }))) }));
+    return ((0, jsx_runtime_1.jsx)(IconElement, { width: size, height: size, viewBox: `0 0 ${icons[name.toString()]?.width ?? 0} ${icons[name.toString()]?.height ?? 0}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref, children: icons[name.toString()]?.paths.map((path) => ((0, react_1.createElement)("path", { ...path, fill: path.type === "fill" ? svgColor : undefined, stroke: path.type === "stroke" ? svgColor : undefined, key: path.d }))) }));
 });
 const MemoizedIcon = (0, react_2.memo)(Icon);
 exports.default = { Icon: MemoizedIcon }.Icon;

package/dist/components/InputField.d.ts

@@ -1,13 +1,13 @@
 import React from "react";
 import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
-import { OmitProps } from "../types/app";
+import { AnyOtherString, OmitProps } from "../types/app";
 import { IconName } from "../types/icon";
 type InputFieldProps = {
     label?: string;
     errorText?: string;
     infoText?: string;
-    leftIcon?: IconName;
-    rightIcon?: IconName;
+    leftIcon?: IconName | AnyOtherString;
+    rightIcon?: IconName | AnyOtherString;
     insideInputFieldComponent?: React.ReactNode;
     withDebounce?: boolean;
     /** @default 0.5s */

package/dist/constants/assets.js

@@ -1,10 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.assets = void 0;
-const logo_svg_1 = __importDefault(require("../assets/logo.svg"));
 exports.assets = {
-    logo: logo_svg_1.default,
+    logo: "",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.14",
+   "version": "1.1.16",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [