@1doc/1ds-react 0.0.1

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,46 @@
+import './Badge.css';
+/**
+ * Componente Badge para exibir status, rótulos e contagens.
+ * Suporta múltiplas variantes de cor, tamanhos e estilos.
+ */
+export interface BadgeProps {
+    /**
+     * Variação de cor semântica.
+     * @default 'neutral'
+     */
+    variant?: "neutral" | "positive" | "negative" | "info" | "primary";
+    /**
+     * Tamanho do badge.
+     * LG: 3rem, MD: 2rem, SM: 1.5rem, XS: 1rem, PILL: 0.75rem.
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg" | "xs" | "pill";
+    /**
+     * Estilo visual do badge.
+     * @default 'soft'
+     */
+    type?: "solid" | "soft" | "outlined";
+    /**
+     * Conteúdo do ícone à esquerda.
+     * - React: Passe um elemento React (ex: `<Icon />`).
+     * - Vue: Utilize o slot `#iconLeft`.
+     */
+    iconLeft?: any;
+    /**
+     * Conteúdo do ícone à direita.
+     * - React: Passe um elemento React (ex: `<Icon />`).
+     * - Vue: Utilize o slot `#iconRight`.
+     */
+    iconRight?: any;
+    /**
+     * Classes CSS adicionais.
+     */
+    className?: string;
+    /**
+     * Conteúdo textual do badge.
+     */
+    children?: any;
+    [key: string]: any;
+}
+declare function Badge(props: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export default Badge;

package/dist/components/Badge/Badge.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Badge.css';
+function Badge(props) {
+    function classes() {
+        return [
+            "umds-badge",
+            `umds-badge--${props.variant || "neutral"}`,
+            `umds-badge--${props.size || "md"}`,
+            `umds-badge--${props.type || "soft"}`,
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    return (_jsxs("span", { ...props, className: classes(), children: [_jsx("span", { className: "umds-badge__icon", children: _jsx(_Fragment, { children: props.iconLeft }) }), _jsx(_Fragment, { children: props.children || "{props.children}" }), _jsx("span", { className: "umds-badge__icon", children: _jsx(_Fragment, { children: props.iconRight }) })] }));
+}
+export default Badge;

package/dist/components/Button/Button.css

@@ -0,0 +1,199 @@
+.umds-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--umds-primitive-spacing-nano);
+    border-radius: var(--umds-primitive-border-radius-sm);
+    /* Updated from 4px to match Figma */
+    padding: 0 var(--umds-primitive-spacing-xxxs);
+    height: var(--umds-primitive-spacing-sm);
+    cursor: pointer;
+    border: 1px solid transparent;
+    font-family: var(--umds-semantic-font-family-base, inherit);
+    font-weight: var(--umds-primitive-font-weight-semibold);
+    /* Updated from 500 to match Figma (Semibold) */
+    transition: all 0.2s;
+    font-size: var(--umds-primitive-font-size-xxs);
+    line-height: 1;
+}
+
+
+/* Focus States */
+.umds-button:focus-visible {
+    outline: 2px solid var(--umds-semantic-color-neutral-dark-down);
+    outline-offset: 2px;
+    box-shadow: none;
+}
+
+/* Primary */
+.umds-button--primary {
+    background-color: var(--umds-semantic-color-primary-pure);
+    color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-button--primary:hover:not(:disabled) {
+    background-color: var(--umds-semantic-color-primary-dark);
+}
+
+.umds-button--primary:disabled {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    cursor: not-allowed;
+    color: var(--umds-semantic-color-neutral-dark-medium);
+}
+
+/* Secondary */
+.umds-button--secondary {
+    background-color: transparent;
+    border-color: var(--umds-semantic-color-primary-pure);
+    color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-button--secondary:hover:not(:disabled) {
+    background-color: var(--umds-semantic-color-primary-light);
+}
+
+.umds-button--secondary:disabled {
+    border-color: var(--umds-semantic-color-neutral-light-medium);
+    color: var(--umds-semantic-color-neutral-dark-medium);
+    cursor: not-allowed;
+}
+
+/* Sizes */
+.umds-button--sm {
+    height: var(--umds-primitive-spacing-xs);
+    padding: 0 12px;
+    font-size: var(--umds-primitive-font-size-xxxs);
+}
+
+.umds-button--md {
+    height: var(--umds-primitive-spacing-sm);
+    padding: 0 var(--umds-primitive-spacing-xxxs);
+    font-size: var(--umds-primitive-font-size-xxs);
+}
+
+.umds-button--lg {
+    height: var(--umds-primitive-spacing-md);
+    padding: 0 var(--umds-primitive-spacing-xxs);
+    font-size: var(--umds-primitive-font-size-xs);
+}
+
+/* Neutral */
+.umds-button--neutral {
+    background-color: var(--umds-semantic-color-neutral-light-pure);
+    border-color: var(--umds-semantic-color-neutral-dark-up);
+    color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-button--neutral:hover:not(:disabled) {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-button--neutral:disabled {
+    background-color: var(--umds-semantic-color-neutral-light-pure);
+    border-color: var(--umds-semantic-color-neutral-light-down);
+    color: var(--umds-semantic-color-neutral-light-down);
+    cursor: not-allowed;
+}
+
+/* Text */
+.umds-button--text {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-button--text:hover:not(:disabled) {
+    background-color: var(--umds-semantic-color-primary-light);
+}
+
+.umds-button--text:disabled {
+    color: var(--umds-semantic-color-neutral-dark-medium);
+    cursor: not-allowed;
+}
+
+/* Danger */
+.umds-button--danger {
+    background-color: var(--umds-semantic-color-feedback-negative-pure);
+    color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-button--danger:hover:not(:disabled) {
+    background-color: var(--umds-semantic-color-feedback-negative-dark);
+}
+
+.umds-button--danger:disabled {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    color: var(--umds-semantic-color-neutral-dark-medium);
+    cursor: not-allowed;
+}
+
+/* Danger Outlined */
+.umds-button--danger-outlined {
+    background-color: transparent;
+    border-color: var(--umds-semantic-color-feedback-negative-pure);
+    color: var(--umds-semantic-color-feedback-negative-dark);
+}
+
+.umds-button--danger-outlined:hover:not(:disabled) {
+    background-color: var(--umds-semantic-color-feedback-negative-light);
+}
+
+.umds-button--danger-outlined:disabled {
+    border-color: var(--umds-semantic-color-neutral-light-medium);
+    color: var(--umds-semantic-color-neutral-dark-medium);
+    cursor: not-allowed;
+}
+
+/* Icon */
+.umds-button--icon {
+    background-color: transparent;
+    color: var(--umds-semantic-color-neutral-dark-down);
+    padding: 0;
+    min-width: unset;
+}
+
+.umds-button--icon:hover:not(:disabled) {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-button--icon.umds-button--sm {
+    width: 32px;
+}
+
+.umds-button--icon.umds-button--md {
+    width: 40px;
+}
+
+.umds-button--icon.umds-button--lg {
+    width: 48px;
+    /* Assuming 48px for large icon button, Figma said 40 but text buttons are 48? Need to double check, keeping consistent with height for now */
+}
+
+.umds-button--icon:disabled {
+    color: var(--umds-semantic-color-neutral-light-down);
+    cursor: not-allowed;
+}
+
+/* Full Width */
+.umds-button--full-width {
+    width: 100%;
+}
+
+/* Loading */
+.umds-button__loading {
+    animation: spin 1s linear infinite;
+    height: 1em;
+    width: 1em;
+    min-width: 1em;
+    /* Ensure it doesn't shrink */
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,23 @@
+import './Button.css';
+/**
+ * Button component properties
+ * @property {string} [aria-label] - Descrição acessível do botão. OBRIGATÓRIO se o botão não possuir texto visível (ex: icon-only). Caso não fornecido, o texto interno será usado.
+ */
+export interface ButtonProps {
+    variant?: "primary" | "secondary" | "neutral" | "text" | "danger" | "danger-outlined" | "icon";
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    type?: "button" | "submit" | "reset";
+    children?: any;
+    onClick?: (event: any) => void;
+    className?: string;
+    startIcon?: any;
+    endIcon?: any;
+    loading?: boolean;
+    loadingIcon?: any;
+    loadingPosition?: "start" | "end" | "center";
+    fullWidth?: boolean;
+    [key: string]: any;
+}
+declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/components/Button/Button.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './Button.css';
+"use client";
+import Icon from "../Icon/Icon";
+function Button(props) {
+    function classes() {
+        return [
+            "umds-button",
+            `umds-button--${props.variant || "primary"}`,
+            `umds-button--${props.size || "md"}`,
+            props.fullWidth ? "umds-button--full-width" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function showStartIcon() {
+        const isLoading = props.loading;
+        const position = props.loadingPosition || "center";
+        return !isLoading || (isLoading && position === "end");
+    }
+    function showEndIcon() {
+        const isLoading = props.loading;
+        const position = props.loadingPosition || "center";
+        return !isLoading || (isLoading && position === "start");
+    }
+    function showLoadingAtStart() {
+        return props.loading && props.loadingPosition === "start";
+    }
+    function showLoadingAtEnd() {
+        return props.loading && props.loadingPosition === "end";
+    }
+    function showLoadingAtCenter() {
+        return (props.loading &&
+            (props.loadingPosition === "center" || !props.loadingPosition));
+    }
+    function showChildren() {
+        const isLoading = props.loading;
+        const position = props.loadingPosition || "center";
+        return !isLoading || (isLoading && position !== "center");
+    }
+    return (_jsxs("button", { ...props, type: props.type || "button", disabled: props.disabled, onClick: (event) => props.onClick?.(event), className: classes(), children: [showLoadingAtStart() ? (_jsx(Icon, { className: "umds-button__loading", variant: "inherit", name: typeof props.loadingIcon === "string"
+                    ? props.loadingIcon
+                    : props.loadingIcon
+                        ? undefined
+                        : "refresh", component: typeof props.loadingIcon !== "string"
+                    ? props.loadingIcon
+                    : undefined, size: props.size })) : null, showStartIcon() ? (_jsx(_Fragment, { children: typeof props.startIcon === "string" ? (_jsx(Icon, { variant: "inherit", name: props.startIcon, size: props.size })) : (_jsx(_Fragment, { children: _jsx(_Fragment, { children: props.startIcon }) })) })) : null, showLoadingAtCenter() ? (_jsx(Icon, { className: "umds-button__loading", variant: "inherit", name: typeof props.loadingIcon === "string"
+                    ? props.loadingIcon
+                    : props.loadingIcon
+                        ? undefined
+                        : "refresh", component: typeof props.loadingIcon !== "string"
+                    ? props.loadingIcon
+                    : undefined, size: props.size })) : null, showChildren() ? _jsx(_Fragment, { children: props.children }) : null, showEndIcon() ? (_jsx(_Fragment, { children: typeof props.endIcon === "string" ? (_jsx(Icon, { variant: "inherit", name: props.endIcon, size: props.size })) : (_jsx(_Fragment, { children: _jsx(_Fragment, { children: props.endIcon }) })) })) : null, showLoadingAtEnd() ? (_jsx(Icon, { className: "umds-button__loading", variant: "inherit", name: typeof props.loadingIcon === "string"
+                    ? props.loadingIcon
+                    : props.loadingIcon
+                        ? undefined
+                        : "refresh", component: typeof props.loadingIcon !== "string"
+                    ? props.loadingIcon
+                    : undefined, size: props.size })) : null] }));
+}
+export default Button;

package/dist/components/Checkbox/Checkbox.css

@@ -0,0 +1,122 @@
+/* Main Container */
+.umds-checkbox {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    font-family: var(--umds-semantic-font-family-base, inherit);
+    gap: var(--umds-primitive-spacing-nano);
+}
+
+.umds-checkbox--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+/* Input (Hidden visually but accessible) */
+.umds-checkbox__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+}
+
+/* Control (Box) */
+.umds-checkbox__control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--umds-semantic-color-neutral-dark-up);
+    border-radius: var(--umds-primitive-border-radius-xxs);
+    background-color: var(--umds-semantic-color-background-white);
+    transition: all 0.2s ease-in-out;
+    flex-shrink: 0;
+}
+
+/* Sizes */
+.umds-checkbox--small .umds-checkbox__control {
+    width: var(--umds-primitive-spacing-xxxs);
+    height: var(--umds-primitive-spacing-xxxs);
+}
+
+.umds-checkbox--medium .umds-checkbox__control {
+    width: 20px;
+    height: 20px;
+}
+
+.umds-checkbox--large .umds-checkbox__control {
+    width: var(--umds-primitive-spacing-xxs);
+    height: var(--umds-primitive-spacing-xxs);
+}
+
+/* Checked State */
+.umds-checkbox--checked .umds-checkbox__control,
+.umds-checkbox--indeterminate .umds-checkbox__control {
+    background-color: var(--umds-semantic-color-primary-pure);
+    border-color: var(--umds-semantic-color-primary-dark);
+    color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+/* Hover State (not disabled) - Default (Unchecked) */
+.umds-checkbox:not(.umds-checkbox--disabled):hover .umds-checkbox__control {
+    border-color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+/* Hover State - Checked/Indeterminate */
+.umds-checkbox--checked:not(.umds-checkbox--disabled):hover .umds-checkbox__control,
+.umds-checkbox--indeterminate:not(.umds-checkbox--disabled):hover .umds-checkbox__control {
+    background-color: var(--umds-semantic-color-primary-dark);
+    border-color: var(--umds-semantic-color-primary-dark);
+}
+
+/* Focus State */
+.umds-checkbox__input:focus+.umds-checkbox__control {
+    /* Using primary medium for focus ring as per standard, unless specified otherwise */
+    box-shadow: 0 0 0 2px var(--umds-semantic-color-background-white), 0 0 0 4px var(--umds-semantic-color-primary-medium);
+}
+
+/* Invalid/Error State */
+.umds-checkbox--invalid .umds-checkbox__control {
+    border-color: var(--umds-semantic-color-feedback-negative-pure);
+}
+
+.umds-checkbox--invalid.umds-checkbox--checked .umds-checkbox__control,
+.umds-checkbox--invalid.umds-checkbox--indeterminate .umds-checkbox__control {
+    background-color: var(--umds-semantic-color-feedback-negative-pure);
+    border-color: var(--umds-semantic-color-feedback-negative-pure);
+}
+
+/* Content (Label + Description) */
+.umds-checkbox__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+/* Adjust top padding if needed to align with box */
+.umds-checkbox--small .umds-checkbox__content {
+    padding-top: 0;
+}
+
+.umds-checkbox__label {
+    /* Styles handled by Text component */
+    display: inline-block;
+}
+
+.umds-checkbox__description {
+    /* Styles handled by Text component */
+    margin-top: 2px;
+}
+
+/* Icon Color Override because Icon component might set its own */
+.umds-checkbox--checked .umds-checkbox__control .umds-icon,
+.umds-checkbox--indeterminate .umds-checkbox__control .umds-icon {
+    color: currentColor;
+    /* Inherit white */
+}
+
+/* CheckButton Variant */
+.umds-checkbox--button {
+    gap: 0;
+}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,21 @@
+import './Checkbox.css';
+export interface CheckboxProps {
+    checked?: any;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    indeterminate?: boolean;
+    invalid?: boolean;
+    size?: "small" | "medium" | "large";
+    variant?: "default" | "button";
+    name?: string;
+    value?: string;
+    id?: string;
+    label?: string;
+    description?: string;
+    className?: string;
+    onChange?: (checked: boolean) => void;
+    [key: string]: any;
+}
+declare function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Checkbox.css';
+"use client";
+import { useState } from "react";
+import Icon from "../Icon/Icon";
+import Text from "../Text/Text";
+function Checkbox(props) {
+    const [internalChecked, setInternalChecked] = useState(() => props.defaultChecked || false);
+    function isChecked() {
+        return props.checked !== undefined ? props.checked : internalChecked;
+    }
+    function handleChange(event) {
+        if (props.disabled)
+            return;
+        const newValue = event.target.checked;
+        setInternalChecked(newValue);
+        if (typeof props.onChange === "function") {
+            props.onChange(newValue);
+        }
+    }
+    function classes() {
+        const checkedValue = props.checked !== undefined ? props.checked : internalChecked;
+        return [
+            "umds-checkbox",
+            `umds-checkbox--${props.size || "medium"}`,
+            props.variant === "button" ? "umds-checkbox--button" : "",
+            props.disabled ? "umds-checkbox--disabled" : "",
+            props.invalid ? "umds-checkbox--invalid" : "",
+            checkedValue ? "umds-checkbox--checked" : "",
+            props.indeterminate ? "umds-checkbox--indeterminate" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function iconSize() {
+        if (props.size === "small")
+            return "sm";
+        if (props.size === "large")
+            return "lg";
+        return "md";
+    }
+    return (_jsxs("label", { className: classes(), children: [_jsx("input", { type: "checkbox", className: "umds-checkbox__input", checked: isChecked(), disabled: props.disabled, required: props.required, name: props.name, value: props.value, id: props.id, onChange: (event) => handleChange(event) }), _jsxs("span", { className: "umds-checkbox__control", children: [isChecked() && !props.indeterminate ? (_jsx(Icon, { name: "check", size: iconSize() })) : null, props.indeterminate ? _jsx(Icon, { name: "minus", size: iconSize() }) : null] }), (props.label || props.description) && props.variant !== "button" ? (_jsxs("span", { className: "umds-checkbox__content", children: [props.label ? (_jsx(Text, { as: "span", className: "umds-checkbox__label", variant: props.size === "small"
+                            ? "caption"
+                            : props.size === "large"
+                                ? "body1"
+                                : "body2", children: props.label })) : null, props.description ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", className: "umds-checkbox__description", children: props.description })) : null] })) : null] }));
+}
+export default Checkbox;

package/dist/components/Divider/Divider.css

@@ -0,0 +1,81 @@
+.umds-divider {
+    border: none;
+    background-color: transparent;
+    margin: 0;
+    flex-shrink: 0;
+    padding: 0;
+}
+
+/* Orientation */
+.umds-divider--horizontal {
+    display: block;
+    width: 100%;
+    border-top: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-divider--vertical {
+    display: inline-block;
+    height: 100%;
+    min-height: 1em;
+    border-left: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+    vertical-align: middle;
+}
+
+/* Variants */
+.umds-divider--dashed.umds-divider--horizontal {
+    border-top-style: dashed;
+}
+
+.umds-divider--dashed.umds-divider--vertical {
+    border-left-style: dashed;
+}
+
+.umds-divider--dotted.umds-divider--horizontal {
+    border-top-style: dotted;
+}
+
+.umds-divider--dotted.umds-divider--vertical {
+    border-left-style: dotted;
+}
+
+/* Spacing */
+
+/* Sem espaçamento explícito */
+.umds-divider--spacing-none {
+    margin: 0;
+}
+
+/* Horizontal Spacing */
+.umds-divider--horizontal.umds-divider--spacing-sm {
+    margin-top: var(--umds-primitive-spacing-xs);
+    /* 8px */
+    margin-bottom: var(--umds-primitive-spacing-xs);
+}
+
+.umds-divider--horizontal.umds-divider--spacing-md {
+    margin-top: var(--umds-primitive-spacing-md);
+    /* 16px */
+    margin-bottom: var(--umds-primitive-spacing-md);
+}
+
+.umds-divider--horizontal.umds-divider--spacing-lg {
+    margin-top: var(--umds-primitive-spacing-xl);
+    /* 24px */
+    margin-bottom: var(--umds-primitive-spacing-xl);
+}
+
+/* Vertical Spacing */
+.umds-divider--vertical.umds-divider--spacing-sm {
+    margin-left: var(--umds-primitive-spacing-xs);
+    margin-right: var(--umds-primitive-spacing-xs);
+}
+
+.umds-divider--vertical.umds-divider--spacing-md {
+    margin-left: var(--umds-primitive-spacing-md);
+    margin-right: var(--umds-primitive-spacing-md);
+}
+
+.umds-divider--vertical.umds-divider--spacing-lg {
+    margin-left: var(--umds-primitive-spacing-xl);
+    margin-right: var(--umds-primitive-spacing-xl);
+}

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,18 @@
+import './Divider.css';
+/**
+ * Divider component to separate content
+ * @property {string} orientation - Orientação do divider: 'horizontal' ou 'vertical'
+ * @property {string} variant - Estilo da linha: 'solid', 'dashed', 'dotted'
+ * @property {string} spacing - Espaçamento ao redor: 'none', 'sm', 'md', 'lg'
+ * @property {string | number} thickness - Espessura da linha
+ */
+export interface DividerProps {
+    orientation?: "horizontal" | "vertical";
+    variant?: "solid" | "dashed" | "dotted";
+    spacing?: "none" | "sm" | "md" | "lg";
+    thickness?: string | number;
+    className?: string;
+    [key: string]: any;
+}
+declare function Divider(props: DividerProps): import("react/jsx-runtime").JSX.Element;
+export default Divider;

package/dist/components/Divider/Divider.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Divider.css';
+function Divider(props) {
+    function classes() {
+        return [
+            "umds-divider",
+            `umds-divider--${props.orientation || "horizontal"}`,
+            `umds-divider--${props.variant || "solid"}`,
+            props.spacing ? `umds-divider--spacing-${props.spacing}` : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function dividerStyle() {
+        const thickness = props.thickness;
+        if (!thickness)
+            return {};
+        const value = typeof thickness === "number" ? `${thickness}px` : thickness;
+        return {
+            "--divider-size": value,
+        };
+    }
+    return (_jsx("hr", { style: dividerStyle(), "aria-orientation": props.orientation || "horizontal", className: classes() }));
+}
+export default Divider;