@sydsoft/base 1.58.0 → 2.0.0

package/dist/esm/form/SearchableInput.js

@@ -0,0 +1,277 @@
+import { __assign, __rest, __spreadArray } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-10 20:23:07
+ */
+import { Button, Input } from './index';
+import { convertForSearch, convertLowerCase } from '../_lib/baseFunctions';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { onKeyboardSelection, setScrollListPosition } from '../_lib/listFunctions';
+import { Icon } from '../icon';
+import styles from './styles/SearchableInput.module.css';
+export var SearchableInput = forwardRef(function (_a, ref) {
+    var _b = _a.autoCompleteList, autoCompleteList = _b === void 0 ? [] : _b, isDataFromApi = _a.isDataFromApi, name = _a.name, value = _a.value, parentInputValue = _a.parentInputValue, disabled = _a.disabled, itemComponent = _a.itemComponent, _c = _a.valueKey, valueKey = _c === void 0 ? 'value' : _c, _d = _a.labelKey, labelKey = _d === void 0 ? 'label' : _d, onSelect = _a.onSelect, onChange = _a.onChange, onText = _a.onText, onLoad = _a.onLoad, style = _a.style, _e = _a.listPositionRelative, listPositionRelative = _e === void 0 ? false : _e, _f = _a.loadingMessage, loadingMessage = _f === void 0 ? 'Lütfen bekleyiniz...' : _f, _g = _a.notFoundMessage, notFoundMessage = _g === void 0 ? 'Kayıt bulunamadı...' : _g, placeholder = _a.placeholder, endAdornment = _a.endAdornment, _h = _a.ilkSec, ilkSec = _h === void 0 ? false : _h, _j = _a.newCreate, newCreate = _j === void 0 ? false : _j, inputRef = _a.inputRef, other = __rest(_a, ["autoCompleteList", "isDataFromApi", "name", "value", "parentInputValue", "disabled", "itemComponent", "valueKey", "labelKey", "onSelect", "onChange", "onText", "onLoad", "style", "listPositionRelative", "loadingMessage", "notFoundMessage", "placeholder", "endAdornment", "ilkSec", "newCreate", "inputRef"]);
+    var refMain = useRef(null);
+    var refInput = useRef(null);
+    var refList = useRef(null);
+    var _k = useState(autoCompleteList !== null && autoCompleteList !== void 0 ? autoCompleteList : []), data = _k[0], setData = _k[1];
+    var _l = useState(value !== null && value !== void 0 ? value : undefined), selectedValue = _l[0], setSelectedValue = _l[1];
+    var _m = useState(parentInputValue !== null && parentInputValue !== void 0 ? parentInputValue : undefined), parentValue = _m[0], setParentValue = _m[1];
+    var _o = useState(''), text = _o[0], setText = _o[1]; //Inputta görünen
+    var _p = useState(''), filter = _p[0], setFilter = _p[1]; // Filtrelemeye tabi tutulan
+    var _q = useState({ created: false }), newItemCreate = _q[0], setNewItemCreate = _q[1];
+    var _r = useState(false), open = _r[0], setOpen = _r[1];
+    var _s = useState(isDataFromApi && (!autoCompleteList || (autoCompleteList === null || autoCompleteList === void 0 ? void 0 : autoCompleteList.length) == 0)), loading = _s[0], setLoading = _s[1];
+    useImperativeHandle(ref, function () { return ({
+        setAutoCompleteList: function (list, value, callback) {
+            if (value === void 0) { value = undefined; }
+            if (autoCompleteList && (autoCompleteList === null || autoCompleteList === void 0 ? void 0 : autoCompleteList.length) > 0) {
+                alert('AutoCompleteList zaten tanımlı olduğundan dışardan data seti değiştirilemez.');
+                return;
+            }
+            setData(list);
+            value && sendChange(value);
+            setLoading(false);
+            if (!Array.isArray(list) || list.length == 0) {
+                clear(false);
+            }
+            callback && callback();
+            //   isDev && console.log("setAutoCompleteList =>", name, value, list);
+        },
+        clear: function (openList, focusInput) {
+            if (openList === void 0) { openList = false; }
+            if (focusInput === void 0) { focusInput = false; }
+            return clear(openList, focusInput);
+        },
+        open: function () {
+            setOpen(true);
+            refInput.current && refInput.current.focus();
+        },
+        close: function () { return setOpen(false); },
+        checkByValue: function (value, openList) {
+            if (openList === void 0) { openList = false; }
+            return checkByValue(value, openList);
+        },
+        setLoading: function (value) { return setLoading(value); }
+    }); }, [autoCompleteList, data, value]);
+    useEffect(function () {
+        if (inputRef)
+            inputRef.current = refInput.current;
+    }, [refInput.current]);
+    useEffect(function () { return onLoad && onLoad(value); }, []);
+    useEffect(function () {
+        if (autoCompleteList && Array.isArray(autoCompleteList)) {
+            if (autoCompleteList.length > 0) {
+                // Sadece gerçekten farklıysa set et
+                if (JSON.stringify(autoCompleteList) !== JSON.stringify(data)) {
+                    setData(autoCompleteList);
+                    // isDev && console.log("autoCompleteList dolu =>", name, autoCompleteList);
+                }
+            }
+            else {
+                // Boş array geldi VE data zaten boş değilse
+                if (data.length > 0) {
+                    setData([]);
+                    // isDev && console.log("autoCompleteList boşaltıldı =>", name);
+                }
+            }
+        }
+    }, [autoCompleteList]);
+    useEffect(function () {
+        // isDev && console.log('data =>', name, data, 'selectedValue =>', selectedValue, 'value =>', value);
+        if (!Array.isArray(data)) {
+            setData([]);
+        }
+        if (data.length > 0) {
+            setLoading(false);
+            checkByValue(selectedValue, open);
+            if (!value && ilkSec) {
+                checkByValue(data[0][valueKey], false);
+            }
+        }
+        else {
+            !isDataFromApi && clear(false);
+        }
+    }, [data]);
+    // Seçim değişikliğinde parent'ı bilgilendir
+    useEffect(function () {
+        // isDev && console.log('selectedValue =>', name, selectedValue, 'value =>', value);
+        if ((value === null || value === void 0 ? void 0 : value.toString()) != (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.toString())) {
+            checkByValue(value, open);
+            // isDev && console.log('value Kontrol ediliyor', value, selectedValue);
+        }
+    }, [value]);
+    useEffect(function () {
+        if (parentInputValue !== parentValue) {
+            setParentValue(parentInputValue);
+            clear(false);
+            // isDev && console.log(name, "parentInputValueDeğişti =>", parentInputValue);
+        }
+    }, [parentInputValue]);
+    useEffect(function () {
+        var checkHideBackDrop = function (e) {
+            if (open && refMain.current && !refMain.current.contains(e.target)) {
+                checkByInput();
+            }
+        };
+        var checkESC = function (e) {
+            if (e.keyCode === 27 || e.key === 'Escape' || e.code === 'Escape')
+                checkByInput();
+        };
+        window.addEventListener('mousedown', checkHideBackDrop);
+        if (refMain.current)
+            refMain.current.addEventListener('keydown', checkESC);
+        if (open) {
+            setScrollListPosition(refList);
+            if (!listPositionRelative) {
+                window.addEventListener('scroll', handleUpdatePosition, true);
+                window.addEventListener('resize', handleUpdatePosition);
+            }
+        }
+        return function () {
+            window.removeEventListener('mousedown', checkHideBackDrop);
+            if (refMain.current)
+                refMain.current.removeEventListener('keydown', checkESC);
+            window.removeEventListener('scroll', handleUpdatePosition, true);
+            window.removeEventListener('resize', handleUpdatePosition);
+        };
+    }, [open]);
+    useLayoutEffect(function () { return handleUpdatePosition(); }, [open]);
+    var setValue = useCallback(function (item, openList) {
+        var _a, _b;
+        var newValue = (_a = item === null || item === void 0 ? void 0 : item[valueKey]) !== null && _a !== void 0 ? _a : '';
+        var newLabel = (_b = item === null || item === void 0 ? void 0 : item[labelKey]) !== null && _b !== void 0 ? _b : '';
+        setOpen(openList);
+        setText(newLabel);
+        // isDev && console.log(name, "setValue", newValue, "item", item, "value", value);
+        if (newValue === selectedValue)
+            return;
+        setFilter('');
+        setSelectedValue(newValue);
+        onChange && sendChange(newValue);
+        onSelect && onSelect(item);
+    }, [onChange, onSelect, name, selectedValue, valueKey, labelKey]);
+    var textInputOnChange = useCallback(function (e) {
+        setSelectedValue(undefined);
+        setText(e.target.value);
+        setFilter(e.target.value.trim());
+        setOpen(true);
+        onText && onText(e.target.value);
+    }, [setValue, onText]);
+    var checkByValue = useCallback(function (value, openList, list) {
+        if (openList === void 0) { openList = false; }
+        if (list === void 0) { list = []; }
+        var targetList = list.length > 0 ? list : data;
+        var find = Object.values(targetList).find(function (item) { return convertLowerCase(item[valueKey]) === convertLowerCase(value); });
+        if (!find && newCreate && newItemCreate.create) {
+            find = newItemCreate;
+        }
+        // isDev && console.log('find', find, 'value', value, data);
+        setValue(find, openList);
+    }, [data, valueKey, newCreate, newItemCreate, setValue]);
+    var checkByInput = useCallback(function () {
+        var findByLabel = data.find(function (item) { var _a; return convertLowerCase(item[labelKey]) === convertLowerCase((_a = refInput.current) === null || _a === void 0 ? void 0 : _a.value); });
+        if (findByLabel && value == findByLabel[valueKey]) {
+            setOpen(false);
+            return;
+        }
+        setValue(findByLabel, false);
+        if (!findByLabel)
+            setText('');
+        if (isDataFromApi && !findByLabel && data.length === 0) {
+            if (onText)
+                onText('');
+        }
+    }, [data, labelKey, value, valueKey, isDataFromApi, onText, setValue, refInput.current]);
+    var clear = useCallback(function (openList, focusInput) {
+        var _a;
+        if (openList === void 0) { openList = true; }
+        if (focusInput === void 0) { focusInput = false; }
+        setFilter('');
+        setText('');
+        setValue(undefined, openList);
+        onText && onText('');
+        focusInput && ((_a = refInput === null || refInput === void 0 ? void 0 : refInput.current) === null || _a === void 0 ? void 0 : _a.focus());
+    }, [setValue, onText]);
+    var sendChange = useCallback(function (value) {
+        // isDev && console.log(name, "sendChange", value, "selectedValue", selectedValue);
+        if (onChange && value !== selectedValue) {
+            onChange({ target: { name: name, value: value } });
+        }
+    }, [onChange, name]);
+    var filteredData = useMemo(function () {
+        var _a;
+        var list;
+        if (filter.length > 0) {
+            list = data.filter(function (item) { return convertForSearch(item[labelKey]).includes(convertForSearch(filter)) || item[labelKey] == filter; });
+        }
+        else {
+            list = data;
+        }
+        if (newCreate && text.length > 0) {
+            var filterText = data.find(function (item) { return item[labelKey].toString().toLowerCase() === text.toString().toLowerCase(); });
+            if (!filterText) {
+                var newItem = (_a = {}, _a[labelKey] = text, _a[valueKey] = text, _a.create = true, _a);
+                list = __spreadArray([newItem], list, true);
+                setNewItemCreate(newItem);
+            }
+            else {
+                if (newItemCreate.create)
+                    setNewItemCreate({ create: false });
+            }
+        }
+        return list;
+    }, [data, filter, newCreate, text, valueKey, labelKey]);
+    var handleUpdatePosition = function () {
+        if (open && !listPositionRelative && refMain) {
+            setFixedPosition(refMain);
+        }
+    };
+    var onKeyDown = function (e) {
+        if (!open || !refList.current)
+            return null;
+        onKeyboardSelection({
+            e: e,
+            targetElement: refList,
+            checkByInput: checkByInput,
+            checkByValue: checkByValue,
+            clear: clear,
+            itemClass: 'li.item',
+            selectedClass: 'selected'
+        });
+    };
+    return (_jsxs("div", { ref: refMain, className: styles.searchableInputComponent, onKeyDown: onKeyDown, style: style, children: [_jsx(Input, __assign({}, other, { inputRef: refInput, name: name, value: text, onFocus: function () { return !disabled && setOpen(true); }, onChange: textInputOnChange, endAdornment: !disabled && (_jsxs("div", { style: { marginRight: 5 }, tabIndex: -1, children: [_jsx(Button, { title: 'Temizle', tabIndex: -1, hidden: !(text && text.length > 0), onClick: function () { return clear(true, true); }, onlyIcon: _jsx(Icon, { name: 'close', style: { color: '#444' } }) }), endAdornment, _jsx(Button, { tabIndex: -1, hidden: !data || !(data.length > 0), onClick: function () { return !disabled && setOpen(!open); }, onlyIcon: _jsx(Icon, { name: open ? 'keyboard_arrow_up' : 'keyboard_arrow_down', style: { color: '#444' } }) })] })), placeholder: loading ? 'Lütfen bekleyiniz...' : placeholder, loading: loading, disabled: disabled, propsInput: __assign(__assign({}, other === null || other === void 0 ? void 0 : other.propsInput), { autoComplete: 'off' }) })), open && (_jsx("div", { className: 'listDiv', "data-relative": listPositionRelative, children: _jsxs("ul", { ref: refList, className: "list ".concat(open ? 'open' : ''), children: [(filteredData.length === 0 || loading) && _jsx("div", { className: "message ".concat(loading ? 'loading' : ''), children: loading ? loadingMessage : notFoundMessage }), filteredData.map(function (item, key) {
+                            var itemValue = item[valueKey];
+                            var itemLabel = item[labelKey];
+                            return (_jsxs("li", { className: "item ".concat(itemValue === selectedValue ? 'active' : ''), "data-value": itemValue, "data-label": itemLabel, onClick: function () { return setValue(item, false); }, children: [item.create && _jsx("span", { className: 'newCreate', children: "Yeni Olu\u015Ftur: " }), itemComponent ? itemComponent(item) : itemLabel] }, key));
+                        })] }) }))] }));
+});
+var setFixedPosition = function (refMain) {
+    if (!refMain.current)
+        return;
+    var target = refMain.current;
+    var targetPosition = target.getBoundingClientRect();
+    var listDiv = target.querySelector('.listDiv');
+    if (listDiv) {
+        var listDivUL = target.querySelector('ul');
+        if (!listDiv)
+            return;
+        var listHeight = listDivUL.getBoundingClientRect().height;
+        var style = [];
+        style.push("position:fixed");
+        style.push("z-index:111111111111 !important");
+        style.push("width:".concat(targetPosition.width, "px"));
+        var spaceBelow = window.innerHeight - (targetPosition.top + targetPosition.height);
+        var spaceAbove = targetPosition.top;
+        if (spaceBelow < listHeight && spaceAbove > listHeight) {
+            style.push("top:".concat(targetPosition.top - listHeight, "px"));
+            style.push("margin-top:-1px");
+        }
+        else {
+            style.push("top:".concat(targetPosition.top + targetPosition.height, "px"));
+        }
+        listDiv.setAttribute('style', style.join(';'));
+    }
+};

