react-better-html 1.1.71 → 1.1.73

package/dist/components/Table.d.ts

@@ -1,45 +0,0 @@
-import { ReactNode } from "react";
-import { ComponentMarginProps, ComponentPropWithRef } from "../types/components";
-import { ToggleInputProps } from "./ToggleInput";
-import { ImageProps } from "./Image";
-type TextColumn<DataItem> = {
-    type: "text";
-    keyName?: keyof DataItem;
-    format?: (item: DataItem, index: number) => string;
-};
-type ElementColumn<DataItem> = {
-    type: "element";
-    render?: (item: DataItem, index: number) => ReactNode;
-};
-type ImageColumn<DataItem> = {
-    type: "image";
-    keyName?: keyof DataItem;
-} & ImageProps;
-type CheckboxColumn = {
-    type: "checkbox";
-} & ToggleInputProps<boolean>;
-export type TableColumn<DataItem> = {
-    label?: string;
-    width?: string | number;
-    minWidth?: string | number;
-    maxWidth?: string | number;
-    align?: "left" | "center" | "right";
-} & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn);
-export type TableProps<DataItem> = {
-    columns: TableColumn<DataItem>[];
-    data: DataItem[];
-    /** @default false */
-    isStriped?: boolean;
-    /** @default false */
-    withStickyHeader?: boolean;
-    /** @default "No data available" */
-    noDataItemsMessage?: string;
-    onClickRow?: (item: DataItem, index: number) => void;
-    onClickAllCheckboxes?: (checked: boolean) => void;
-} & ComponentMarginProps;
-type TableComponentType = {
-    <DataItem>(props: ComponentPropWithRef<HTMLDivElement, TableProps<DataItem>>): React.ReactElement;
-};
-declare const TableComponent: TableComponentType;
-declare const Table: typeof TableComponent;
-export default Table;

package/dist/components/Table.js

