@yakad/ui 1.2.81-beta → 1.2.83-beta

package/appBar/appBar.d.ts

@@ -1,3 +1,2 @@
 import React from "react";
-declare function AppBar(props: React.HTMLAttributes<HTMLElement>): JSX.Element;
-export default AppBar;
+export default function AppBar(props: React.HTMLAttributes<HTMLElement>): JSX.Element;

package/appBar/appBar.js

@@ -1,9 +1,8 @@
 import React from "react";
 import { joinClassNames } from "@yakad/lib";
 import styles from "./appBar.module.css";
-function AppBar(props) {
+export default function AppBar(props) {
     const joinedClassNames = joinClassNames(styles.header, props.className);
     return (React.createElement("header", { ...props, className: joinedClassNames }, props.children));
 }
-export default AppBar;
 //# sourceMappingURL=appBar.js.map

package/appBar/appBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"appBar.js","sourceRoot":"","sources":["appBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,SAAS,MAAM,CAAC,KAAwC;IACtD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEzE,OAAO,CACL,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB,IAC3C,KAAK,CAAC,QAAQ,CACR,CACV,CAAC;AACJ,CAAC;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"appBar.js","sourceRoot":"","sources":["appBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAwC;IACnE,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEzE,OAAO,CACH,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACzC,KAAK,CAAC,QAAQ,CACV,CACZ,CAAC;AACN,CAAC"}

package/appBar/appBar.tsx

@@ -2,14 +2,12 @@ import React from "react";
 import { joinClassNames, joinStyles } from "@yakad/lib";
 import styles from "./appBar.module.css";
 
-function AppBar(props: React.HTMLAttributes<HTMLElement>) {
-  const joinedClassNames = joinClassNames(styles.header, props.className!);
+export default function AppBar(props: React.HTMLAttributes<HTMLElement>) {
+    const joinedClassNames = joinClassNames(styles.header, props.className!);
 
-  return (
-    <header {...props} className={joinedClassNames}>
-      {props.children}
-    </header>
-  );
+    return (
+        <header {...props} className={joinedClassNames}>
+            {props.children}
+        </header>
+    );
 }
-
-export default AppBar;

package/button/button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     size?: "small" | "medium" | "large";
     variant?: "text" | "outlined" | "filled" | "filledtonal" | "tonal" | "elevated" | "link" | "fab";
     borderStyle?: "none" | "semi" | "squircle" | "rounded";
@@ -9,5 +9,4 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     loadingVariant?: "scaleOut" | "dots" | "spinner";
     disabled?: boolean;
 }
-declare function Button(props: ButtonProps): JSX.Element;
-export default Button;
+export default function Button(props: ButtonProps): JSX.Element;

package/button/button.js

@@ -8,7 +8,7 @@ const iconSizeMaps = {
     medium: 2.4,
     large: 3.2,
 };
-function Button(props) {
+export default function Button(props) {
     const startWithChildren = props.iconPosition === "end";
     const centerLoading = !props.icon ||
         (props.loadingVariant && props.loadingPosition === "center");
@@ -24,5 +24,4 @@ function Button(props) {
                 : iconSizeMaps.medium }, props.icon)) : null,
         !startWithChildren ? props.children : null));
 }
-export default Button;
 //# sourceMappingURL=button.js.map