package/dist/esm/form/UploadBase.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2024
+ *  @author: izzetseydaoglu
+ *  @last-modified: 11.06.2024 02:39
+ */
+import React from "react";
+interface Props {
+    children?: React.ReactNode;
+    refUploadInput?: any;
+    className?: string;
+    required?: boolean;
+    multiple?: boolean;
+    ext_ok?: string[];
+    maxSize?: number;
+    maxFile?: number;
+    style?: React.CSSProperties;
+    onChange?: Function;
+    targetForm?: Function;
+    name?: string;
+    label?: string;
+    component?: any;
+}
+export declare const UploadBase: ({ component, children, targetForm, onChange, name, required, multiple, maxSize, maxFile, ext_ok, style, className, refUploadInput, label }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const uploadBase_CreateForm: (formData: any) => any;
+export {};

package/dist/esm/form/UploadBase.js

@@ -0,0 +1,86 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright (c) 2024
+ *  @author: izzetseydaoglu
+ *  @last-modified: 11.06.2024 02:39
+ */
+import { useEffect, useRef } from "react";
+import { alert_add } from "../alert";
+var upload_ext_ok = ["pdf", "doc", "docx", "xls", "xlsx", "jpg", "jpeg", "png", "bmp", "tiff", "tif", "udf", "txt", "rtf", "csv", "xml", "zip", "rar"];
+var upload_maxsize = 30;
+var upload_maxfile = 50;
+export var UploadBase = function (_a) {
+    var _b = _a.component, component = _b === void 0 ? "div" : _b, children = _a.children, targetForm = _a.targetForm, onChange = _a.onChange, _c = _a.name, name = _c === void 0 ? "file__" : _c, _d = _a.required, required = _d === void 0 ? true : _d, _e = _a.multiple, multiple = _e === void 0 ? false : _e, _f = _a.maxSize, maxSize = _f === void 0 ? upload_maxsize : _f, _g = _a.maxFile, maxFile = _g === void 0 ? upload_maxfile : _g, _h = _a.ext_ok, ext_ok = _h === void 0 ? upload_ext_ok : _h, style = _a.style, className = _a.className, _j = _a.refUploadInput, refUploadInput = _j === void 0 ? null : _j, label = _a.label;
+    var ref = useRef(null);
+    useEffect(function () {
+        if (refUploadInput)
+            refUploadInput.current = ref.current;
+    }, [ref.current]);
+    var fileSelected = function (e) {
+        if (!(e.target.files.length > 0)) {
+            e.target.value = null;
+            return null;
+        }
+        if (e.target.files.length > maxFile) {
+            alert_add({ type: "error", message: "En fazla " + maxFile + " dosya seçebilirsiniz." });
+            e.target.value = null;
+            return null;
+        }
+        var fileList = [];
+        Object.values(e.target.files).map(function (file) {
+            var size = file.size;
+            var ext = file.name.replace(/^.*\./, "").toLowerCase();
+            if (ext_ok.indexOf(ext) === -1) {
+                alert_add({ type: "error", message: "Yüklemeye çalıştığınız dosya türü desteklenmiyor. Desteklenen dosya türleri: " + ext_ok.join(", ") });
+            }
+            else if (size > maxSize * 1000000) {
+                alert_add({ type: "error", message: "En fazla " + maxSize + "MB büyüklüğündeki dosyaları seçebilirsiniz." });
+            }
+            else {
+                fileList.push(file);
+            }
+        });
+        if (onChange)
+            onChange(fileList);
+        if (targetForm) {
+            var nameList_1 = [];
+            var newform_1 = {};
+            var uniqueID_1 = new Date().getTime();
+            fileList.map(function (file) {
+                var _a;
+                uniqueID_1 = uniqueID_1 + 1;
+                newform_1 = __assign(__assign({}, newform_1), (_a = {}, _a[name + uniqueID_1] = file, _a));
+                nameList_1.push(file.name);
+            });
+            targetForm(function (prev) { return (__assign(__assign({}, prev), { uploadBaseList: __assign({}, newform_1), uploadBaseListName: nameList_1.join(", ") })); });
+        }
+    };
+    var defaultStyle = {
+        position: "relative",
+        cursor: "pointer"
+    };
+    var Component = component.toLowerCase();
+    return (_jsxs(Component, { className: className, style: __assign(__assign({}, defaultStyle), style), "data-label": label !== null && label !== void 0 ? label : "", children: [children, _jsx("input", { ref: ref, type: "file", required: required, onChange: fileSelected, multiple: multiple, accept: ext_ok.map(function (i) { return "." + i; }).join(","), style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    opacity: 0,
+                    width: "100%",
+                    height: "100%",
+                    cursor: "pointer",
+                    zIndex: 1
+                } })] }));
+};
+export var uploadBase_CreateForm = function (formData) {
+    var _a;
+    var newform = __assign({}, formData);
+    var list = (_a = formData["uploadBaseList"]) !== null && _a !== void 0 ? _a : {};
+    Object.keys(list).map(function (fileKey) {
+        var _a;
+        return (newform = __assign(__assign({}, newform), (_a = {}, _a[fileKey] = list[fileKey], _a)));
+    });
+    delete newform["uploadBaseList"];
+    delete newform["uploadBaseListName"];
+    return newform;
+};

