@bodynarf/react.components 1.9.0 → 1.10.0

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,6 +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.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,6 +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"}

package/components/primitives/number/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, 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";
 /** Number component with label */
-const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded = false, loading = false, label, placeholder, onBlur, step = 1, className, title, data, hint, }) => {
+const NumberWithLabel = ({ onValueChange, defaultValue, validationState, name = generateGuid(), label, placeholder, size = ElementSize.Normal, style, rounded = false, loading = false, readonly = false, disabled = false, onBlur, step = 1, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value) ? undefined : +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}`,
         rounded ? "is-rounded" : "",
         getStyleClassName(style, validationState),
         "input",
@@ -24,6 +22,6 @@ const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, vali
     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: "number", id: id, name: id, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, 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("input", { type: "number", id: name, name: name, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default NumberWithLabel;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,wKAUrB,WAAW,KAAG,WAqDhB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,wKAYrB,WAAW,KAAG,WAqDhB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -1,15 +1,15 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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";
 /** Number component without label */
-const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded = false, loading = false, placeholder, onBlur, step = 1, className, title, data, hint, }) => {
+const NumberWithoutLabel = ({ onValueChange, defaultValue, validationState, name = generateGuid(), size, style, readonly = false, disabled = false, rounded = false, loading = false, placeholder, onBlur, step = 1, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(+event.target.value), [onValueChange]);
     const elClassName = getClassName([
         className,
-        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
+        size === ElementSize.Normal ? "" : `is-${size}`,
         rounded ? "is-rounded" : "",
         getStyleClassName(style, validationState),
         "input",
@@ -19,10 +19,9 @@ const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, v
         "bbr-input",
         loading ? "is-loading" : "",
     ]);
-    const id = name ?? generateGuid();
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "number", id: id, name: id, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, 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: containerClassName, children: _jsx("input", { type: "number", id: name, name: name, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default NumberWithoutLabel;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { PasswordProps } from "../..";
-declare const PasswordWithLabel: ({ onValueChange, disabled, validationState, name, size, style, rounded, loading, label, placeholder, canShowPassword, className, title, data, hint, }: PasswordProps) => JSX.Element;
+declare const PasswordWithLabel: ({ onValueChange, validationState, name, size, style, rounded, loading, disabled, canShowPassword, label, placeholder, className, title, data, hint, }: PasswordProps) => JSX.Element;
 export default PasswordWithLabel;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,iBAAiB,0JAUpB,aAAa,KAAG,WAwElB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,iBAAiB,0JAUpB,aAAa,KAAG,WAqElB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -1,17 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } 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 Icon from "../../../../icon";
 import ComponentWithLabel from "../../../internal/componentWithLabel";
 import InternalHint from "../../../internal/hint";
-const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, size, style, rounded = false, loading = false, label, placeholder, canShowPassword = false, className, title, data, hint, }) => {
+const PasswordWithLabel = ({ onValueChange, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, disabled = false, canShowPassword = false, label, placeholder, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [contentIsHidden, setContentIsHidden] = useState(true);
     const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
-    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
-    const id = name ?? generateGuid();
+    const elSizeClassName = size === ElementSize.Normal ? "" : "is-{0}".format(size);
     const elClassName = getClassName([
         "bbr-password",
         className,
@@ -29,7 +28,7 @@ const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, siz
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs(ComponentWithLabel, { id: id, label: label, size: getValueOrDefault(size, ElementSize.Normal), children: [_jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: id, name: id, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, title: title, ...dataAttributes }), canShowPassword && !loading &&
-                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, title: "Show password", children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: name, name: name, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, title: title, ...dataAttributes }), canShowPassword && !loading &&
+                        _jsx("span", { onClick: onIconClick, title: "Show password", className: `icon is-right ${elSizeClassName}`, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default PasswordWithLabel;

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

@@ -1,16 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } 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 Icon from "../../../../icon";
 import InternalHint from "../../../internal/hint";
-const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name, size, style, rounded = false, loading = false, placeholder, canShowPassword = false, className, title, data, hint, }) => {
+const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, placeholder, canShowPassword = false, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [contentIsHidden, setContentIsHidden] = useState(true);
     const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
-    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
-    const id = name ?? generateGuid();
+    const elSizeClassName = size === ElementSize.Normal ? "" : "is-{0}".format(size);
     const elClassName = getClassName([
         "bbr-password",
         className,
@@ -29,7 +28,7 @@ const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name,
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: containerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: id, name: id, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, title: title, ...dataAttributes }), canShowPassword && !loading &&
-                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    return (_jsxs("div", { className: "bbr-field field", children: [_jsxs("div", { className: containerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: name, name: name, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, title: title, ...dataAttributes }), canShowPassword && !loading &&
+                        _jsx("span", { onClick: onIconClick, title: "Show password", className: `icon is-right ${elSizeClassName}`, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default PasswordWithoutLabel;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/text/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAI/B,8BAA8B;AAC9B,QAAA,MAAM,IAAI,UAAW,SAAS,KAAG,WAIhC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/text/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAI/B,8BAA8B;AAC9B,QAAA,MAAM,IAAI,UAAW,SAAS,KAAG,WAIhC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,yKAUhB,SAAS,KAAG,WAwDd,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,yKAUhB,SAAS,KAAG,WAqDd,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/primitives/text/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 InternalHint from "../../../internal/hint";
 import ComponentWithLabel from "../../../internal/componentWithLabel";
 /** Textual input with describing label */
-const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded = false, loading = false, label, placeholder, onBlur, className, title, data, hint, }) => {
+const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, label, placeholder, 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}`,
         rounded ? "is-rounded" : "",
         getStyleClassName(style, validationState),
         "input",
@@ -24,6 +22,6 @@ const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, valida
     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: "text", id: id, name: id, 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("input", { type: "text", id: name, name: name, 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 TextWithLabel;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,kKAUnB,SAAS,KAAG,WAoDd,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,kKAWnB,SAAS,KAAG,WAoDd,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -1,15 +1,15 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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";
 /** Textual input without describing label */
-const TextWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded = false, loading = false, placeholder, onBlur, className, title, data, hint, }) => {
+const TextWithoutLabel = ({ onValueChange, defaultValue, validationState, readonly = false, disabled = false, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, placeholder, onBlur, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const elClassName = getClassName([
         className,
-        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
+        size === ElementSize.Normal ? "" : `is-${size}`,
         rounded ? "is-rounded" : "",
         getStyleClassName(style, validationState),
         "input",
@@ -19,10 +19,9 @@ const TextWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, val
         "bbr-input",
         loading ? "is-loading" : "",
     ]);
-    const id = name ?? generateGuid();
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "text", id: id, name: id, 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("div", { className: "bbr-field field", children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "text", id: name, name: name, 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 TextWithoutLabel;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":";AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,IAAI,EAAE,YAAY,EAClB,IAAI,EACJ,SAAiB,EAAE,OAAe,EAAE,QAAQ,EAE5C,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAqF3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":";AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,IAAqB,EAAE,YAAiB,EACxC,IAAyB,EACzB,SAAiB,EAAE,OAAe,EAAE,QAAgB,EAEpD,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAwF3B"}

package/components/search/component/index.js

@@ -6,9 +6,9 @@ import { mapDataAttributes } from "../../../utils";
 import Button from "../../button";
 import "./style.scss";
 /** Search component */
-export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading = false, rounded = false, disabled, className, title, data, }) {
-    const [elementName] = useState(name ?? generateGuid());
-    const [searchValue, setSearchValue] = useState(defaultValue ?? "");
+export default function Search({ searchType, onSearch, caption, name = generateGuid(), defaultValue = "", size = ElementSize.Normal, isLoading = false, rounded = false, disabled = false, className, title, data, }) {
+    const [elementName] = useState(name);
+    const [searchValue, setSearchValue] = useState(defaultValue);
     const onChange = useCallback((event) => {
         const elementValue = event.target.value;
         if (searchType === "byTyping") {
@@ -21,14 +21,14 @@ export default function Search({ searchType, onSearch, caption, name, defaultVal
         "bbr-search",
         "control",
         className,
-        `is-${(size ?? ElementSize.Normal)}`,
+        `is-${size}`,
         isLoading ? "is-loading" : "",
         searchType === "byButton" ? "is-expanded" : "",
     ]);
     const inputClassName = getClassName([
         "input",
         "is-unselectable",
-        `is-${(size ?? ElementSize.Normal)}`,
+        `is-${size}`,
         rounded ? "is-rounded" : "",
     ]);
     const dataAttributes = isNullOrUndefined(data)
@@ -37,7 +37,5 @@ export default function Search({ searchType, onSearch, caption, name, defaultVal
     if (searchType === "byButton") {
         return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", name: elementName, disabled: disabled, onChange: onChange, placeholder: caption, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }), _jsx("div", { className: "control", children: _jsx(Button, { type: "info", size: size, caption: "Search", disabled: disabled, isLoading: isLoading, onClick: onSearchButtonClick }) })] }));
     }
-    else {
-        return (_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", name: elementName, disabled: disabled, onChange: onChange, placeholder: caption, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }));
-    }
+    return (_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", name: elementName, disabled: disabled, onChange: onChange, placeholder: caption, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }));
 }

package/components/table/component/index.d.ts

@@ -1,39 +1,6 @@
 /// <reference types="react" />
-import { BaseElementProps } from "../../../types";
-import { SortColumn, TableHeading } from "..";
-/** Table props type */
-export interface TableProps<TItem> extends BaseElementProps {
-    /** Header row */
-    headings: Array<TableHeading<TItem>>;
-    /** Table body */
-    children?: React.ReactNode;
-    /** Add border to all cells */
-    hasBorder?: boolean;
-    /** Is row hover effect active */
-    hoverable?: boolean;
-    /** Reduce space between cells */
-    narrow?: boolean;
-    /** Use all container width */
-    fullWidth?: boolean;
-    /** Is header sticks to page on scroll */
-    hasStickyHeader?: boolean;
-    /**
-     * Header has border.
-     * @description Applied only with `hasStickyHeader` sets as `true`. Adds border effect
-    */
-    headerWithBorder?: boolean;
-    /** Header has no borders */
-    headerBorderless?: boolean;
-    /**
-     * Should rows be stripped.
-     * @description Even rows will have gray background
-    */
-    zebra?: boolean;
-    /** Current sort column */
-    currentSortColumn?: SortColumn<TItem>;
-    /** Header click handler */
-    onHeaderClick?: (columnName: TableHeading<TItem>) => void;
-}
+import { TableProps } from "..";
+import "./style.scss";
 /**
  * Tiny table component.
  * If no sorting is use - use `any` as generic param

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAG9C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAG9C,uBAAuB;AACvB,MAAM,WAAW,UAAU,CAAC,KAAK,CAAE,SAAQ,gBAAgB;IACvD,iBAAiB;IACjB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IAErC,iBAAiB;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yCAAyC;IACzC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;MAGE;IACF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;MAGE;IACF,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAEtC,2BAA2B;IAC3B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED;;;GAGG;AACH,iBAAS,KAAK,CAAC,KAAK,EAAE,EAClB,QAAQ,EACR,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,EAChE,eAAe,EAAE,gBAAgB,EACjC,iBAAiB,EAAE,aAAa,EAChC,QAAQ,EAER,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CA0CjC;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAChC,OAAO,cAAc,CAAC;AAItB;;;GAGG;AACH,iBAAS,KAAK,CAAC,KAAK,EAAE,EAClB,QAAQ,EAER,SAAiB,EAAE,SAAiB,EAAE,MAAc,EACpD,SAAiB,EAAE,KAAa,EAAE,gBAAwB,EAC1D,eAAuB,EAAE,gBAAwB,EAEjD,iBAAiB,EAAE,aAAa,EAChC,QAAQ,EAER,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CA4CjC;AAED,eAAe,KAAK,CAAC"}

package/components/table/component/index.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
 import { mapDataAttributes } from "../../../utils";
+import "./style.scss";
 import TableHeader from "../components/heading";
 /**
  * Tiny table component.
  * If no sorting is use - use `any` as generic param
  */
-function Table({ headings, hasBorder, hoverable, narrow, fullWidth, zebra, headerBorderless, hasStickyHeader, headerWithBorder, currentSortColumn, onHeaderClick, children, className, title, data, }) {
+function Table({ headings, hasBorder = false, hoverable = false, narrow = false, fullWidth = false, zebra = false, headerBorderless = false, hasStickyHeader = false, headerWithBorder = false, currentSortColumn, onHeaderClick, children, className, title, data, }) {
     const elClassName = getClassName([
+        "bbr-table",
         "table",
         className,
         hasBorder ? "is-bordered" : "",
@@ -22,6 +24,6 @@ function Table({ headings, hasBorder, hoverable, narrow, fullWidth, zebra, heade
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs("table", { className: elClassName, title: title, ...dataAttributes, children: [_jsx("thead", { children: _jsx("tr", { children: headings.map((heading, i) => _jsx(TableHeader, { ...heading, sortColumn: currentSortColumn, onClick: onHeaderClick }, i)) }) }), _jsx("tbody", { children: children })] }));
+    return (_jsxs("table", { className: elClassName, title: title, ...dataAttributes, children: [_jsx("thead", { children: _jsx("tr", { children: headings.map((heading, i) => _jsx(TableHeader, { ...heading, onClick: onHeaderClick, sortColumn: currentSortColumn }, i)) }) }), _jsx("tbody", { children: children })] }));
 }
 export default Table;

package/components/table/component/style.scss

@@ -0,0 +1,21 @@
+table.bbr-table {
+    &.has-sticky-header thead th {
+        position: sticky;
+        top: 0.125rem;
+        z-index: 1;
+    }
+
+    &.has-shadow-bordered-header thead th {
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
+    }
+
+    &.has-borderless-header {
+        thead th {
+            border: none !important;
+        }
+
+        tbody tr:nth-child(1) td {
+            border-top: none !important;
+        }
+    }
+}

package/components/table/components/heading/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/components/heading/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEvD,yCAAyC;AACzC,MAAM,WAAW,gBAAgB,CAAC,KAAK,CAAE,SAAQ,YAAY,CAAC,KAAK,CAAC;IAChE,0BAA0B;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAE/B,yBAAyB;IACzB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACnD;AAED,yBAAyB;AACzB,iBAAS,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CAoCvE;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/components/heading/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEvD,yCAAyC;AACzC,MAAM,WAAW,gBAAgB,CAAC,KAAK,CAAE,SAAQ,YAAY,CAAC,KAAK,CAAC;IAChE,0BAA0B;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAE/B,yBAAyB;IACzB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACnD;AAED,yBAAyB;AACzB,iBAAS,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CAkCvE;AAED,eAAe,WAAW,CAAC"}

package/components/table/components/heading/index.js

@@ -14,8 +14,8 @@ function TableHeader(props) {
         className,
         sortable ? "is-clickable" : "",
     ]);
-    return (_jsx("th", { className: containerClassName, onClick: onHeaderClick, children: _jsxs("div", { children: [_jsx("span", { children: caption }), sortable && sortColumn?.columnName === name
-                    &&
-                        _jsx(Icon, { className: "ml-1", name: `sort-alpha-down${sortColumn.ascending ? "" : "-alt"}` })] }) }));
+    return (_jsxs("th", { onClick: onHeaderClick, className: containerClassName, children: [_jsx("span", { children: caption }), sortable && sortColumn?.columnName === name
+                &&
+                    _jsx(Icon, { className: "ml-1", name: `sort-alpha-down${sortColumn.ascending ? "" : "-alt"}` })] }));
 }
 export default TableHeader;