package/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AA2BzC,MAAM,YAAY,GAAgB;IAC9B,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;CACb,CAAC;AAEF,SAAS,MAAM,CAAC,KAAkB;IAC9B,MAAM,iBAAiB,GAAG,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC;IACvD,MAAM,aAAa,GACf,CAAC,KAAK,CAAC,IAAI;QACX,CAAC,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,eAAe,KAAK,QAAQ,CAAC,CAAC;IAEjE,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,MAAM,EACb,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EACnD,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAC1C,KAAK,CAAC,cAAc,IAAI,aAAa;QACjC,CAAC,CAAC,MAAM,CAAC,qBAAqB;QAC9B,CAAC,CAAC,EAAE,EACR,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAC/C,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAC9D,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACtD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB;QACzC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;QACzC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CACpB,6BACI,SAAS,EAAE,cAAc,CACrB,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAC1C,MAAM,CAAC,iBAAiB,CAC3B;YAED,oBAAC,OAAO,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,cAAc,GAAI,CAC1D,CACT,CAAC,CAAC,CAAC,IAAI;QACP,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,oBAAC,OAAO,IACJ,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,IAAI,EACA,KAAK,CAAC,IAAI;gBACN,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC;gBAC1B,CAAC,CAAC,YAAY,CAAC,MAAM,IAG5B,KAAK,CAAC,IAAI,CACL,CACb,CAAC,CAAC,CAAC,IAAI;QACP,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACtC,CACZ,CAAC;AACN,CAAC;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AA2BzC,MAAM,YAAY,GAAgB;IAC9B,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;CACb,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAkB;IAC7C,MAAM,iBAAiB,GAAG,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC;IACvD,MAAM,aAAa,GACf,CAAC,KAAK,CAAC,IAAI;QACX,CAAC,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,eAAe,KAAK,QAAQ,CAAC,CAAC;IAEjE,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,MAAM,EACb,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EACnD,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAC1C,KAAK,CAAC,cAAc,IAAI,aAAa;QACjC,CAAC,CAAC,MAAM,CAAC,qBAAqB;QAC9B,CAAC,CAAC,EAAE,EACR,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAC/C,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAC9D,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACtD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB;QACzC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;QACzC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CACpB,6BACI,SAAS,EAAE,cAAc,CACrB,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAC1C,MAAM,CAAC,iBAAiB,CAC3B;YAED,oBAAC,OAAO,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,cAAc,GAAI,CAC1D,CACT,CAAC,CAAC,CAAC,IAAI;QACP,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,oBAAC,OAAO,IACJ,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,IAAI,EACA,KAAK,CAAC,IAAI;gBACN,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC;gBAC1B,CAAC,CAAC,YAAY,CAAC,MAAM,IAG5B,KAAK,CAAC,IAAI,CACL,CACb,CAAC,CAAC,CAAC,IAAI;QACP,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACtC,CACZ,CAAC;AACN,CAAC"}

package/button/button.tsx

@@ -4,7 +4,7 @@ import SvgIcon from "../svgIcon/svgIcon";
 import Loading from "../loading/loading";
 import styles from "./button.module.css";
 
-interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     size?: "small" | "medium" | "large";
     variant?:
         | "text"
@@ -35,7 +35,7 @@ const iconSizeMaps: iconSizeMap = {
     large: 3.2,
 };
 
