@bodynarf/react.components 1.9.1 → 1.10.0

package/components/paginator/component/index.js

@@ -2,13 +2,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useMemo } from "react";
 import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
 import { mapDataAttributes } from "../../../utils";
-import { ElementPosition } from "../../../types";
-import { generatePageNumbers } from "../..";
+import { ElementPosition, ElementSize } from "../../../types";
 /**
  * Paginator component.
  * Used for visualization of paging configuration
 */
-export default function Paginator({ count, onPageChange, currentPage = 0, position = ElementPosition.Left, size, rounded = false, showNextButtons = false, nearPagesCount, className, title, data, }) {
+export default function Paginator({ count, onPageChange, currentPage = 0, position = ElementPosition.Left, size = ElementSize.Normal, rounded = false, showNextButtons = false, nearPagesCount = 3, className, title, data, }) {
     const pageChange = useCallback((event) => {
         const target = event.target;
         const pageRaw = target.dataset["page"];
@@ -32,12 +31,12 @@ export default function Paginator({ count, onPageChange, currentPage = 0, positi
         className,
         paginationPositionToClassMap.get(position),
         rounded ? "is-rounded" : "",
-        isNullOrEmpty(size) ? "" : `is-${size}`,
+        size === ElementSize.Normal ? "" : `is-${size}`,
     ]);
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs("nav", { className: classNames, role: "navigation", "aria-label": "pagination", title: title, ...dataAttributes, children: [showNextButtons &&
+    return (_jsxs("nav", { role: "navigation", className: classNames, "aria-label": "pagination", title: title, ...dataAttributes, children: [showNextButtons &&
                 _jsxs(_Fragment, { children: [_jsx("a", { className: `pagination-previous${canGoBack ? "" : " is-disabled"}`, "data-page": currentPage - 1, onClick: pageChange, children: "Previous" }), _jsx("a", { className: `pagination-next${canGoForward ? "" : " is-disabled"}`, "data-page": currentPage + 1, onClick: pageChange, children: "Next page" })] }), _jsxs("ul", { className: "pagination-list", children: [currentPage !== 1 && !pageNumbers.includes(1) &&
                         _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": "Goto page 1", "data-page": 1, onClick: pageChange, children: "1" }) }), _jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) })] }), pageNumbers.map(x => _jsx("li", { children: _jsx("a", { className: `pagination-link${currentPage === x ? " is-current" : ""}`, "aria-label": `Goto page ${x}`, "data-page": x, onClick: pageChange, children: x }) }, x)), currentPage != count && !pageNumbers.includes(count) &&
                         _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) }), _jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": `Goto page ${count}`, "data-page": count, onClick: pageChange, children: count }) })] })] })] }));
@@ -50,3 +49,21 @@ const paginationPositionToClassMap = new Map([
     [ElementPosition.Center, "is-centered"],
     [ElementPosition.Right, "is-right"]
 ]);
+/**
+ * Get nearest numbers from each side (left & right)
+ * @param page Number of current page
+ * @param count Amount of pages
+ * @param size Amount of pages from left & right to current page
+ * @throws Current page is greater than pages amount
+ * @returns Array of nearest numbers to current page
+ */
+const generatePageNumbers = (page, count, size) => {
+    if (page < 0 || count <= 0 || page > count) {
+        return [];
+    }
+    return [
+        ...new Array(size).fill(page).map((_, i) => page - i - 1).filter(x => x > 0 && x < page).reverse(),
+        page,
+        ...new Array(size).fill(page).map((_, i) => page + i + 1).filter(x => x > 0 && x > page && x <= count)
+    ];
+};

package/components/paginator/index.d.ts

@@ -1,4 +1,3 @@
 export { default } from "./component";
 export * from "./types";
-export * from "./utils";
 //# sourceMappingURL=index.d.ts.map

package/components/paginator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/paginator/index.js

@@ -1,3 +1,2 @@
 export { default } from "./component";
 export * from "./types";
-export * from "./utils";

package/components/primitives/checkbox/component/index.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import "./style.scss";
 import { CheckBoxProps } from "../..";
 /** Boolean input component */
-declare const CheckBox: ({ label, onValueChange, defaultValue, name, disabled, size, style, rounded, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, className, title, data, }: CheckBoxProps) => JSX.Element;
+declare const CheckBox: ({ onValueChange, defaultValue, label, name, size, style, disabled, rounded, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, className, title, data, }: CheckBoxProps) => JSX.Element;
 export default CheckBox;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/checkbox/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/checkbox/component/index.tsx"],"names":[],"mappings":"AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,8BAA8B;AAC9B,QAAA,MAAM,QAAQ,qLASX,aAAa,KAAG,WA8ElB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/checkbox/component/index.tsx"],"names":[],"mappings":";AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,8BAA8B;AAC9B,QAAA,MAAM,QAAQ,qLAWX,aAAa,KAAG,WAoFlB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/primitives/checkbox/component/index.js

@@ -6,16 +6,15 @@ import { mapDataAttributes } from "../../../../utils";
 import ComponentWithLabel from "../../internal/componentWithLabel";
 import "./style.scss";
 /** Boolean input component */
-const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, size, style, rounded = false, block = false, withoutBorder = false, hasBackgroundColor = false, fixBackgroundColor = false, isFormLabel = false, className, title, data, }) => {
+const CheckBox = ({ onValueChange, defaultValue, label, name = generateGuid(), size = ElementSize.Normal, style, disabled = false, rounded = false, block = false, withoutBorder = false, hasBackgroundColor = false, fixBackgroundColor = false, isFormLabel = false, className, title, data, }) => {
     const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
-    const id = name ?? generateGuid();
     const elClassName = getClassName([
         "is-checkradio",
         "m-check-radio",
         className,
         hasBackgroundColor ? "has-background-color" : "",
         fixBackgroundColor && hasBackgroundColor ? "m-has-background-color" : "",
-        isNullOrUndefined(size) ? "" : size === "normal" ? "" : `is-${size}`,
+        size === ElementSize.Normal ? "" : `is-${size}`,
         rounded ? "is-circle" : "",
         isNullOrUndefined(style) ? "" : `is-${style}`,
         block ? "is-block" : "",
@@ -25,11 +24,14 @@ const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, size, st
         ? undefined
         : mapDataAttributes(data);
     if (!isNullOrUndefined(label) && isFormLabel) {
-        return (_jsxs(ComponentWithLabel, { id: id, label: {
+        return (_jsxs(ComponentWithLabel, { id: name, label: {
                 ...label,
                 horizontalContainerClassName: getClassName([label.horizontalContainerClassName, "p-0"]),
-            }, size: ElementSize.Normal, children: [_jsx("input", { type: "checkbox", id: id, name: id, disabled: disabled, onChange: onChecked, className: elClassName, defaultChecked: defaultValue, title: title, ...dataAttributes }), _jsx("label", { htmlFor: id })] }));
+            }, size: ElementSize.Normal, children: [_jsx("input", { type: "checkbox", id: name, name: name, disabled: disabled, onChange: onChecked, className: elClassName, defaultChecked: defaultValue, title: title, ...dataAttributes }), _jsx("label", { className: "is-empty", htmlFor: name })] }));
     }
-    return (_jsxs("div", { className: "bbr-input field", children: [_jsx("input", { type: "checkbox", id: id, name: id, disabled: disabled, onChange: onChecked, className: elClassName, defaultChecked: defaultValue, title: title, ...dataAttributes }), _jsx("label", { htmlFor: id, children: label?.caption })] }));
+    const labelClassName = isNullOrUndefined(label)
+        ? "is-empty"
+        : undefined;
+    return (_jsxs("div", { className: "bbr-field bbr-input field mr-2", children: [_jsx("input", { type: "checkbox", id: name, name: name, disabled: disabled, onChange: onChecked, className: elClassName, defaultChecked: defaultValue, title: title, ...dataAttributes }), _jsx("label", { htmlFor: name, className: labelClassName, children: label?.caption })] }));
 };
 export default CheckBox;

package/components/primitives/checkbox/component/style.scss

@@ -3,8 +3,27 @@
         border-color: #dbdbdb !important;
         background-color: transparent !important;
     }
-    & + label::before,
-    & + label:before {
-        top: 0.125rem;
+
+    &.is-block + label.is-empty {
+        &::before {
+            left: 0.25rem !important;
+            top: 0.25rem !important;
+        }
+
+        &::after {
+            top: 0.45rem;
+            left: 0.7rem;
+        }
+    }
+
+    &:not(.is-block) + label {
+        &::after {
+            top: 0.275rem;
+        }
+    }
+
+    & + label.is-empty {
+        padding-left: 1rem;
+        margin: 0 !important;
     }
 }

package/components/primitives/color/components/picker/index.d.ts

@@ -3,8 +3,6 @@ import { BaseInputElementProps } from "../../../../../types";
 import { ColorPickerPreviewConfig } from "../..";
 /** Props of `ColorPickerControl` */
 export interface ColorPickerControlProps extends Omit<BaseInputElementProps<string>, "onValueChange" | "placeholder" | "rounded" | "readonly" | "loading" | "className"> {
-    /** Preview element configuration */
-    previewConfig?: ColorPickerPreviewConfig;
     /** Current color value */
     value: string;
     /** Control unique identifier */
@@ -13,8 +11,10 @@ export interface ColorPickerControlProps extends Omit<BaseInputElementProps<stri
     elementClassName: string;
     /** Handler of control value change*/
     onValueChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** Preview element configuration */
+    previewConfig?: ColorPickerPreviewConfig;
 }
 /** Color picker container component */
-declare const ColorPickerControl: ({ elementClassName, disabled, previewConfig, size, defaultValue, onValueChange, value, id, title, data, hint, validationState, }: ColorPickerControlProps) => JSX.Element;
+declare const ColorPickerControl: ({ value, defaultValue, onValueChange, elementClassName, disabled, previewConfig, size, id, title, data, hint, validationState, }: ColorPickerControlProps) => JSX.Element;
 export default ColorPickerControl;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/color/components/picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/picker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAmB,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAIpE,OAAO,EAA4B,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE3E,oCAAoC;AACpC,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACjD,qBAAqB,CAAC,MAAM,CAAC,EAC3B,eAAe,GAAG,aAAa,GAC/B,SAAS,GAAG,UAAU,GACtB,SAAS,GAAG,WAAW,CAC5B;IACG,oCAAoC;IACpC,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IAEX,6BAA6B;IAC7B,gBAAgB,EAAE,MAAM,CAAC;IAEzB,qCAAqC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACjE;AAED,uCAAuC;AACvC,QAAA,MAAM,kBAAkB,qIAOrB,uBAAuB,KAAG,WA0C5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/picker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAmB,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAIpE,OAAO,EAA4B,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE3E,oCAAoC;AACpC,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACjD,qBAAqB,CAAC,MAAM,CAAC,EAC3B,eAAe,GAAG,aAAa,GAC/B,SAAS,GAAG,UAAU,GACtB,SAAS,GAAG,WAAW,CAC5B;IACG,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IAEX,6BAA6B;IAC7B,gBAAgB,EAAE,MAAM,CAAC;IAEzB,qCAAqC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE9D,oCAAoC;IACpC,aAAa,CAAC,EAAE,wBAAwB,CAAC;CAC5C;AAED,uCAAuC;AACvC,QAAA,MAAM,kBAAkB,qIAQrB,uBAAuB,KAAG,WA0C5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/color/components/picker/index.js

@@ -4,11 +4,11 @@ import { ElementPosition } from "../../../../../types";
 import { mapDataAttributes } from "../../../../../utils";
 import InternalHint from "../../../internal/hint";
 /** Color picker container component */
-const ColorPickerControl = ({ elementClassName, disabled, previewConfig, size, defaultValue, onValueChange, value, id, title, data, hint, validationState, }) => {
+const ColorPickerControl = ({ value, defaultValue, onValueChange, elementClassName, disabled = false, previewConfig, size, id, title, data, hint, validationState, }) => {
     if (!isNullOrUndefined(previewConfig)) {
-        return (_jsx(PickerWithPreview, { id: id, size: size, value: value, disabled: disabled, elementClassName: elementClassName, defaultValue: defaultValue, onValueChange: onValueChange, previewConfig: previewConfig, title: title, data: data }));
+        return (_jsx(PickerWithPreview, { id: id, size: size, value: value, disabled: disabled, defaultValue: defaultValue, onValueChange: onValueChange, previewConfig: previewConfig, elementClassName: elementClassName, data: data, title: title }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "control bbr-input", children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, className: elementClassName, onChange: onValueChange, defaultValue: defaultValue, title: title, ...data }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "control bbr-input", children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, className: elementClassName, onChange: onValueChange, defaultValue: defaultValue, ...data, title: title }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default ColorPickerControl;
 /** Picker sub component with preview */
@@ -29,14 +29,14 @@ const PickerWithPreview = ({ elementClassName, disabled, size, defaultValue, onV
         "is-flex-grow-1",
         previewConfig.position === ElementPosition.Left ? "ml-1" : "mr-1",
     ]);
-    if (previewConfig.position === ElementPosition.Left) {
-        return (_jsxs("div", { className: "is-flex is-flex-direction-row is-flex-wrap-nowrap is-justify-content-start", children: [_jsx("button", { className: classNames, style: {
+    if (previewConfig.position === ElementPosition.Right) {
+        return (_jsxs("div", { className: "is-flex is-flex-direction-row is-flex-wrap-nowrap is-justify-content-start", children: [_jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, title: title, ...dataAttributes }) }), _jsx("button", { className: classNames, style: {
                         "--color-picker__background-color": value,
                         "--color-picker__color": color,
-                    }, children: value }), _jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+                    }, children: value }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
     }
-    return (_jsxs("div", { className: "is-flex is-flex-direction-row is-flex-wrap-nowrap is-justify-content-start", children: [_jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, title: title, ...dataAttributes }) }), _jsx("button", { className: classNames, style: {
+    return (_jsxs("div", { className: "is-flex is-flex-direction-row is-flex-wrap-nowrap is-justify-content-start", children: [_jsx("button", { className: classNames, style: {
                     "--color-picker__background-color": value,
                     "--color-picker__color": color,
-                }, children: value }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+                }, children: value }), _jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };

package/components/primitives/color/components/withLabel/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ColorPickerProps } from "../..";
 /** Color picker component with form label */
-declare function ColorPickerWithLabel({ preview, name, defaultValue, validationState, onValueChange, disabled, rounded, size, label, className, title, data, hint, }: ColorPickerProps): JSX.Element;
+declare function ColorPickerWithLabel({ preview, name, defaultValue, onValueChange, validationState, disabled, rounded, size, label, hint, className, title, data, }: ColorPickerProps): JSX.Element;
 export default ColorPickerWithLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/color/components/withLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,6CAA6C;AAC7C,iBAAS,oBAAoB,CAAC,EAC1B,OAAO,EACP,IAAI,EACJ,YAAY,EAAE,eAAe,EAC7B,aAAa,EACb,QAAgB,EAAE,OAAe,EAAE,IAAI,EACvC,KAAK,EAEL,SAAS,EAAE,KAAK,EAAE,IAAI,EACtB,IAAI,GACP,EAAE,gBAAgB,eAmDlB;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,6CAA6C;AAC7C,iBAAS,oBAAoB,CAAC,EAC1B,OAAO,EACP,IAAqB,EACrB,YAAY,EAAE,aAAa,EAC3B,eAAe,EACf,QAAgB,EAAE,OAAe,EAAE,IAAyB,EAC5D,KAAK,EAEL,IAAI,EACJ,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,gBAAgB,eAgDlB;AAED,eAAe,oBAAoB,CAAC"}

package/components/primitives/color/components/withLabel/index.js

@@ -6,7 +6,7 @@ import { getStyleClassName } from "../../../../../utils";
 import ComponentWithLabel from "../../../internal/componentWithLabel";
 import ColorPickerControl from "../picker";
 /** Color picker component with form label */
-function ColorPickerWithLabel({ preview, name, defaultValue, validationState, onValueChange, disabled = false, rounded = false, size, label, className, title, data, hint, }) {
+function ColorPickerWithLabel({ preview, name = generateGuid(), defaultValue, onValueChange, validationState, disabled = false, rounded = false, size = ElementSize.Normal, label, hint, className, title, data, }) {
     const defaultColor = isNullOrUndefined(defaultValue)
         ? whiteHex
         : rgbToHex(defaultValue);
@@ -17,10 +17,9 @@ function ColorPickerWithLabel({ preview, name, defaultValue, validationState, on
         className,
         rounded ? "is-rounded" : "",
         getStyleClassName(undefined, validationState),
-        isNullOrUndefined(size) ? "" : `is-${size}`,
+        size === ElementSize.Normal ? "" : `is-${size}`,
         "input",
     ]);
-    const id = name ?? generateGuid();
-    return (_jsx(ComponentWithLabel, { id: id, label: label, size: size ?? ElementSize.Normal, children: _jsx(ColorPickerControl, { id: id, value: value, disabled: disabled, previewConfig: preview, elementClassName: elClassName, onValueChange: onChange, defaultValue: defaultColor, hint: hint, validationState: validationState, data: data, title: title }) }));
+    return (_jsx(ComponentWithLabel, { id: name, size: size, label: label, children: _jsx(ColorPickerControl, { id: name, value: value, disabled: disabled, previewConfig: preview, onValueChange: onChange, defaultValue: defaultColor, elementClassName: elClassName, hint: hint, validationState: validationState, data: data, title: title }) }));
 }
 export default ColorPickerWithLabel;

package/components/primitives/color/components/withoutLabel/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ColorPickerProps } from "../..";
 /** Color picker component without form label */
-declare function ColorPickerWithoutLabel({ preview, name, defaultValue, validationState, onValueChange, disabled, rounded, size, className, title, data, hint, }: ColorPickerProps): JSX.Element;
+declare function ColorPickerWithoutLabel({ preview, name, defaultValue, onValueChange, validationState, disabled, rounded, size, className, title, data, hint, }: ColorPickerProps): JSX.Element;
 export default ColorPickerWithoutLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/color/components/withoutLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,gDAAgD;AAChD,iBAAS,uBAAuB,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,YAAY,EAAE,eAAe,EAC7B,aAAa,EACb,QAAgB,EAAE,OAAe,EAAE,IAAI,EAEvC,SAAS,EAAE,KAAK,EAAE,IAAI,EACtB,IAAI,GACP,EAAE,gBAAgB,eA6ClB;AAED,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,gDAAgD;AAChD,iBAAS,uBAAuB,CAAC,EAC7B,OAAO,EACP,IAAqB,EACrB,YAAY,EAAE,aAAa,EAC3B,eAAe,EACf,QAAgB,EAAE,OAAe,EAAE,IAAI,EAEvC,SAAS,EAAE,KAAK,EAAE,IAAI,EACtB,IAAI,GACP,EAAE,gBAAgB,eA6ClB;AAED,eAAe,uBAAuB,CAAC"}

package/components/primitives/color/components/withoutLabel/index.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from "react";
 import { generateGuid, getClassName, hexToRgb, isNullOrUndefined, rgbToHex, whiteHex } from "@bodynarf/utils";
 import ColorPickerControl from "../picker";
 /** Color picker component without form label */
-function ColorPickerWithoutLabel({ preview, name, defaultValue, validationState, onValueChange, disabled = false, rounded = false, size, className, title, data, hint, }) {
+function ColorPickerWithoutLabel({ preview, name = generateGuid(), defaultValue, onValueChange, validationState, disabled = false, rounded = false, size, className, title, data, hint, }) {
     const defaultColor = isNullOrUndefined(defaultValue)
         ? whiteHex
         : rgbToHex(defaultValue);
@@ -16,7 +16,6 @@ function ColorPickerWithoutLabel({ preview, name, defaultValue, validationState,
         isNullOrUndefined(size) ? "" : `is-${size}`,
         "input",
     ]);
-    const id = name ?? generateGuid();
-    return (_jsx("div", { className: "bbr-color-picker", children: _jsx(ColorPickerControl, { id: id, value: value, disabled: disabled, previewConfig: preview, onValueChange: onChange, defaultValue: defaultColor, elementClassName: elClassName, data: data, title: title, hint: hint, validationState: validationState }) }));
+    return (_jsx("div", { className: "bbr-color-picker", children: _jsx(ColorPickerControl, { id: name, value: value, disabled: disabled, previewConfig: preview, onValueChange: onChange, defaultValue: defaultColor, elementClassName: elClassName, data: data, title: title, hint: hint, validationState: validationState }) }));
 }
 export default ColorPickerWithoutLabel;

package/components/primitives/date/component/index.d.ts

@@ -1,6 +1,7 @@
-import "../../../../common.scss";
+/// <reference types="react" />
+import "./style.scss";
 import { DateProps } from "../..";
 /** Date input component */
-declare const DatePicker: ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, rounded, loading, style, label, onBlur, className, title, data, hint, }: DateProps) => JSX.Element;
+declare const DatePicker: ({ defaultValue, onValueChange, validationState, name, style, size, readonly, disabled, rounded, loading, label, onBlur, className, title, data, hint, }: DateProps) => JSX.Element;
 export default DatePicker;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/date/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/date/component/index.tsx"],"names":[],"mappings":"AASA,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,2BAA2B;AAC3B,QAAA,MAAM,UAAU,4JASb,SAAS,KAAG,WA8Dd,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/date/component/index.tsx"],"names":[],"mappings":";AASA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,2BAA2B;AAC3B,QAAA,MAAM,UAAU,4JAWb,SAAS,KAAG,WA2Dd,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/primitives/date/component/index.js

@@ -1,21 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined, isStringEmpty } from "@bodynarf/utils";
+import { generateGuid, getClassName, isNullOrUndefined, isStringEmpty } from "@bodynarf/utils";
 import { ElementSize } from "../../../../types";
 import { getStyleClassName, mapDataAttributes } from "../../../../utils";
 import ComponentWithLabel from "../../internal/componentWithLabel";
 import InternalHint from "../../internal/hint";
-import "../../../../common.scss";
+import "./style.scss";
 /** Date input component */
-const DatePicker = ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, rounded = false, loading = false, style, label, onBlur, className, title, data, hint, }) => {
+const DatePicker = ({ defaultValue, onValueChange, validationState, name = generateGuid(), style, size = ElementSize.Normal, readonly = false, disabled = false, rounded = false, loading = false, label, onBlur, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value)
         ? undefined
         : new Date(event.target.value)), [onValueChange]);
-    const id = name ?? generateGuid();
-    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
     const elClassName = getClassName([
         className,
-        elSizeClassName,
+        size === ElementSize.Normal ? "" : `is-${size}`,
         getStyleClassName(style, validationState),
         rounded ? "is-rounded" : "",
         "input",
@@ -28,6 +26,6 @@ const DatePicker = ({ defaultValue, onValueChange, readonly, disabled, validatio
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs(ComponentWithLabel, { id: id, label: label, size: getValueOrDefault(size, ElementSize.Normal), children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", id: id, name: id, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, defaultValue: stringifiedDefValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", id: name, name: name, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, defaultValue: stringifiedDefValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default DatePicker;

package/components/primitives/date/component/style.scss

@@ -0,0 +1,11 @@
+.control.is-loading input[type="date"]::-webkit-calendar-picker-indicator {
+    display: none;
+}
+
+.control input[type="date"] {
+    &::-webkit-calendar-picker-indicator {
+        position: absolute;
+        right: 0.75rem;
+        cursor: pointer;
+    }
+}

package/components/primitives/date/types.d.ts

@@ -1,6 +1,6 @@
 import { BaseInputElementProps, LabelConfiguration } from "../../../types";
 /** Date input component props type */
-export interface DateProps extends Omit<BaseInputElementProps<Date | undefined>, "placeholder"> {
+export interface DateProps extends Omit<BaseInputElementProps<Date | undefined>, "placeholder" | "label"> {
     /** Label configuration */
     label: LabelConfiguration;
     /** Focus out event handler */

package/components/primitives/date/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/date/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEvE,sCAAsC;AACtC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,IAAI,GAAG,SAAS,CAAC,EAAE,aAAa,CAAC;IAC3F,0BAA0B;IAC1B,KAAK,EAAE,kBAAkB,CAAC;IAE1B,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/date/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEvE,sCAAsC;AACtC,MAAM,WAAW,SAAU,SAAQ,IAAI,CACnC,qBAAqB,CAAC,IAAI,GAAG,SAAS,CAAC,EACvC,aAAa,GAAG,OAAO,CAC1B;IACG,0BAA0B;IAC1B,KAAK,EAAE,kBAAkB,CAAC;IAE1B,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}

package/components/primitives/internal/componentWithLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/internal/componentWithLabel/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAE7D,4CAA4C;AAC5C,MAAM,WAAW,uBAAuB;IACpC,0BAA0B;IAC1B,KAAK,EAAE,kBAAkB,CAAC;IAE1B,qBAAqB;IACrB,IAAI,EAAE,WAAW,CAAC;IAElB,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IAEX,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,iDAAiD;AACjD,QAAA,MAAM,kBAAkB,mCAIrB,uBAAuB,KAAG,WAoD5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/internal/componentWithLabel/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAE7D,4CAA4C;AAC5C,MAAM,WAAW,uBAAuB;IACpC,0BAA0B;IAC1B,KAAK,EAAE,kBAAkB,CAAC;IAE1B,qBAAqB;IACrB,IAAI,EAAE,WAAW,CAAC;IAElB,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IAEX,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,iDAAiD;AACjD,QAAA,MAAM,kBAAkB,mCAGrB,uBAAuB,KAAG,WAwD5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/internal/componentWithLabel/index.js

@@ -19,8 +19,8 @@ const ComponentWithLabel = ({ label, id, size, children, }) => {
             "field-body",
             label.horizontalFieldContainerClassName
         ]);
-        return (_jsxs("div", { className: "bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsx("div", { className: "field", children: children }) })] }));
+        return (_jsxs("div", { className: "bbr-field bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsx("div", { className: "field", children: children }) })] }));
     }
-    return (_jsxs("div", { className: "bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), children] }));
+    return (_jsxs("div", { className: "bbr-field bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), children] }));
 };
 export default ComponentWithLabel;

package/components/primitives/internal/hint/index.d.ts

@@ -1,11 +1,8 @@
-import { HintConfiguration, ValidationState } from "../../../../types";
+/// <reference types="react" />
+import { BaseInputElementProps } from "../../../../types";
+import "./style.scss";
 /** Props of `InternalHint` */
-interface HintProps {
-    /** @inheritdoc BaseInputElementProps.validationState */
-    validationState?: ValidationState;
-    /** @inheritdoc BaseInputElementProps.hint */
-    hint?: HintConfiguration;
-}
+declare type HintProps = Pick<BaseInputElementProps<any>, "validationState" | "hint">;
 /** Hint component for internal use (as form input elements hints) */
 declare const InternalHint: ({ validationState, hint, }: HintProps) => JSX.Element;
 export default InternalHint;

package/components/primitives/internal/hint/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/internal/hint/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,iBAAiB,EAAE,eAAe,EAAoB,MAAM,YAAY,CAAC;AAGhH,8BAA8B;AAC9B,UAAU,SAAS;IACf,wDAAwD;IACxD,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC,6CAA6C;IAC7C,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,qEAAqE;AACrE,QAAA,MAAM,YAAY,+BAEf,SAAS,KAAG,WAgDd,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/internal/hint/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,qBAAqB,EAAqE,MAAM,YAAY,CAAC;AAGtH,OAAO,cAAc,CAAC;AAEtB,8BAA8B;AAC9B,aAAK,SAAS,GAAG,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAC,CAAC;AAE9E,qEAAqE;AACrE,QAAA,MAAM,YAAY,+BAEf,SAAS,KAAG,WAgDd,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/primitives/internal/hint/index.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
 import { ElementPosition, ElementSize, ValidationStatus } from "../../../../types";
 import Icon from "../../../icon";
+import "./style.scss";
 /** Hint component for internal use (as form input elements hints) */
 const InternalHint = ({ validationState, hint, }) => {
     if (isNullOrUndefined(validationState) && isNullOrUndefined(hint)) {

package/components/primitives/internal/hint/style.scss

@@ -0,0 +1,4 @@
+p.bbr-hint {
+    white-space: pre-line;
+    display: inline-flex;
+}

package/components/primitives/multiline/component/index.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import "../../../../common.scss";
 import { MultilineProps } from "..";
 /** Multiline textual input component */
 declare const Multiline: (props: MultilineProps) => JSX.Element;

package/components/primitives/multiline/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/multiline/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAIpC,wCAAwC;AACxC,QAAA,MAAM,SAAS,UAAW,cAAc,KAAG,WAK1C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/multiline/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAIpC,wCAAwC;AACxC,QAAA,MAAM,SAAS,UAAW,cAAc,KAAG,WAK1C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/primitives/multiline/component/index.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isNullOrUndefined } from "@bodynarf/utils";
-import "../../../../common.scss";
 import MultilineWithoutLabel from "../components/withoutLabel";
 import MultilineWithLabel from "../components/withLabel";
 /** Multiline textual input component */

package/components/primitives/multiline/components/withLabel/index.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { MultilineProps } from "../..";
 /** Multiline textual input component with describing label */
-declare const MultilineWithLabel: ({ defaultValue, onValueChange, validationState, readonly, disabled, name, size, style, loading, label, placeholder, fixed, rows, onBlur, className, title, data, hint, }: MultilineProps) => JSX.Element;
+declare const MultilineWithLabel: ({ defaultValue, onValueChange, validationState, name, size, style, label, placeholder, readonly, disabled, loading, fixed, rows, onBlur, className, title, data, hint, }: MultilineProps) => JSX.Element;
 export default MultilineWithLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/multiline/components/withLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/withLabel/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,8DAA8D;AAC9D,QAAA,MAAM,kBAAkB,6KAUrB,cAAc,KAAG,WAuDnB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/withLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,8DAA8D;AAC9D,QAAA,MAAM,kBAAkB,6KAYrB,cAAc,KAAG,WAoDnB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/multiline/components/withLabel/index.js

@@ -1,18 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined } from "@bodynarf/utils";
+import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
 import { ElementSize } from "../../../../../types";
 import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import ComponentWithLabel from "../../../internal/componentWithLabel";
 import InternalHint from "../../../internal/hint";
 /** Multiline textual input component with describing label */
-const MultilineWithLabel = ({ defaultValue, onValueChange, validationState, readonly, disabled, name, size, style, loading = false, label, placeholder, fixed = false, rows, onBlur, className, title, data, hint, }) => {
+const MultilineWithLabel = ({ defaultValue, onValueChange, validationState, name = generateGuid(), size = ElementSize.Normal, style, label, placeholder, readonly = false, disabled = false, loading = false, fixed = false, rows, onBlur, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
-    const id = name ?? generateGuid();
-    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
     const elClassName = getClassName([
         className,
-        elSizeClassName,
+        size === ElementSize.Normal ? "" : `is-${size}`,
         getStyleClassName(style, validationState),
         "textarea",
         fixed ? "has-fixed-size" : "",
@@ -24,6 +22,6 @@ const MultilineWithLabel = ({ defaultValue, onValueChange, validationState, read
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs(ComponentWithLabel, { id: id, label: label, size: getValueOrDefault(size, ElementSize.Normal), children: [_jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { id: id, name: id, rows: rows, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { id: name, name: name, rows: rows, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default MultilineWithLabel;

package/components/primitives/multiline/components/withoutLabel/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MultilineProps } from "../..";
 /** Multiline textual input component without describing label*/
 declare const MultilineWithoutLabel: ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, size, style, loading, fixed, rows, className, title, data, hint, }: MultilineProps) => JSX.Element;

package/components/primitives/multiline/components/withoutLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,gEAAgE;AAChE,QAAA,MAAM,qBAAqB,kJASxB,cAAc,KAAG,WAiDnB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,gEAAgE;AAChE,QAAA,MAAM,qBAAqB,kJAUxB,cAAc,KAAG,WAiDnB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/components/primitives/multiline/components/withoutLabel/index.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined } from "@bodynarf/utils";
+import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
 import { ElementSize } from "../../../../../types";
 import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import InternalHint from "../../../internal/hint";
 /** Multiline textual input component without describing label*/
-const MultilineWithoutLabel = ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, size, style, loading = false, fixed = false, rows, className, title, data, hint, }) => {
+const MultilineWithoutLabel = ({ onValueChange, defaultValue, validationState, name = generateGuid(), placeholder, onBlur, size = ElementSize.Normal, style, loading = false, fixed = false, rows, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
-    const id = name ?? generateGuid();
     const elClassName = getClassName([
         className,
-        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
+        size === ElementSize.Normal ? "" : `is-${size}`,
         getStyleClassName(style, validationState),
         "textarea",
         fixed ? "has-fixed-size" : "",
@@ -23,6 +22,6 @@ const MultilineWithoutLabel = ({ onValueChange, defaultValue, validationState, n
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { id: id, name: id, rows: rows, onBlur: onBlur, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    return (_jsxs("div", { className: "bbr-field field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { id: name, name: name, rows: rows, onBlur: onBlur, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default MultilineWithoutLabel;

package/components/primitives/number/components/withLabel/index.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { NumberProps } from "../..";
 /** Number component with label */
-declare const NumberWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded, loading, label, placeholder, onBlur, step, className, title, data, hint, }: NumberProps) => JSX.Element;
+declare const NumberWithLabel: ({ onValueChange, defaultValue, validationState, name, label, placeholder, size, style, rounded, loading, readonly, disabled, onBlur, step, className, title, data, hint, }: NumberProps) => JSX.Element;
 export default NumberWithLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/number/components/withLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,kCAAkC;AAClC,QAAA,MAAM,eAAe,+KAUlB,WAAW,KAAG,WA0DhB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,kCAAkC;AAClC,QAAA,MAAM,eAAe,+KAWlB,WAAW,KAAG,WAuDhB,CAAC;AAEF,eAAe,eAAe,CAAC"}