intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/UI/TagList/TagList.js

@@ -0,0 +1,231 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _reactfeather = require("react-feather");
+const _utils = require("../../../Functions/utils");
+const _Tag = /*#__PURE__*/ _interop_require_default(require("../Tag/Tag"));
+require("./TagList.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const TagList = ({ disabled, className, onTagClick, removeItem = null, items = [], withToggle = true, disableShowMore = false, shownItemsCount = "auto", testId = "test-taglist", refProp, renderOrder, onEditClick, onToggleRenderAll })=>{
+    var _wrapperRef_current_getBoundingClientRect, _wrapperRef_current;
+    const wrapperRef = (0, _react.useRef)(null);
+    const [tagList, setTagList] = (0, _react.useState)([]);
+    const [staticTagsCount, setStaticTagsCount] = (0, _react.useState)(-1);
+    const [renderItemsCount, setRenderItemsCount] = (0, _react.useState)(-1);
+    const [renderAll, setRenderAll] = (0, _react.useState)(!withToggle);
+    var _wrapperRef_current_getBoundingClientRect_width;
+    const wrapperWidth = (_wrapperRef_current_getBoundingClientRect_width = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef_current = wrapperRef.current) === null || _wrapperRef_current === void 0 ? void 0 : (_wrapperRef_current_getBoundingClientRect = _wrapperRef_current.getBoundingClientRect()) === null || _wrapperRef_current_getBoundingClientRect === void 0 ? void 0 : _wrapperRef_current_getBoundingClientRect.width) !== null && _wrapperRef_current_getBoundingClientRect_width !== void 0 ? _wrapperRef_current_getBoundingClientRect_width : -1;
+    const setRenderAllInterceptor = (v)=>{
+        setRenderAll(v);
+        onToggleRenderAll === null || onToggleRenderAll === void 0 ? void 0 : onToggleRenderAll(v);
+    };
+    const getStaticTagsCount = (computedWidth)=>{
+        var _result_items;
+        if (typeof shownItemsCount === "number") return shownItemsCount;
+        const delta = typeof onEditClick === "function" ? 60 : 32;
+        const result = tagList.reduce((result, { itemRef }, index)=>{
+            var _itemRef_current_getBoundingClientRect, _itemRef_current;
+            if (result.skip) return result;
+            const itemStyle = (itemRef === null || itemRef === void 0 ? void 0 : itemRef.current) && window.getComputedStyle(itemRef.current);
+            const itemWidth = [
+                parseInt((_itemRef_current = itemRef.current) === null || _itemRef_current === void 0 ? void 0 : (_itemRef_current_getBoundingClientRect = _itemRef_current.getBoundingClientRect()) === null || _itemRef_current_getBoundingClientRect === void 0 ? void 0 : _itemRef_current_getBoundingClientRect.width, 10),
+                parseInt(itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.marginLeft, 10),
+                parseInt(itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.marginRight, 10)
+            ].reduce((result, item)=>{
+                if (!isNaN(item)) result += item;
+                return result;
+            }, 0);
+            if (!isNaN(itemWidth) && itemWidth > 0 && itemWidth + result.width < computedWidth - delta || index === 0) {
+                result = {
+                    count: result.count + 1,
+                    width: result.width + itemWidth,
+                    items: [
+                        ...result.items,
+                        {
+                            w: itemWidth,
+                            r: itemRef === null || itemRef === void 0 ? void 0 : itemRef.current
+                        }
+                    ]
+                };
+            } else {
+                result.skip = true;
+            }
+            return result;
+        }, {
+            count: 0,
+            width: 0,
+            items: [],
+            skip: false
+        });
+        if ((result === null || result === void 0 ? void 0 : (_result_items = result.items) === null || _result_items === void 0 ? void 0 : _result_items.length) === 1 && tagList.length > 1) {
+            result.items[0].r.style.maxWidth = `${computedWidth - delta - 8}px`;
+        }
+        return result === null || result === void 0 ? void 0 : result.count;
+    };
+    const cancelDefault = (e, cb = ()=>{})=>{
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        cb(e);
+    };
+    const renderTags = ()=>{
+        const tagsRenderOrder = renderOrder !== null && renderOrder !== void 0 ? renderOrder : tagList.map(({ value, id })=>value !== null && value !== void 0 ? value : id);
+        return tagsRenderOrder.map((v, i)=>{
+            const item = tagList.find(({ value, id })=>(value !== null && value !== void 0 ? value : id) === v);
+            if (!item) return null;
+            const isHidden = renderItemsCount !== -1 && staticTagsCount !== -1 ? i >= renderItemsCount : false;
+            var _item_id, _item_id1;
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: `tag-list_wrapper_item ${isHidden ? "tag-list_wrapper_item--hidden" : ""}`,
+                ref: (0, _utils.checkedRef)(item === null || item === void 0 ? void 0 : item.itemRef),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+                    testId: `test-taglist-item-${(_item_id = item === null || item === void 0 ? void 0 : item.id) !== null && _item_id !== void 0 ? _item_id : item === null || item === void 0 ? void 0 : item.value}`,
+                    ...item,
+                    onClick: onTagClick,
+                    removeItem: removeItem
+                })
+            }, `tag-list-item-${(_item_id1 = item === null || item === void 0 ? void 0 : item.id) !== null && _item_id1 !== void 0 ? _item_id1 : item === null || item === void 0 ? void 0 : item.value}`);
+        });
+    };
+    const renderMoreTags = ()=>{
+        if ((tagList === null || tagList === void 0 ? void 0 : tagList.length) < shownItemsCount || !(tagList === null || tagList === void 0 ? void 0 : tagList.length) || disableShowMore) return null;
+        const restItems = tagList.length - renderItemsCount;
+        if (restItems === 0 || !withToggle || staticTagsCount === -1) return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+            label: `+${restItems}`,
+            className: "tag-list_wrapper_render-more",
+            onClick: disableShowMore ? ()=>{} : (e)=>cancelDefault(e, ()=>setRenderAllInterceptor(true))
+        });
+    };
+    const renderHideTags = ()=>{
+        if (renderItemsCount !== (tagList === null || tagList === void 0 ? void 0 : tagList.length) || !withToggle || staticTagsCount === -1 || staticTagsCount === (tagList === null || tagList === void 0 ? void 0 : tagList.length)) return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+            label: "...",
+            className: "tag-list_wrapper_hide-more",
+            onClick: (e)=>cancelDefault(e, ()=>setRenderAllInterceptor(false))
+        });
+    };
+    // Set TagList Items
+    (0, _react.useEffect)(()=>{
+        setStaticTagsCount(-1);
+        setRenderItemsCount(-1);
+        setRenderAllInterceptor(false);
+        setTagList(items.map((item)=>({
+                ...item,
+                itemRef: /*#__PURE__*/ (0, _react.createRef)()
+            })));
+    }, [
+        items
+    ]);
+    // Count Row Tags
+    (0, _react.useLayoutEffect)(()=>{
+        if (withToggle && wrapperWidth !== -1 && staticTagsCount === -1) {
+            let computedWidth = wrapperWidth;
+            if (computedWidth === 0) {
+                var _window_getComputedStyle;
+                computedWidth = parseInt((wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) ? (_window_getComputedStyle = window.getComputedStyle(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) === null || _window_getComputedStyle === void 0 ? void 0 : _window_getComputedStyle.width : 0);
+            }
+            if (!isNaN(computedWidth)) {
+                setStaticTagsCount(getStaticTagsCount(computedWidth));
+            }
+        }
+    }, [
+        tagList,
+        wrapperWidth,
+        wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current
+    ]);
+    //
+    (0, _react.useLayoutEffect)(()=>{
+        setRenderItemsCount(staticTagsCount);
+    }, [
+        staticTagsCount
+    ]);
+    // Toggle Show/Hide More Tags
+    (0, _react.useEffect)(()=>{
+        setRenderItemsCount(renderAll ? tagList === null || tagList === void 0 ? void 0 : tagList.length : staticTagsCount);
+    }, [
+        renderAll
+    ]);
+    (0, _react.useEffect)(()=>{
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        if ((wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) && refProp) refProp.current = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current;
+    }, [
+        wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)("tag-list_wrapper", `${renderItemsCount !== (tagList === null || tagList === void 0 ? void 0 : tagList.length) || !withToggle || staticTagsCount === -1 || staticTagsCount === (tagList === null || tagList === void 0 ? void 0 : tagList.length) ? "tag-list_wrapper--only-static-items" : "tag-list_wrapper--all-items"}`, className, {
+            "tag-list_wrapper--disabled": disabled
+        }),
+        style: {
+            visibility: staticTagsCount === -1 ? "hidden" : "visible",
+            zIndex: staticTagsCount === -1 ? "-1" : "auto"
+        },
+        ref: wrapperRef,
+        children: [
+            renderTags(),
+            renderMoreTags(),
+            renderHideTags(),
+            typeof onEditClick === "function" && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "tag-list__edit-trigger",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Edit3, {
+                    onClick: onEditClick
+                })
+            })
+        ]
+    });
+};
+const _default = TagList;