@@ -1,159 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = __importStar(require("styled-components"));
-const Div_1 = __importDefault(require("./Div"));
-const ToggleInput_1 = __importDefault(require("./ToggleInput"));
-const Image_1 = __importDefault(require("./Image"));
-const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const Text_1 = __importDefault(require("./Text"));
-const defaultImageWidth = 120;
-const TableStyledComponent = styled_components_1.default.table.withConfig({
-    shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "theme"].includes(prop),
-}) `
-   width: 100%;
-   border-collapse: collapse;
-   border-spacing: 0;
-
-   tr {
-      background-color: ${(props) => props.theme.colors.backgroundContent};
-
-      &.isHeader {
-         background-color: ${(props) => props.theme.colors.backgroundSecondary};
-         font-weight: 700;
-      }
-
-      &.isClickable {
-         cursor: pointer;
-      }
-
-      ${(props) => props.isStriped
-    ? (0, styled_components_1.css) `
-                 &:nth-child(even) {
-                    background-color: ${props.theme.colors.backgroundSecondary};
-                 }
-              `
-    : ""}
-
-      ${(props) => props.withHover
-    ? (0, styled_components_1.css) `
-                 transition: ${props.theme.styles.transition};
-
-                 &:not(.isHeader):hover {
-                    background-color: ${props.theme.colors.backgroundSecondary}20;
-                 }
-              `
-    : ""}
-
-      th {
-         font-size: 18px;
-         text-align: left;
-         padding: ${(props) => props.theme.styles.space}px;
-      }
-
-      td {
-         border-top: 1px solid ${(props) => props.theme.colors.border}60;
-         padding: ${(props) => props.theme.styles.gap}px ${(props) => props.theme.styles.space}px;
-
-         &.noData {
-            text-align: center;
-            padding: ${(props) => props.theme.styles.space}px;
-         }
-      }
-   }
-`;
-const ThStyledComponent = styled_components_1.default.th.withConfig({
-    shouldForwardProp: (prop) => !["width", "minWidth", "maxWidth", "textAlign"].includes(prop),
-}) `
-   ${(props) => (props.width ? `width: ${props.width}px;` : "")}
-   ${(props) => (props.minWidth ? `min-width: ${props.minWidth}px;` : "")}
-   ${(props) => (props.maxWidth ? `max-width: ${props.maxWidth}px;` : "")}
-   ${(props) => (props.textAlign ? `text-align: ${props.textAlign} !important;` : "")}
-`;
-const TdStyledComponent = styled_components_1.default.td.withConfig({
-    shouldForwardProp: (prop) => !["width", "textAlign"].includes(prop),
-}) `
-   ${(props) => (props.textAlign ? `text-align: ${props.textAlign} !important;` : "")}
-`;
-const TableComponent = (0, react_1.forwardRef)(function Table({ columns, data, isStriped, withStickyHeader, noDataItemsMessage = "No data available", onClickRow, onClickAllCheckboxes, ...props }, ref) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const [checkedItems, setCheckedItems] = (0, react_1.useState)([]);
-    const renderCellContent = (0, react_1.useCallback)((column, item, index) => {
-        switch (column.type) {
-            case "text": {
-                const value = column.keyName ? item[column.keyName] : undefined;
-                return column.format ? column.format(item, index) : String(value ?? "");
-            }
-            case "element": {
-                return column.render?.(item, index) ?? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-            }
-            case "image": {
-                const { type, keyName, ...props } = column;
-                const src = keyName ? item[keyName] : undefined;
-                return ((0, jsx_runtime_1.jsx)(Image_1.default, { src: src, width: defaultImageWidth, borderRadius: theme.styles.borderRadius / 2, ...props }));
-            }
-            case "checkbox": {
-                const { type, onChange, ...props } = column;
-                const checkedValue = checkedItems[index];
-                return ((0, jsx_runtime_1.jsx)(ToggleInput_1.default.checkbox, { checked: checkedValue, onChange: (checked, value) => {
-                        setCheckedItems((oldValue) => oldValue.map((isChecked, internalIndex) => (internalIndex === index ? checked : isChecked)));
-                        onChange?.(checked, value);
-                    }, ...props }));
-            }
-            default: {
-                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-            }
-        }
-    }, [theme, checkedItems]);
-    const onClickRowElement = (0, react_1.useCallback)((item, index) => {
-        onClickRow?.(item, index);
-    }, [onClickRow]);
-    const onClickAllCheckboxesElement = (0, react_1.useCallback)((checked) => {
-        onClickAllCheckboxes?.(checked);
-        setCheckedItems(data.map(() => checked));
-    }, [onClickAllCheckboxes, data]);
-    const everythingIsChecked = (0, react_1.useMemo)(() => {
-        return checkedItems.every((checked) => checked) && checkedItems.length === data.length;
-    }, [data, checkedItems]);
-    return ((0, jsx_runtime_1.jsx)(Div_1.default, { border: `1px solid ${theme.colors.border}`, borderRadius: theme.styles.borderRadius * 2, overflow: "auto", ...props, ref: ref, children: (0, jsx_runtime_1.jsxs)(TableStyledComponent, { isStriped: isStriped, withHover: onClickRow !== undefined, withStickyHeader: withStickyHeader, theme: theme, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => ((0, jsx_runtime_1.jsx)(ThStyledComponent, { width: column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, textAlign: column.align, children: column.label ??
-                                (column.type === "checkbox" && onClickAllCheckboxes ? ((0, jsx_runtime_1.jsx)(ToggleInput_1.default.checkbox, { checked: everythingIsChecked, onChange: onClickAllCheckboxesElement })) : ("")) }, column.type + column.label + index))) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: data.length > 0 ? (data.map((item, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: onClickRow ? "isClickable" : undefined, onClick: () => onClickRowElement(item, rowIndex), children: columns.map((column, colIndex) => ((0, jsx_runtime_1.jsx)(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))) }, JSON.stringify(item) + rowIndex)))) : ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { className: "noData", colSpan: columns.length, children: (0, jsx_runtime_1.jsx)(Text_1.default.unknown, { children: noDataItemsMessage }) }) })) })] }) }));
-});
-const Table = (0, react_1.memo)(TableComponent);
-exports.default = Table;

package/dist/components/Text.d.ts