package/dist/esm/form/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-10 20:23:07
+ */
+export * from "./Button";
+export * from "./Checkbox";
+export * from "./Dialog";
+export * from "./Form";
+export * from "./FormOlustur";
+export * from "./Input";
+export * from "./Label";
+export * from "./SearchableInput";
+export * from "./UploadBase";

package/dist/esm/form/index.js

@@ -0,0 +1,14 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-10 20:23:07
+ */
+export * from "./Button";
+export * from "./Checkbox";
+export * from "./Dialog";
+export * from "./Form";
+export * from "./FormOlustur";
+export * from "./Input";
+export * from "./Label";
+export * from "./SearchableInput";
+export * from "./UploadBase";

package/dist/esm/form/styles/Button.module.css

@@ -0,0 +1,151 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-10 20:25:31
+ */
+
+.button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    appearance: none;
+    user-select: none;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-decoration: none;
+    letter-spacing: 0.03em;
+    text-transform: none;
+    border-radius: 6px;
+    color: rgba(0, 0, 0, 0.87);
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    line-height: inherit;
+    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+    background-color: #e0e0e0;
+    padding: 4px 10px;
+    outline: 0;
+    border: 0;
+    cursor: pointer;
+    white-space: nowrap;
+}
+.button.fullwidth {
+    width: 100%;
+}
+.button[data-button-size="small"] {
+   font-size: 0.875rem;
+    padding: 4px 10px;
+    min-width: 64px;
+    height: 32px;
+}
+
+.button[data-button-size="medium"] {
+    font-size: 1rem;
+    padding: 6px 12px;
+    min-width: 72px;
+    height: 36px;
+}
+
+.button[data-button-size="large"] {
+    font-size: 1.2rem;
+    padding: 8px 16px;
+    min-width: 80px;
+    height: 40px;
+}
+
+.button[hidden] {
+    display: none;
+}
+
+.button[disabled] {
+    opacity: 0.7;
+    box-shadow: inset 0 0 20px #000000ad;
+    cursor: not-allowed;
+}
+.button:focus,
+.button:hover {
+    opacity: 0.9;
+}
+
+.button.primary {
+    color: #fff;
+    background-color: #3772c4;
+    border-color: #1877f2;
+}
+
+.button.secondary {
+    color: #fff;
+    background-color: #6c7573;
+    border-color: #6c757d;
+}
+
+.button.success {
+    color: #fff;
+    background-color: #198754;
+    border-color: #198754;
+}
+
+.button.danger {
+    color: #fff;
+    background-color: #dc3545;
+    border-color: #dc3545;
+}
+
+.button.warning {
+    color: #000;
+    background-color: #ffc107;
+    border-color: #ffc107;
+}
+
+.button.info {
+    color: #000;
+    background-color: #0dcaf0;
+    border-color: #0dcaf0;
+}
+
+.button.light {
+    color: #000;
+    background-color: #f8f9fa;
+    border-color: #f8f9fa;
+}
+
+.button.dark {
+    color: #fff;
+    background-color: #212529;
+    border-color: #212529;
+}
+
+.button.link {
+    box-shadow: none;
+    background-color: transparent;
+    color: inherit;
+}
+
+.iconbutton {
+    padding: 8px;
+    border-radius: 50%;
+    background-color: transparent;
+    box-shadow: none;
+    color: #707274;
+    /* overflow: unset; */
+}
+.iconbutton:focus,
+.iconbutton:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+}
+
+.ripple {
+    content: "";
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple 900ms linear;
+    background-color: rgba(255, 255, 255, 0.7);
+}
+@keyframes ripple {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}