package/dist/src/Atomic/UI/TagList/TagList.scss

@@ -0,0 +1,78 @@
+.tag-list_wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+
+  &--disabled {
+    filter: grayscale(0.2);
+    * {
+      pointer-events: none !important;
+    }
+  }
+
+  &--only-static-items {
+    display: flex;
+
+    .tag-list_wrapper_item {
+      margin-bottom: 0;
+    }
+  }
+
+  &_item {
+    display: inline-block;
+
+    box-sizing: border-box;
+    width: auto;
+
+    .tag {
+      box-sizing: border-box;
+      max-width: 100%;
+      margin: 0 !important;
+
+      &__label {
+        overflow: hidden;
+
+        text-overflow: ellipsis;
+      }
+    }
+
+    &--hidden {
+      display: none;
+    }
+  }
+
+  &_render-more,
+  &_hide-more {
+    margin: 0 !important;
+
+    cursor: pointer;
+
+    background: #ffedc8;
+  }
+
+  .tag {
+    margin: 2px;
+  }
+}
+
+.tag-list__edit-trigger {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+
+  box-sizing: border-box;
+  padding: 2px;
+
+  cursor: pointer;
+
+  svg {
+    width: 16px;
+    height: 16px;
+
+    color: #6b81dd;
+  }
+}