@@ -1,18 +0,0 @@
-import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
-import { OmitProps } from "../types/app";
-export type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
-export type TextProps = {
-    /** @default "p" */
-    as?: TextAs;
-} & OmitProps<React.ComponentProps<"p">, "style"> & ComponentStyle & ComponentHoverStyle;
-type TextComponentType = {
-    (props: ComponentPropWithRef<HTMLParagraphElement, TextProps>): React.ReactElement;
-    unknown: (props: ComponentPropWithRef<HTMLParagraphElement, TextProps>) => React.ReactElement;
-    oneLine: (props: ComponentPropWithRef<HTMLParagraphElement, TextProps>) => React.ReactElement;
-};
-declare const TextComponent: TextComponentType;
-declare const Text: typeof TextComponent & {
-    unknown: typeof TextComponent.unknown;
-    oneLine: typeof TextComponent.oneLine;
-};
-export default Text;

package/dist/components/Text.js

@@ -1,38 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const hooks_1 = require("../utils/hooks");
-const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const TextStyledComponent = styled_components_1.default.div.withConfig({
-    shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop),
-}) `
-   ${(props) => props.normalStyle}
-
-   &:hover {
-      ${(props) => props.hoverStyle}
-   }
-`;
-const TextComponent = (0, react_1.forwardRef)(function Text({ as = "p", children, ...props }, ref) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)(props, theme);
-    const dataProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "data");
-    const ariaProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "aria");
-    const restProps = (0, hooks_1.useComponentPropsWithoutStyle)(props);
-    return ((0, jsx_runtime_1.jsx)(TextStyledComponent, { as: as, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref, children: children }));
-});
-TextComponent.unknown = (0, react_1.forwardRef)(function Unknown(props, ref) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(TextComponent, { fontStyle: "italic", textAlign: "center", color: theme.colors.textSecondary, ref: ref, ...props }));
-});
-TextComponent.oneLine = (0, react_1.forwardRef)(function OneLine(props, ref) {
-    return (0, jsx_runtime_1.jsx)(TextComponent, { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", ref: ref, ...props });
-});
-const Text = (0, react_1.memo)(TextComponent);
-Text.unknown = TextComponent.unknown;
-Text.oneLine = TextComponent.oneLine;
-exports.default = Text;

package/dist/components/ToggleInput.d.ts

@@ -1,20 +0,0 @@
-import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
-import { OmitProps } from "../types/app";
-export type ToggleInputRef = {};
-type InternalToggleInputProps<Value> = {
-    label?: string;
-    labelColor?: string;
-    text?: string;
-    errorText?: string;
-    infoText?: string;
-    value?: Value;
-    onChange?: (checked: boolean, value?: Value) => void;
-} & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange"> & ComponentStyle & ComponentHoverStyle;
-export type ToggleInputProps<Value> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
-type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
-declare const _default: {
-    checkbox: ToggleInputComponentType;
-    radiobutton: ToggleInputComponentType;
-    switch: ToggleInputComponentType;
-};
-export default _default;

package/dist/components/ToggleInput.js

@@ -1,161 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const hooks_1 = require("../utils/hooks");
-const Text_1 = __importDefault(require("./Text"));
-const Div_1 = __importDefault(require("./Div"));
-const Icon_1 = __importDefault(require("./Icon"));
-const Label_1 = __importDefault(require("./Label"));
-const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const componentSize = 26;
-const switchComponentBallGap = 3;
-const switchComponentMouseDownDifference = 4;
-const InputElement = styled_components_1.default.input.withConfig({
-    shouldForwardProp: (prop) => !["theme", "normalStyle", "hoverStyle"].includes(prop),
-}) `
-   position: relative;
-   appearance: none;
-   width: ${componentSize}px;
-   height: ${componentSize}px;
-   background-color: ${(props) => props.theme.colors.backgroundContent};
-   border: 1px solid ${(props) => props.theme.colors.border};
-   border-radius: ${(props) => props.theme.styles.borderRadius / 2}px;
-   cursor: pointer;
-   transition: ${(props) => props.theme.styles.transition};
-   flex-shrink: 0;
-
-   &[type="radio"] {
-      border-radius: 999px;
-   }
-
-   &:checked {
-      background-color: ${(props) => props.theme.colors.primary};
-      border-color: ${(props) => props.theme.colors.primary};
-   }
-
-   &:disabled {
-      filter: brightness(0.9);
-      cursor: not-allowed;
-   }
-
-   ${(props) => props.normalStyle}
-
-   &:hover {
-      ${(props) => props.hoverStyle}
-   }
-`;
-const SwitchElement = styled_components_1.default.div.withConfig({
-    shouldForwardProp: (prop) => !["theme", "checked", "disabled", "isMouseDown", "normalStyle", "hoverStyle"].includes(prop),
-}) `
-   --width: ${(props) => componentSize * 2 - props.theme.styles.gap / 2}px;
-   --ball-size: ${componentSize - switchComponentBallGap * 2}px;
-
-   position: relative;
-   width: var(--width);
-   height: ${componentSize}px;
-   background-color: ${(props) => (props.checked ? props.theme.colors.primary : props.theme.colors.border)};
-   border-radius: 999px;
-   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
-   opacity: ${(props) => (props.disabled ? 0.5 : 1)};
-   transition: ${(props) => props.theme.styles.transition};
-
-   &::before {
-      content: "";
-      position: absolute;
-      width: ${(props) => componentSize - switchComponentBallGap * 2 + (props.isMouseDown ? switchComponentMouseDownDifference : 0)}px;
-      height: ${componentSize - switchComponentBallGap * 2}px;
-      background-color: ${(props) => props.theme.colors.base};
-      border-radius: 999px;
-      top: ${switchComponentBallGap}px;
-      left: ${switchComponentBallGap}px;
-      transform: translateX(
-         ${(props) => props.checked
-    ? `calc(var(--width) - ${componentSize + (props.isMouseDown ? switchComponentMouseDownDifference : 0)}px)`
-    : "0px"}
-      );
-      transition: ${(props) => props.theme.styles.transition};
-   }
-
-   &.react-better-html-color-theme-switch-with-moon {
-      &::after {
-         content: "";
-         position: absolute;
-         width: ${(props) => componentSize -
-    switchComponentBallGap * 2 +
-    (props.isMouseDown ? switchComponentMouseDownDifference : 0)}px;
-         height: ${componentSize - switchComponentBallGap * 2}px;
-         background-color: ${(props) => (props.checked ? props.theme.colors.primary : "transparent")};
-         border-radius: 999px;
-         top: ${switchComponentBallGap}px;
-         left: ${switchComponentBallGap}px;
-         transform: translateX(
-            ${(props) => props.checked
-    ? `calc(var(--width) - ${componentSize + (props.isMouseDown ? switchComponentMouseDownDifference * 2 : 0)}px - calc(var(--ball-size) / 3))`
-    : "0px"}
-         );
-         transition: ${(props) => props.theme.styles.transition};
-      }
-   }
-
-   ${(props) => props.normalStyle}
-
-   &:hover {
-      ${(props) => props.hoverStyle}
-   }
-`;
-const ToggleInputComponent = (0, react_1.forwardRef)(function ToggleInput({ label, labelColor, text, errorText, infoText, value, onChange, checked: controlledChecked, color, required, ...props }, ref) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)(props, theme, true);
-    const styledComponentStylesWithExcluded = (0, hooks_1.useComponentPropsWithExcludedStyle)(props);
-    const dataProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "data");
-    const ariaProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "aria");
-    const restProps = (0, hooks_1.useComponentPropsWithoutStyle)(props);
-    const [internalChecked, setInternalChecked] = (0, react_1.useState)(false);
-    const onChangeElement = (0, react_1.useCallback)((event) => {
-        const newIsChecked = event.target.checked;
-        if (controlledChecked === undefined)
-            setInternalChecked(newIsChecked);
-        onChange?.(newIsChecked, value);
-    }, [onChange, controlledChecked, value]);
-    const checked = controlledChecked ?? internalChecked;
-    const onClickText = (0, react_1.useCallback)(() => {
-        const newIsChecked = !checked;
-        if (controlledChecked === undefined)
-            setInternalChecked(newIsChecked);
-        onChange?.(newIsChecked, value);
-    }, [checked, controlledChecked, onChange, value]);
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap, ...styledComponentStylesWithExcluded, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, color: labelColor, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(InputElement, { theme: theme, type: props.type ?? "checkbox", checked: checked, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }), props.type === "checkbox" ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "check", position: "absolute", top: "50%", left: "50%", color: theme.colors.base, size: 14, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none", transition: theme.styles.transition })) : props.type === "radio" ? ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", width: 10, height: 10, top: "50%", left: "50%", backgroundColor: theme.colors.base, borderRadius: 999, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none" })) : undefined] }), text && ((0, jsx_runtime_1.jsxs)(Text_1.default, { color: color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [text, required && !label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] }))] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : labelColor ?? theme.colors.textSecondary, children: errorText || infoText }))] }));
-});
-exports.default = {
-    checkbox: (0, react_1.forwardRef)(function Checkbox(props, ref) {
-        return (0, jsx_runtime_1.jsx)(ToggleInputComponent, { type: "checkbox", ref: ref, ...props });
-    }),
-    radiobutton: (0, react_1.forwardRef)(function RadioButton(props, ref) {
-        return (0, jsx_runtime_1.jsx)(ToggleInputComponent, { type: "radio", ref: ref, ...props });
-    }),
-    switch: (0, react_1.forwardRef)(function Switch({ label, labelColor, errorText, infoText, disabled, value, onChange, checked: controlledChecked, required, ...props }, ref) {
-        const theme = (0, BetterHtmlProvider_1.useTheme)();
-        const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)(props, theme, true);
-        const styledComponentStylesWithExcluded = (0, hooks_1.useComponentPropsWithExcludedStyle)(props);
-        const dataProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "data");
-        const ariaProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "aria");
-        const restProps = (0, hooks_1.useComponentPropsWithoutStyle)(props);
-        const [internalChecked, setInternalChecked] = (0, hooks_1.useBooleanState)();
-        const [isMouseDown, setIsMouseDown] = (0, hooks_1.useBooleanState)();
-        const checked = controlledChecked ?? internalChecked;
-        const onClickElement = (0, react_1.useCallback)(() => {
-            if (disabled)
-                return;
-            const newIsChecked = !checked;
-            if (controlledChecked === undefined)
-                setInternalChecked.setState(newIsChecked);
-            onChange?.(newIsChecked, value);
-        }, [disabled, checked, onChange, controlledChecked, value]);
-        return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "fit-content", gap: theme.styles.gap, ...styledComponentStylesWithExcluded, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, color: labelColor, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsx)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, onMouseDown: setIsMouseDown.setTrue, onMouseUp: setIsMouseDown.setFalse, onMouseOut: setIsMouseDown.setFalse, onTouchStart: setIsMouseDown.setTrue, onTouchEnd: setIsMouseDown.setFalse, onTouchCancel: setIsMouseDown.setFalse, children: (0, jsx_runtime_1.jsx)(SwitchElement, { theme: theme, checked: checked, disabled: disabled ?? false, isMouseDown: isMouseDown, onClick: onClickElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }) }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : labelColor ?? theme.colors.textSecondary, children: errorText || infoText }))] }));
-    }),
-};

package/dist/constants/app.d.ts

@@ -1,2 +0,0 @@
-import { AppConfig } from "../types/config";
-export declare const appConfig: AppConfig;

package/dist/constants/app.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.appConfig = void 0;
-exports.appConfig = {
-    contentMaxWidth: 1100,
-};

package/dist/constants/assets.d.ts

@@ -1,2 +0,0 @@
-import { AssetsConfig } from "../types/asset";
-export declare const assets: AssetsConfig;

package/dist/constants/assets.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.assets = void 0;
-exports.assets = {
-    logo: "",
-};

package/dist/constants/countries.d.ts

@@ -1,2 +0,0 @@
-import { Country } from "../types/countries";
-export declare const countries: Country[];