@bodynarf/react.components 1.9.0 → 1.10.0

package/components/multiselect/components/withoutLabel/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { MultiselectProps } from "../../types";
+/** Props type of `MultiselectWithoutLabel` */
+declare type MultiselectWithoutLabelProps = MultiselectProps & {
+    /** Manual component identifier */
+    id?: string;
+};
+declare const MultiselectWithoutLabel: FC<MultiselectWithoutLabelProps>;
+export default MultiselectWithoutLabel;
+//# sourceMappingURL=index.d.ts.map

package/components/multiselect/components/withoutLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiselect/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAUrE,OAAO,EAAE,gBAAgB,EAA2C,MAAM,aAAa,CAAC;AAIxF,8CAA8C;AAC9C,aAAK,4BAA4B,GAAG,gBAAgB,GAAG;IACnD,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAiJ7D,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/components/multiselect/components/withoutLabel/index.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useId, useState } from "react";
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../utils";
+import { useComponentOutsideClick } from "../../../../hooks";
+import Search from "../../../search";
+import InternalHint from "../../../primitives/internal/hint";
+import MultiselectItem from "../item";
+import MultiselectLabel from "../label/component";
+const MultiselectWithoutLabel = ({ items, onChange, onClear, hideOnOuterClick, listMaxHeight, placeholder, noDataText = "No items found", selectionCaption = "{0} items selected", noDataByQuery = "No items found by specified search", compact = false, disabled = false, searchable = true, validationState, className, title, data, hint, id: propsId, checkboxConfig, }) => {
+    const generatedId = useId();
+    const id = propsId ?? generatedId;
+    const [isListVisible, setListVisible] = useState(false);
+    const [selectedItems, setSelectedItems] = useState(items
+        .filter(({ selected }) => selected)
+        .map(({ id }) => id)
+        ??
+            []);
+    const onItemClick = useCallback((item) => {
+        const isItemSelected = selectedItems.includes(item.id);
+        setSelectedItems(x => isItemSelected
+            ? x.filter(x => x !== item.id)
+            : [...x, item.id]);
+        item.selected = isItemSelected;
+        onChange(item, isItemSelected);
+    }, [onChange, selectedItems]);
+    const onItemSelectChange = useCallback((item, selected) => {
+        setSelectedItems(x => selected
+            ? [...x, item.id]
+            : x.filter(x => x !== item.id));
+        item.selected = selected;
+        onChange(item, selected);
+    }, [onChange]);
+    const onLabelClick = useCallback((event) => {
+        if (disabled) {
+            return;
+        }
+        const target = event.target;
+        if (isNullOrUndefined(target)) {
+            return;
+        }
+        if (target.classList.contains("bi-plus-lg")) {
+            setSelectedItems([]);
+            onClear?.();
+        }
+        else {
+            setListVisible(state => !state);
+        }
+    }, [onClear, setListVisible, disabled]);
+    useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
+    const classNames = getClassName([
+        "bbr-multiselect",
+        "bbr-dropdown",
+        className,
+        disabled ? "bbr-dropdown--disabled" : "",
+        compact ? "bbr-dropdown--compact" : "",
+        isListVisible ? "is-active" : "",
+        isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
+        "dropdown",
+    ]);
+    const labelComponentClassName = getStyleClassName(undefined, validationState);
+    const selectedItemsCount = selectedItems.length;
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    const deselectable = !isNullOrUndefined(onClear);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames, "data-dropdown-id": id, title: title, ...dataAttributes, children: [_jsx(MultiselectLabel, { caption: placeholder, onClick: onLabelClick, deselectable: deselectable, className: labelComponentClassName, selectionCaption: selectionCaption, selectedItemsCount: selectedItemsCount }), _jsx("div", { className: "dropdown-menu", children: _jsx(DropdownContent, { id: id, items: items, searchable: searchable, noDataText: noDataText, onItemClick: onItemClick, noDataByQuery: noDataByQuery, selectedItems: selectedItems, listMaxHeight: listMaxHeight, checkboxConfig: checkboxConfig, onItemSelectChange: onItemSelectChange }) })] }, id), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+};
+export default MultiselectWithoutLabel;
+const DropdownContent = ({ noDataText, id, listMaxHeight, noDataByQuery, items, selectedItems, onItemClick, onItemSelectChange, searchable = true, checkboxConfig, }) => {
+    const [search, setSearch] = useState("");
+    if (items.length === 0) {
+        return (_jsx("div", { className: "dropdown-content", children: _jsx("span", { className: "dropdown-item", children: noDataText }) }));
+    }
+    const filteredItems = isNullOrEmpty(search)
+        ? items
+        : items.filter(({ displayValue }) => displayValue.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
+    if (filteredItems.length === 0) {
+        return (_jsxs("div", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: [_jsx("div", { className: "mx-2 my-1", children: _jsx(Search, { caption: "search", onSearch: setSearch, searchType: "byTyping", size: ElementSize.Small }) }), _jsx("span", { className: "dropdown-item", children: noDataByQuery })] }));
+    }
+    return (_jsxs("div", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: [searchable &&
+                _jsx("div", { className: "mx-2 my-1", children: _jsx(Search, { caption: "search", onSearch: setSearch, searchType: "byTyping", size: ElementSize.Small }) }), _jsx("ul", { children: filteredItems.map(item => _jsx(MultiselectItem, { item: item, rootId: id, onItemClick: onItemClick, onChange: onItemSelectChange, checkboxConfig: checkboxConfig, selected: selectedItems.includes(item.id) }, item.id)) })] }));
+};