package/dist/src/Atomic/UI/TagList/TagList.stories.js

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TagListTemplate: function() {
+        return TagListTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+require("../../../../../scss/main.scss");
+const _TagList = /*#__PURE__*/ _interop_require_default(require("./TagList"));
+require("./TagListStories.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+global.lng = "en";
+const _default = {
+    title: "UI/TagList",
+    component: _TagList.default
+};
+const renderPopupContent = ()=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                children: '"ADDED"'
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        children: '"FL Name" '
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        children: '"Admin" '
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        children: '"date"'
+                    })
+                ]
+            })
+        ]
+    });
+};
+const Template = (args)=>{
+    const { options } = args;
+    const [tags, setTags] = (0, _react.useState)(options);
+    const removeTagHandler = (value)=>{
+        const newArray = tags.filter((item)=>item.value !== value);
+        setTags(newArray);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TagList.default, {
+        ...args,
+        items: tags
+    });
+};
+const TagListTemplate = Template.bind({});
+TagListTemplate.args = {
+    options: [
+        {
+            id: 1,
+            label: "Label test 1 1 1",
+            value: "check1",
+            color: "#FBF4E2",
+            isPopup: true,
+            popupInfoContent: renderPopupContent()
+        },
+        {
+            id: 2,
+            label: "Label test 2",
+            value: "check2",
+            color: "#FCE2E8"
+        },
+        {
+            id: 3,
+            label: "Label test 3",
+            value: "check3",
+            color: "#FBF4E2"
+        },
+        {
+            id: 4,
+            label: "Label test 3 dasd",
+            value: "check4",
+            color: "#FCE2E8"
+        },
+        {
+            id: 5,
+            label: "Label test 3 adsdasfgas",
+            value: "check5",
+            color: "#FBF4E2"
+        },
+        {
+            id: 6,
+            label: "Label test 3dasd",
+            value: "check6",
+            color: "#FCE2E8"
+        },
+        {
+            id: 7,
+            label: "Label test 3 dasd",
+            value: "check7",
+            color: "#FBF4E2"
+        },
+        {
+            id: 8,
+            label: "Label test 3asd",
+            value: "check8",
+            color: "#FCE2E8"
+        },
+        {
+            id: 9,
+            label: "Label test 3 dasfs",
+            value: "check9",
+            color: "#FBF4E2"
+        }
+    ]
+};