-function Button(props: ButtonProps) {
+export default function Button(props: ButtonProps) {
     const startWithChildren = props.iconPosition === "end";
     const centerLoading =
         !props.icon ||
@@ -83,5 +83,3 @@ function Button(props: ButtonProps) {
         </button>
     );
 }
-
-export default Button;

package/card/card.d.ts

@@ -1,3 +1,2 @@
 import React from "react";
-declare function Card(props: React.HTMLAttributes<HTMLElement>): JSX.Element;
-export default Card;
+export default function Card(props: React.HTMLAttributes<HTMLElement>): JSX.Element;

package/card/card.js

@@ -1,9 +1,8 @@
 import React from "react";
 import { joinClassNames } from "@yakad/lib";
 import styles from "./card.module.css";
-function Card(props) {
+export default function Card(props) {
     const joinedClassNames = joinClassNames(styles.card, props.className);
     return (React.createElement("div", { ...props, className: joinedClassNames }, props.children));
 }
-export default Card;
 //# sourceMappingURL=card.js.map

package/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,SAAS,IAAI,CAAC,KAAwC;IACpD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEvE,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,IAAI,CAAC"}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAwC;IACjE,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEvE,OAAO,CACH,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACtC,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC"}

package/card/card.tsx

@@ -2,14 +2,12 @@ import React from "react";
 import { joinClassNames } from "@yakad/lib";
 import styles from "./card.module.css";
 
-function Card(props: React.HTMLAttributes<HTMLElement>) {
-  const joinedClassNames = joinClassNames(styles.card, props.className!);
+export default function Card(props: React.HTMLAttributes<HTMLElement>) {
+    const joinedClassNames = joinClassNames(styles.card, props.className!);
 
-  return (
-    <div {...props} className={joinedClassNames}>
-      {props.children}
-    </div>
-  );
+    return (
+        <div {...props} className={joinedClassNames}>
+            {props.children}
+        </div>
+    );
 }
-
-export default Card;

package/clickAwayListener/clickAwayListener.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-interface ClickAwayListenerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ClickAwayListenerProps extends React.HTMLAttributes<HTMLDivElement> {
     onClickAway: React.MouseEventHandler<HTMLDivElement>;
 }
-declare function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element;
-export default ClickAwayListener;
+export default function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element;

package/clickAwayListener/clickAwayListener.js

@@ -1,6 +1,6 @@
 "use client";
 import React, { useEffect, useRef } from "react";
-function ClickAwayListener(props) {
+export default function ClickAwayListener(props) {
     const ref = useRef(null);
     useEffect(() => {
         const handleOutSideClick = (event) => {
@@ -14,5 +14,4 @@ function ClickAwayListener(props) {
     }, [props.onClickAway]);
     return React.createElement("div", { ref: ref }, props.children);
 }
-export default ClickAwayListener;
 //# sourceMappingURL=clickAwayListener.js.map

package/clickAwayListener/clickAwayListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"clickAwayListener.js","sourceRoot":"","sources":["clickAwayListener.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAMjD,SAAS,iBAAiB,CAAC,KAA6B;IACpD,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC7C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAE,GAAG,CAAC,OAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBAC7D,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,WAAW,CAAC,KAAY,CAAC,CAAC;aACxD;QACL,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAC;QAE7D,+BAA+B;QAC/B,OAAO,GAAG,EAAE,CACR,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAExB,OAAO,6BAAK,GAAG,EAAE,GAAG,IAAG,KAAK,CAAC,QAAQ,CAAO,CAAC;AACjD,CAAC;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"clickAwayListener.js","sourceRoot":"","sources":["clickAwayListener.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAOjD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAA6B;IACnE,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC7C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAE,GAAG,CAAC,OAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBAC7D,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,WAAW,CAAC,KAAY,CAAC,CAAC;aACxD;QACL,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAC;QAE7D,+BAA+B;QAC/B,OAAO,GAAG,EAAE,CACR,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAExB,OAAO,6BAAK,GAAG,EAAE,GAAG,IAAG,KAAK,CAAC,QAAQ,CAAO,CAAC;AACjD,CAAC"}

package/clickAwayListener/clickAwayListener.tsx

@@ -2,11 +2,12 @@
 
 import React, { useEffect, useRef } from "react";
 
-interface ClickAwayListenerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ClickAwayListenerProps
+    extends React.HTMLAttributes<HTMLDivElement> {
     onClickAway: React.MouseEventHandler<HTMLDivElement>;
 }
 
-function ClickAwayListener(props: ClickAwayListenerProps) {
+export default function ClickAwayListener(props: ClickAwayListenerProps) {
     const ref = useRef(null);
 
     useEffect(() => {
@@ -25,5 +26,3 @@ function ClickAwayListener(props: ClickAwayListenerProps) {
 
     return <div ref={ref}>{props.children}</div>;
 }
-
-export default ClickAwayListener;

package/codeField/codeField.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-interface CodeFieldsProps extends React.HTMLAttributes<HTMLInputElement> {
+export interface CodeFieldsProps extends React.HTMLAttributes<HTMLInputElement> {
     length?: number;
     name?: string;
     type?: string;
-    size?: "small" | "medium" | "large";
+    autoFocus?: boolean;
+    onFilled?: Function;
 }
-declare function CodeField(this: any, props: CodeFieldsProps): JSX.Element;
-export default CodeField;
+export default function CodeField(this: any, props: CodeFieldsProps): JSX.Element;

package/codeField/codeField.js

@@ -1,18 +1,25 @@
 import React from "react";
 import { joinClassNames, joinStyles } from "@yakad/lib";
 import styles from "./codeField.module.css";
-function sliceOverLength(event, length) {
-    const targetInput = event.target;
-    const targetLength = targetInput.value.length;
-    if (targetLength > length)
-        targetInput.value = targetInput.value.slice(0, targetLength - 1);
-    targetInput.value = targetInput.value.replace(/[^0-9]+/, "");
+function onInputHandler(event, inputLength, onFilled) {
+    const targetInputElement = event.target;
+    removeUnNumberChars(targetInputElement);
+    if (inputLength == targetInputElement.value.length)
+        onFilled();
+    sliceOverLength(targetInputElement, inputLength);
 }
-function CodeField(props) {
+function sliceOverLength(inputElement, inputLength) {
+    const targetLength = inputElement.value.length;
+    if (targetLength > inputLength)
+        inputElement.value = inputElement.value.slice(0, inputLength);
+}
+function removeUnNumberChars(inputElement) {
+    inputElement.value = inputElement.value.replace(/[^0-9]+/, "");
+}
+export default function CodeField(props) {
     const length = props.length ? props.length : 6;
-    const joinedClassNames = joinClassNames(styles.input, props.size ? styles[props.size] : styles.medium, props.className);
+    const joinedClassNames = joinClassNames(styles.input, props.className);
     const joinedStyles = joinStyles({ width: "calc(1.5ch * " + props.length + ")" }, props.style);
-    return (React.createElement("input", { name: props.name, type: "number", minLength: length, maxLength: length, className: joinedClassNames, style: joinedStyles, onInput: (event) => sliceOverLength(event, length), autoComplete: "off", pattern: "[0-9]" }));
+    return (React.createElement("input", { name: props.name, type: "number", minLength: length, maxLength: length, className: joinedClassNames, style: joinedStyles, onInput: (event) => onInputHandler(event, length, props.onFilled), autoComplete: "off", pattern: "[0-9]", autoFocus: props.autoFocus }));
 }
-export default CodeField;
 //# sourceMappingURL=codeField.js.map

package/codeField/codeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"codeField.js","sourceRoot":"","sources":["codeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAS5C,SAAS,eAAe,CACpB,KAAwC,EACxC,MAAc;IAEd,MAAM,WAAW,GAAG,KAAK,CAAC,MAA0B,CAAC;IACrD,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC;IAC9C,IAAI,YAAY,GAAG,MAAM;QACrB,WAAW,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,CAAC;IAErE,WAAW,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;AACjE,CAAC;AAED,SAAS,SAAS,CAAY,KAAsB;IAChD,MAAM,MAAM,GAAW,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvD,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAC/C,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,MAAM,YAAY,GAAG,UAAU,CAC3B,EAAE,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,EAC/C,KAAK,CAAC,KAAM,CACf,CAAC;IAEF,OAAO,CACH,+BACI,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAClD,YAAY,EAAC,KAAK,EAClB,OAAO,EAAC,OAAO,GACjB,CACL,CAAC;AACN,CAAC;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"codeField.js","sourceRoot":"","sources":["codeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAW5C,SAAS,cAAc,CACnB,KAAwC,EACxC,WAAmB,EACnB,QAAkB;IAElB,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAA0B,CAAC;IAC5D,mBAAmB,CAAC,kBAAkB,CAAC,CAAC;IACxC,IAAI,WAAW,IAAI,kBAAkB,CAAC,KAAK,CAAC,MAAM;QAAE,QAAQ,EAAE,CAAC;IAC/D,eAAe,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;AACrD,CAAC;AACD,SAAS,eAAe,CACpB,YAA8B,EAC9B,WAAmB;IAEnB,MAAM,YAAY,GAAG,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC;IAC/C,IAAI,YAAY,GAAG,WAAW;QAC1B,YAAY,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;AACtE,CAAC;AACD,SAAS,mBAAmB,CAAC,YAA8B;IACvD,YAAY,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;AACnE,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAY,KAAsB;IAC/D,MAAM,MAAM,GAAW,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAExE,MAAM,YAAY,GAAG,UAAU,CAC3B,EAAE,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,EAC/C,KAAK,CAAC,KAAM,CACf,CAAC;IAEF,OAAO,CACH,+BACI,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,EACjE,YAAY,EAAC,KAAK,EAClB,OAAO,EAAC,OAAO,EACf,SAAS,EAAE,KAAK,CAAC,SAAS,GAC5B,CACL,CAAC;AACN,CAAC"}

package/codeField/codeField.module.css

@@ -15,6 +15,7 @@
     color: transparent;
     text-shadow: 0 0 0 rgb(var(--secondaryColor, 98 91 113));
     letter-spacing: 0.5ch;
+    font-size: 4rem;
 }
 .input:focus {
     outline: none;
@@ -24,12 +25,3 @@ input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
-.small {
-    font: 5ch consolas, monospace;
-}
-.medium {
-    font: 7ch consolas, monospace;
-}
-.large {
-    font: 11ch consolas, monospace;
-}

package/codeField/codeField.tsx

@@ -2,33 +2,41 @@ import React from "react";
 import { joinClassNames, joinStyles } from "@yakad/lib";
 import styles from "./codeField.module.css";
 
-interface CodeFieldsProps extends React.HTMLAttributes<HTMLInputElement> {
+export interface CodeFieldsProps
+    extends React.HTMLAttributes<HTMLInputElement> {
     length?: number;
     name?: string;
     type?: string;
-    size?: "small" | "medium" | "large";
+    autoFocus?: boolean;
+    onFilled?: Function;
 }
 
-function sliceOverLength(
+function onInputHandler(
     event: React.FormEvent<HTMLInputElement>,
-    length: number
-) {
-    const targetInput = event.target as HTMLInputElement;
-    const targetLength = targetInput.value.length;
-    if (targetLength > length)
-        targetInput.value = targetInput.value.slice(0, targetLength - 1);
-
-    targetInput.value = targetInput.value.replace(/[^0-9]+/, "");
+    inputLength: number,
+    onFilled: Function
+): void {
+    const targetInputElement = event.target as HTMLInputElement;
+    removeUnNumberChars(targetInputElement);
+    if (inputLength == targetInputElement.value.length) onFilled();
+    sliceOverLength(targetInputElement, inputLength);
+}
+function sliceOverLength(
+    inputElement: HTMLInputElement,
+    inputLength: number
+): void {
+    const targetLength = inputElement.value.length;
+    if (targetLength > inputLength)
+        inputElement.value = inputElement.value.slice(0, inputLength);
+}
+function removeUnNumberChars(inputElement: HTMLInputElement): void {
+    inputElement.value = inputElement.value.replace(/[^0-9]+/, "");
 }
 
-function CodeField(this: any, props: CodeFieldsProps) {
+export default function CodeField(this: any, props: CodeFieldsProps) {
     const length: number = props.length ? props.length : 6;
 
-    const joinedClassNames = joinClassNames(
-        styles.input,
-        props.size ? styles[props.size] : styles.medium,
-        props.className!
-    );
+    const joinedClassNames = joinClassNames(styles.input, props.className!);
 
     const joinedStyles = joinStyles(
         { width: "calc(1.5ch * " + props.length + ")" },
@@ -43,11 +51,10 @@ function CodeField(this: any, props: CodeFieldsProps) {
             maxLength={length}
             className={joinedClassNames}
             style={joinedStyles}
-            onInput={(event) => sliceOverLength(event, length)}
+            onInput={(event) => onInputHandler(event, length, props.onFilled)}
             autoComplete="off"
             pattern="[0-9]"
+            autoFocus={props.autoFocus}
         />
     );
 }
-
-export default CodeField;

package/container/container.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 declare type ScreenSize = "xs" | "sm" | "md" | "lg" | "xl";
-interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     maxWidth?: ScreenSize;
     background?: "dotted";
 }
-declare function Container(props: ContainerProps): JSX.Element;
-export default Container;
+export default function Container(props: ContainerProps): JSX.Element;
+export {};

package/container/container.js

@@ -1,9 +1,8 @@
 import React from "react";
 import { joinClassNames } from "@yakad/lib";
 import styles from "./container.module.css";
-function Container(props) {
+export default function Container(props) {
     const joinedClassNames = joinClassNames(props.maxWidth ? styles[props.maxWidth] : "", props.background ? styles[props.background] : "", styles.container, props.className);
     return (React.createElement("div", { ...props, className: joinedClassNames }, props.children));
 }
-export default Container;
 //# sourceMappingURL=container.js.map

package/container/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAS5C,SAAS,SAAS,CAAC,KAAqB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAC5C,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EAChD,MAAM,CAAC,SAAS,EAChB,KAAK,CAAC,SAAU,CACjB,CAAC;IAEF,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAS5C,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAqB;IACnD,MAAM,gBAAgB,GAAG,cAAc,CACnC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAC5C,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EAChD,MAAM,CAAC,SAAS,EAChB,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACtC,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC"}

package/container/container.tsx

@@ -4,24 +4,22 @@ import styles from "./container.module.css";
 
 type ScreenSize = "xs" | "sm" | "md" | "lg" | "xl";
 
-interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  maxWidth?: ScreenSize;
-  background?: "dotted";
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    maxWidth?: ScreenSize;
+    background?: "dotted";
 }
 
-function Container(props: ContainerProps) {
-  const joinedClassNames = joinClassNames(
-    props.maxWidth ? styles[props.maxWidth] : "",
-    props.background ? styles[props.background] : "",
-    styles.container,
-    props.className!
-  );
+export default function Container(props: ContainerProps) {
+    const joinedClassNames = joinClassNames(
+        props.maxWidth ? styles[props.maxWidth] : "",
+        props.background ? styles[props.background] : "",
+        styles.container,
+        props.className!
+    );
 
-  return (
-    <div {...props} className={joinedClassNames}>
-      {props.children}
-    </div>
-  );
+    return (
+        <div {...props} className={joinedClassNames}>
+            {props.children}
+        </div>
+    );
 }
-
-export default Container;

package/footer/footer.d.ts

@@ -1,3 +1,2 @@
 import React from "react";
-declare function Footer(props: React.HTMLAttributes<HTMLElement>): JSX.Element;
-export default Footer;
+export default function Footer(props: React.HTMLAttributes<HTMLElement>): JSX.Element;

package/footer/footer.js

@@ -1,9 +1,8 @@
 import React from "react";
 import { joinClassNames } from "@yakad/lib";
 import styles from "./footer.module.css";
-function Footer(props) {
+export default function Footer(props) {
     const joinedClassNames = joinClassNames(styles.footer, props.className);
     return (React.createElement("footer", { ...props, className: joinedClassNames }, props.children));
 }
-export default Footer;
 //# sourceMappingURL=footer.js.map

package/footer/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","sourceRoot":"","sources":["footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,SAAS,MAAM,CAAC,KAAwC;IACtD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEzE,OAAO,CACL,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB,IAC3C,KAAK,CAAC,QAAQ,CACR,CACV,CAAC;AACJ,CAAC;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"footer.js","sourceRoot":"","sources":["footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAwC;IACnE,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEzE,OAAO,CACH,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACzC,KAAK,CAAC,QAAQ,CACV,CACZ,CAAC;AACN,CAAC"}

package/footer/footer.tsx

@@ -2,14 +2,12 @@ import React from "react";
 import { joinClassNames } from "@yakad/lib";
 import styles from "./footer.module.css";
 
-function Footer(props: React.HTMLAttributes<HTMLElement>) {
-  const joinedClassNames = joinClassNames(styles.footer, props.className!);
+export default function Footer(props: React.HTMLAttributes<HTMLElement>) {
+    const joinedClassNames = joinClassNames(styles.footer, props.className!);
 
-  return (
-    <footer {...props} className={joinedClassNames}>
-      {props.children}
-    </footer>
-  );
+    return (
+        <footer {...props} className={joinedClassNames}>
+            {props.children}
+        </footer>
+    );
 }
-
-export default Footer;

package/form/form.d.ts

@@ -1,3 +1,2 @@
 import React from "react";
-declare function Form(props: React.HTMLAttributes<HTMLFormElement>): JSX.Element;
-export default Form;
+export default function Form(props: React.HTMLAttributes<HTMLFormElement>): JSX.Element;

package/form/form.js

@@ -1,12 +1,11 @@
 import React from "react";
 import { joinClassNames } from "@yakad/lib";
 import styles from "./form.module.css";
-function Form(props) {
+export default function Form(props) {
     const joinedClassNames = joinClassNames(styles.form, props.className);
     return (React.createElement("form", { ...props, className: joinedClassNames, onSubmit: (e) => {
             e.preventDefault();
             props.onSubmit(null);
         } }, props.children));
 }
-export default Form;
 //# sourceMappingURL=form.js.map

package/form/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sourceRoot":"","sources":["form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,SAAS,IAAI,CAAC,KAA4C;IACxD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEvE,OAAO,CACL,iCACM,KAAK,EACT,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,KAAK,CAAC,QAAS,CAAC,IAAW,CAAC,CAAC;QAC/B,CAAC,IAEA,KAAK,CAAC,QAAQ,CACV,CACR,CAAC;AACJ,CAAC;AAED,eAAe,IAAI,CAAC"}
+{"version":3,"file":"form.js","sourceRoot":"","sources":["form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAA4C;IACrE,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEvE,OAAO,CACH,iCACQ,KAAK,EACT,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACZ,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,KAAK,CAAC,QAAS,CAAC,IAAW,CAAC,CAAC;QACjC,CAAC,IAEA,KAAK,CAAC,QAAQ,CACZ,CACV,CAAC;AACN,CAAC"}

package/form/form.tsx

@@ -2,22 +2,20 @@ import React from "react";
 import { joinClassNames, joinStyles } from "@yakad/lib";
 import styles from "./form.module.css";
 
-function Form(props: React.HTMLAttributes<HTMLFormElement>) {
-  const joinedClassNames = joinClassNames(styles.form, props.className!);
+export default function Form(props: React.HTMLAttributes<HTMLFormElement>) {
+    const joinedClassNames = joinClassNames(styles.form, props.className!);
 
-  return (
-    <form
-      {...props}
-      className={joinedClassNames}
-      onSubmit={(e) => {
-        e.preventDefault();
+    return (
+        <form
+            {...props}
+            className={joinedClassNames}
+            onSubmit={(e) => {
+                e.preventDefault();
 
-        props.onSubmit!(null as any);
-      }}
-    >
-      {props.children}
-    </form>
-  );
+                props.onSubmit!(null as any);
+            }}
+        >
+            {props.children}
+        </form>
+    );
 }
-
-export default Form;

package/gridContainer/gridContainer.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
-interface GridContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface GridContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     rowGap?: number;
     columnGap?: number;
 }
-declare function GridContainer(props: GridContainerProps): JSX.Element;
-export default GridContainer;
+export default function GridContainer(props: GridContainerProps): JSX.Element;

package/gridContainer/gridContainer.js

@@ -2,10 +2,9 @@ import React from "react";
 import { joinClassNames, joinStyles } from "@yakad/lib";
 import styles from "./gridContainer.module.css";
 // Custom Button Element
-function GridContainer(props) {
+export default function GridContainer(props) {
     const joinedClassNames = joinClassNames(styles.gridcontainer, props.className);
     const joinedStyles = joinStyles({ columnGap: props.columnGap ? props.columnGap + "rem" : "1.5rem" }, { rowGap: props.rowGap ? props.rowGap + "rem" : "1.5rem" }, props.style);
     return (React.createElement("div", { ...props, className: joinedClassNames, style: joinedStyles }, props.children));
 }
-export default GridContainer;
 //# sourceMappingURL=gridContainer.js.map

package/gridContainer/gridContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"gridContainer.js","sourceRoot":"","sources":["gridContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAOhD,wBAAwB;AACxB,SAAS,aAAa,CAAC,KAAyB;IAC5C,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,aAAa,EACpB,KAAK,CAAC,SAAU,CACnB,CAAC;IACF,MAAM,YAAY,GAAG,UAAU,CAC3B,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,EACnE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,EAC1D,KAAK,CAAC,KAAM,CACf,CAAC;IACF,OAAO,CACH,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,IAC3D,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"gridContainer.js","sourceRoot":"","sources":["gridContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAQhD,wBAAwB;AACxB,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAyB;IAC3D,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,aAAa,EACpB,KAAK,CAAC,SAAU,CACnB,CAAC;IACF,MAAM,YAAY,GAAG,UAAU,CAC3B,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,EACnE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,EAC1D,KAAK,CAAC,KAAM,CACf,CAAC;IACF,OAAO,CACH,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,IAC3D,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC"}

package/gridContainer/gridContainer.tsx

@@ -2,13 +2,14 @@ import React from "react";
 import { joinClassNames, joinStyles } from "@yakad/lib";
 import styles from "./gridContainer.module.css";
 
-interface GridContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface GridContainerProps
+    extends React.HTMLAttributes<HTMLDivElement> {
     rowGap?: number;
     columnGap?: number;
 }
 
 // Custom Button Element
-function GridContainer(props: GridContainerProps) {
+export default function GridContainer(props: GridContainerProps) {
     const joinedClassNames = joinClassNames(
         styles.gridcontainer,
         props.className!
@@ -24,5 +25,3 @@ function GridContainer(props: GridContainerProps) {
         </div>
     );
 }
-
-export default GridContainer;

package/gridItem/gridItem.d.ts

@@ -1,10 +1,9 @@
 import React from "react";
-interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
     xs?: number;
     sm?: number;
     md?: number;
     lg?: number;
     xl?: number;
 }
-declare function GridItem(props: GridItemProps): JSX.Element;
-export default GridItem;
+export default function GridItem(props: GridItemProps): JSX.Element;