package/components/multiselect/index.d.ts

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

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

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

package/components/multiselect/index.js

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

package/components/multiselect/types.d.ts

@@ -0,0 +1,41 @@
+import { DropdownProps, SelectableItem } from "../dropdown";
+import { CheckBoxProps } from "../primitives";
+/** Single multiselect item that user can select */
+export declare type MultiselectItem = SelectableItem & {
+    /** Is item selected */
+    selected: boolean;
+};
+/** Props type of `Multiselect` */
+export declare type MultiselectProps = Omit<DropdownProps, "items" | "onSelect" | "value" | "deselectable" | "searchable"> & {
+    /** Items which can be selected */
+    items: Array<MultiselectItem>;
+    /**
+     * Handler of changing select state of item
+     * @description `item.selected` will be set by component
+     * @param item Item that triggered event
+     * @param selected New select flag value
+     */
+    onChange: (item: MultiselectItem, selected: boolean) => void;
+    /**
+     * Handler of clear selection event.
+     * When no handler specified - clear selection cannot be performed
+     */
+    onClear?: () => void;
+    /**
+     * Caption for label when some items are selected
+     * @example selectionCaption: "selected: {0}"
+     * @description Supports only 1 string parameter for number of selected items. Default is `{0} items selected`
+     */
+    selectionCaption?: string;
+    /**
+     * Text which would be displayed when search query applied and no items found
+     */
+    noDataByQuery?: string;
+    /**
+     * Is search through items enabled. Default is `true`
+     */
+    searchable?: boolean;
+    /** Customization for checkbox */
+    checkboxConfig?: Pick<CheckBoxProps, "block" | "className" | "data" | "fixBackgroundColor" | "hasBackgroundColor" | "style" | "withoutBorder" | "rounded">;
+};
+//# sourceMappingURL=types.d.ts.map

package/components/multiselect/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/multiselect/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,mDAAmD;AACnD,oBAAY,eAAe,GAAG,cAAc,GAAG;IAC3C,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,kCAAkC;AAClC,oBAAY,gBAAgB,GAAG,IAAI,CAC/B,aAAa,EACX,OAAO,GAAG,UAAU,GACpB,OAAO,GAAG,cAAc,GACxB,YAAY,CACjB,GAAG;IACA,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;IAE9B;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,iCAAiC;IACjC,cAAc,CAAC,EAAE,IAAI,CACjB,aAAa,EACX,OAAO,GAAG,WAAW,GAAG,MAAM,GAC9B,oBAAoB,GAAG,oBAAoB,GAC3C,OAAO,GAAG,eAAe,GACzB,SAAS,CACd,CAAC;CACL,CAAC"}

package/components/multiselect/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/paginator/component/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AAE5D;;;EAGE;AACF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EAAE,YAAY,EAAE,WAAe,EACpC,QAA+B,EAC/B,IAAI,EACJ,OAAe,EAAE,eAAuB,EACxC,cAAc,EAEd,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAqH9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/paginator/component/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC;;;EAGE;AACF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EAAE,YAAY,EAAE,WAAe,EACpC,QAA+B,EAAE,IAAyB,EAC1D,OAAe,EAAE,eAAuB,EACxC,cAAkB,EAElB,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAqH9B"}

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

@@ -2,6 +2,6 @@
 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,7 +1,7 @@
 /// <reference types="react" />
-import "../../../../common.scss";
+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,12 +1,8 @@
 /// <reference types="react" />
-import { HintConfiguration, ValidationState } from "../../../../types";
+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"}