package/dist/src/Atomic/UI/UserBox/UserBox.interface.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/src/Atomic/UI/UserBox/UserBox.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _utils = require("@/Functions/utils");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _Label = /*#__PURE__*/ _interop_require_default(require("../../FormElements/Label/Label"));
+const _Button = /*#__PURE__*/ _interop_require_default(require("../Button/Button"));
+require("./UserBox.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const UserBox = ({ name = 'Username', role, id, onClick, isModal, className, colors, testId = 'userbox' })=>{
+    const getNameFirstLetter = name.charAt(0).toUpperCase();
+    const renderUser = ()=>{
+        if (isModal) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            backgroundColor: (0, _utils.getColorById)(id, colors)
+                        },
+                        className: "td-user-box__avatar",
+                        children: getNameFirstLetter
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "td-user-box__user-data",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                className: "p0 no-shadow",
+                                onClick: onClick,
+                                label: name,
+                                variant: "link"
+                            }),
+                            role && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                children: role
+                            })
+                        ]
+                    })
+                ]
+            });
+        } else {
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            backgroundColor: (0, _utils.getColorById)(id)
+                        },
+                        className: "td-user-box__avatar",
+                        children: getNameFirstLetter
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "td-user-box__user-data",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                label: name
+                            }),
+                            role && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                "aria-label": `User role: ${role}`,
+                                children: role
+                            })
+                        ]
+                    })
+                ]
+            });
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)('td-user-box', className),
+        role: "region",
+        "aria-label": `User box for ${name}`,
+        children: renderUser()
+    });
+};
+const _default = UserBox;

package/dist/src/Atomic/UI/UserBox/UserBox.scss

@@ -0,0 +1,79 @@
+.td-user-box {
+  --userbox-avatar-width: 24px;
+  --userbox-avatar-height: 24px;
+  --userbox-avatar-font-size: 16px;
+  --userbox-avatar-font-weight: 400;
+  --userbox-avatar-color: #fff;
+  --userbox-avatar-border-radius: 30px;
+
+  --userbox-user-data-padding-left: 8px;
+  --userbox-user-data-font-family: sarabun;
+  --userbox-user-data-font-size: 12px;
+  --userbox-user-data-font-weight: 400;
+  --userbox-user-data-line-height: 18px;
+  --userbox-user-data-letter-spacing: 0.2px;
+
+  --userbox-button-link-height: unset;
+  --userbox-button-link-padding-left: 8px;
+  --userbox-button-link-font-size: 14px;
+  --userbox-button-link-font-weight: 400;
+
+  --userbox-label-margin-bottom: 0;
+  --userbox-label-margin-left: 8px;
+  --userbox-label-font-size: 14px;
+  --userbox-label-font-weight: 400;
+  --userbox-label-color: #171d33;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  &__avatar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: var(--userbox-avatar-width);
+    height: var(--userbox-avatar-height);
+
+    font-size: var(--userbox-avatar-font-size);
+    font-weight: var(--userbox-avatar-font-weight);
+    user-select: none;
+
+    color: var(--userbox-avatar-color);
+    border-radius: var(--userbox-avatar-border-radius);
+  }
+
+  &__user-data {
+    display: flex;
+    flex-direction: column;
+
+    span {
+      padding-left: var(--userbox-user-data-padding-left);
+
+      font-family: var(--userbox-user-data-font-family);
+      font-size: var(--userbox-user-data-font-size);
+      font-weight: var(--userbox-user-data-font-weight);
+      font-style: normal;
+      line-height: var(--userbox-user-data-line-height);
+      letter-spacing: var(--userbox-user-data-letter-spacing);
+    }
+  }
+
+  .button_link {
+    height: var(--userbox-button-link-height);
+    padding-left: var(--userbox-button-link-padding-left);
+
+    font-size: var(--userbox-button-link-font-size);
+    font-weight: var(--userbox-button-link-font-weight);
+  }
+
+  .label {
+    margin-bottom: var(--userbox-label-margin-bottom);
+    margin-left: var(--userbox-label-margin-left);
+
+    font-size: var(--userbox-label-font-size);
+    font-weight: var(--userbox-label-font-weight);
+
+    color: var(--userbox-label-color);
+  }
+}