@byline/ui 0.9.3 → 0.10.1

package/dist/components/inputs/calendar_module.css

@@ -0,0 +1,223 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  .day-picker-HSdX8f {
+    padding: var(--spacing-12);
+  }
+
+  .months-C3oVse {
+    gap: var(--spacing-16);
+    flex-direction: column;
+    display: flex;
+    position: relative;
+  }
+
+  .months-caption-NbN6cs {
+    justify-content: center;
+    align-items: center;
+    height: 1.75rem;
+    display: flex;
+    position: relative;
+  }
+
+  .dropdowns-uLBfnD {
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-8);
+    width: 100%;
+    display: flex;
+  }
+
+  .select-trigger-voJxnW {
+    width: 100%;
+    height: 2.25rem;
+    font-size: .875rem;
+  }
+
+  .select-content-ppy0BT {
+    z-index: 100;
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  .select-item-ycOfyG {
+    cursor: pointer;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding: .25rem .5rem;
+    font-size: .875rem;
+    display: flex;
+  }
+
+  .select-item-ycOfyG:hover {
+    background-color: var(--gray-50);
+    color: var(--foreground);
+  }
+
+  .select-chevrons-IbajEF {
+    stroke: var(--primary-400);
+    opacity: .7;
+  }
+
+  .scroll-area-N3USY2 {
+    border: 1px solid var(--border-color);
+    background-color: var(--background);
+    text-align: center;
+    width: 120px;
+    height: 240px;
+  }
+
+  .disabled-npyvWL {
+    color: var(--muted);
+    opacity: .5;
+  }
+
+  .hidden-ebyo7i {
+    visibility: hidden;
+    flex: 1;
+  }
+
+  .outside-r9h4xf {
+    color: var(--muted);
+    opacity: .5;
+  }
+
+  .outside-r9h4xf[aria-selected="true"] {
+    color: var(--muted);
+    opacity: .3;
+  }
+
+  .footer-eySpMW {
+    padding-top: var(--spacing-12);
+    font-size: .875rem;
+  }
+
+  .weekdays-YnSU_N {
+    display: flex;
+  }
+
+  .weekday-gss8NQ {
+    width: 2.25rem;
+    color: var(--muted);
+    font-size: .875rem;
+    font-weight: normal;
+  }
+
+  .caption-label-OqO5t0 {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: .875rem;
+    font-weight: 500;
+    overflow: hidden;
+  }
+
+  .month-grid-W4BMbT {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: var(--spacing-16);
+  }
+
+  .week-g7SwK1 {
+    margin-top: var(--spacing-8);
+    align-items: flex-start;
+    width: max-content;
+    display: flex;
+  }
+
+  .day-uPE3oG {
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    padding: 0;
+    font-size: .875rem;
+    display: flex;
+  }
+
+  .day-uPE3oG > button {
+    color: var(--foreground);
+  }
+
+  .today-gD7ocX > button {
+    border: solid 1px var(--stroke-primary);
+    color: var(--foreground);
+  }
+
+  .day-uPE3oG > button:hover, .day-selected-vu_GPN > button {
+    background-color: var(--fill-primary-strong);
+    color: #fff;
+  }
+
+  .day-button-vnVFgU {
+    border-radius: var(--border-radius-md);
+    width: 2.25rem;
+    height: 2.25rem;
+    padding: 0;
+    font-weight: normal;
+    transition: none;
+  }
+
+  .day-button-vnVFgU[aria-selected="true"] {
+    opacity: 1;
+  }
+
+  .button-range-OxB5YX {
+    background-color: var(--fill-primary-weak);
+    color: var(--foreground);
+  }
+
+  .button-range-OxB5YX > button {
+    background-color: var(--fill-primary-strong);
+    color: #fff;
+  }
+
+  .button-range-OxB5YX > button:hover {
+    background-color: var(--fill-primary-strong);
+    color: var(--foreground);
+  }
+
+  .range-start-CNcwzc {
+    border-top-left-radius: var(--border-radius-md);
+    border-bottom-left-radius: var(--border-radius-md);
+  }
+
+  .range-end-tRvpMD {
+    border-top-right-radius: var(--border-radius-md);
+    border-bottom-right-radius: var(--border-radius-md);
+  }
+
+  .range-middle-ECpyyL {
+    background-color: var(--fill-primary-weak);
+    color: var(--foreground);
+  }
+
+  .range-middle-ECpyyL > button, .range-middle-ECpyyL > button:hover {
+    color: var(--foreground);
+    background-color: #0000;
+  }
+
+  @media (min-width: 40rem) {
+    .months-C3oVse {
+      flex-direction: row;
+    }
+  }
+
+  :is(.dark, [data-theme="dark"]) .select-content-ppy0BT, :is(.dark, [data-theme="dark"]) .scroll-area-N3USY2 {
+    background-color: var(--canvas-800);
+    color: var(--foreground);
+  }
+
+  :is(.dark, [data-theme="dark"]) .select-item-ycOfyG:hover {
+    background-color: var(--primary-400);
+    color: var(--foreground);
+  }
+
+  :is(.dark, [data-theme="dark"]) .select-chevrons-IbajEF {
+    stroke: var(--primary-200);
+    opacity: .7;
+  }
+}
+

package/dist/components/inputs/checkbox-group.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+export interface CheckboxGroupProps {
+    groupName: string;
+    className?: string;
+    checkBoxClasses?: string;
+    checkBoxes: {
+        id: string;
+        label: string;
+    }[];
+    defaultValues?: string[];
+    controlledValue?: string;
+    disabled?: boolean;
+    onChange?: (selectedRoles: string[]) => void;
+}
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+//# sourceMappingURL=checkbox-group.d.ts.map

package/dist/components/inputs/checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/checkbox-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC7C;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgEtD,CAAA"}

package/dist/components/inputs/checkbox-group.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import classnames from "classnames";
+import { Checkbox } from "./checkbox.js";
+import checkbox_group_module from "./checkbox-group.module.js";
+const CheckboxGroup = ({ groupName, className, checkBoxClasses, checkBoxes, defaultValues, controlledValue, disabled = false, onChange })=>{
+    let initialValue = [];
+    if (void 0 !== controlledValue && controlledValue.length > 0) initialValue = controlledValue.split(',');
+    else if (void 0 !== defaultValues) initialValue = defaultValues;
+    const [selected, setSelected] = useState(initialValue);
+    useEffect(()=>{
+        if (void 0 !== controlledValue && controlledValue.length > 0) setSelected(controlledValue.split(','));
+        else void 0 !== defaultValues ? setSelected(defaultValues) : setSelected([]);
+    }, [
+        controlledValue,
+        defaultValues
+    ]);
+    const handleCheckboxChange = (id, checked)=>{
+        const s = [
+            ...selected
+        ];
+        if (true === checked) {
+            if (false === s.includes(id)) s.push(id);
+        } else {
+            const index = s.indexOf(id);
+            if (-1 !== index) s.splice(index, 1);
+        }
+        setSelected(s);
+        onChange?.(s);
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: classnames('infonomic-checkbox-group', checkbox_group_module["checkbox-group"], className),
+        children: checkBoxes.map((cb)=>/*#__PURE__*/ jsx(Checkbox, {
+                id: `${groupName}-${cb.id}`,
+                name: `${groupName}-${cb.id}`,
+                label: cb.label,
+                checkBoxClasses: checkBoxClasses,
+                checked: selected.includes(cb.id),
+                disabled: disabled,
+                onCheckedChange: (checked)=>handleCheckboxChange(cb.id, checked)
+            }, cb.id))
+    });
+};
+export { CheckboxGroup };

package/dist/components/inputs/checkbox-group.module.js

@@ -0,0 +1,6 @@
+import "./checkbox-group_module.css";
+const checkbox_group_module = {
+    "checkbox-group": "checkbox-group-hPRXiQ",
+    checkboxGroup: "checkbox-group-hPRXiQ"
+};
+export default checkbox_group_module;

package/dist/components/inputs/checkbox-group_module.css

@@ -0,0 +1,10 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.infonomic-checkbox-group, .checkbox-group-hPRXiQ) {
+    gap: var(--spacing-8);
+    flex-direction: column;
+    display: flex;
+  }
+}
+

package/dist/components/inputs/checkbox.d.ts

@@ -0,0 +1,29 @@
+import type * as React from 'react';
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import type { Intent, Size, Variant } from './@types/checkbox.js';
+export interface CheckboxProps {
+    id: string;
+    name: string;
+    label?: string;
+    variant?: Variant;
+    size?: Size;
+    intent?: Intent;
+    reverse?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
+    className?: string;
+    checkBoxClasses?: string;
+    containerClasses?: string;
+    componentClasses?: string;
+    labelClasses?: string;
+    error?: boolean;
+    helpText?: string;
+    errorText?: string;
+    onCheckedChange?: React.ComponentProps<typeof CheckboxPrimitive.Root>['onCheckedChange'];
+    onClick?: React.MouseEventHandler;
+    'aria-label'?: string;
+}
+export declare const Checkbox: ({ ref, id, name, label, variant, size, intent, reverse, className, checkBoxClasses, containerClasses, componentClasses, labelClasses, error, helpText, errorText, ...rest }: CheckboxProps & {
+    ref?: React.RefObject<HTMLButtonElement>;
+}) => React.JSX.Element;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/inputs/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAOvE,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAEjE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAC,CAAA;IACxF,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,QAAQ,GAAqB,6KAkBvC,aAAa,GAAG;IACjB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;CACzC,KAAG,KAAK,CAAC,GAAG,CAAC,OAoDb,CAAA"}

package/dist/components/inputs/checkbox.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox as checkbox_Checkbox } from "@base-ui/react/checkbox";
+import classnames from "classnames";
+import { CheckIcon } from "../../icons/check-icon.js";
+import checkbox_module from "./checkbox.module.js";
+import { ErrorText } from "./error-text.js";
+import { HelpText } from "./help-text.js";
+const inputs_checkbox_Checkbox = function({ ref, id, name, label, variant = 'outlined', size = 'md', intent = 'primary', reverse = false, className, checkBoxClasses, containerClasses, componentClasses, labelClasses, error = false, helpText = '', errorText = '', ...rest }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('infonomic-checkbox-container', checkbox_module.container, containerClasses),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames('infonomic-checkbox-component', checkbox_module.component, componentClasses, {
+                    [checkbox_module.reverse]: reverse
+                }),
+                children: [
+                    /*#__PURE__*/ jsx(checkbox_Checkbox.Root, {
+                        ref: ref,
+                        id: id,
+                        name: name,
+                        nativeButton: true,
+                        render: /*#__PURE__*/ jsx("button", {
+                            type: "button"
+                        }),
+                        className: classnames('infonomic-checkbox', `infonomic-checkbox-${variant}`, `infonomic-checkbox-${size}`, `infonomic-checkbox-${intent}`, checkbox_module.checkbox, checkbox_module[variant], checkbox_module[size], checkbox_module[intent], checkBoxClasses, className),
+                        ...rest,
+                        children: /*#__PURE__*/ jsx(checkbox_Checkbox.Indicator, {
+                            keepMounted: true,
+                            className: classnames('infonomic-checkbox-indicator', checkbox_module.indicator),
+                            children: /*#__PURE__*/ jsx(CheckIcon, {
+                                className: checkbox_module.icon
+                            })
+                        })
+                    }),
+                    null != label && /*#__PURE__*/ jsx("label", {
+                        htmlFor: id,
+                        className: classnames('infonomic-checkbox-label', checkbox_module.label, labelClasses),
+                        children: label
+                    })
+                ]
+            }),
+            error ? /*#__PURE__*/ jsx(ErrorText, {
+                id: `error-for-${id}`,
+                size: size,
+                text: errorText ?? helpText
+            }) : helpText?.length > 0 && /*#__PURE__*/ jsx(HelpText, {
+                size: size,
+                text: helpText
+            })
+        ]
+    });
+};
+export { inputs_checkbox_Checkbox as Checkbox };

package/dist/components/inputs/checkbox.module.js

@@ -0,0 +1,25 @@
+import "./checkbox_module.css";
+const checkbox_module = {
+    container: "container-oQwpyX",
+    component: "component-UIVxUt",
+    reverse: "reverse-zym7zb",
+    checkbox: "checkbox-p0iZ1T",
+    indicator: "indicator-VoSV4Y",
+    icon: "icon-ETAzcD",
+    checkBoxIn: "checkBoxIn-q5l2Hl",
+    label: "label-XrpVKR",
+    errorText: "errorText-B98PO8",
+    sm: "sm-qprV45",
+    md: "md-JptERm",
+    lg: "lg-oF4sRl",
+    outlined: "outlined-JZPcbA",
+    filled: "filled-kMP3C2",
+    primary: "primary-VUeFFC",
+    secondary: "secondary-ZRma2z",
+    noeffect: "noeffect-rdjjte",
+    success: "success-ocrgme",
+    info: "info-vm53Ck",
+    warning: "warning-Xc4GbK",
+    danger: "danger-A2Iomw"
+};
+export default checkbox_module;

package/dist/components/inputs/checkbox_module.css

@@ -0,0 +1,216 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.container-oQwpyX, .infonomic-checkbox-container) {
+    width: 100%;
+    padding: 0;
+  }
+
+  :is(.component-UIVxUt, .infonomic-checkbox-component) {
+    align-items: center;
+    gap: var(--gap-2);
+    width: 100%;
+    padding: 0;
+    display: flex;
+  }
+
+  :is(.reverse-zym7zb, .infonomic-checkbox-reverse) {
+    flex-direction: row-reverse;
+  }
+
+  :is(.checkbox-p0iZ1T, .infonomic-checkbox) {
+    outline-offset: 2px;
+    border-radius: var(--border-radius-sm);
+    transition: all var(--transition-normal);
+    outline: 1px solid #0000;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  :is(.checkbox-p0iZ1T[data-checked], .infonomic-checkbox[data-checked]) {
+    outline-color: var(--ring-color);
+  }
+
+  :is(.checkbox-p0iZ1T[data-disabled], .infonomic-checkbox[data-disabled]) {
+    pointer-events: none;
+  }
+
+  :is(.indicator-VoSV4Y, .infonomic-checkbox-indicator) {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  :is(.icon-ETAzcD, .infonomic-checkbox-icon) {
+    width: 20px;
+    height: 20px;
+    color: var(--checkbox-icon-color);
+    opacity: 0;
+    transition: opacity .2s ease-in, transform .2s ease-in;
+    transform: scale(.8);
+  }
+
+  :is(.indicator-VoSV4Y[data-checked] .icon-ETAzcD, .infonomic-checkbox-indicator[data-checked] .infonomic-checkbox-icon) {
+    opacity: 1;
+    animation: .3s cubic-bezier(.25, 1.5, .5, 1) forwards checkBoxIn-q5l2Hl;
+    transform: scale(1);
+  }
+
+  :is(.indicator-VoSV4Y[data-unchecked] .icon-ETAzcD, .infonomic-checkbox-indicator[data-unchecked] .infonomic-checkbox-icon) {
+    opacity: 0;
+    transform: scale(.8);
+  }
+
+  :is(.label-XrpVKR, .infonomic-checkbox-label) {
+    cursor: pointer;
+    color: var(--label-color);
+    margin-left: .25rem;
+    font-weight: 500;
+  }
+
+  :is(.checkbox-p0iZ1T[data-disabled] ~ .label-XrpVKR, .infonomic-checkbox[data-disabled] ~ .infonomic-checkbox-label) {
+    pointer-events: none;
+  }
+
+  :is(.errorText-B98PO8, .infonomic-dropdown-error-text) {
+    color: red;
+    margin-top: .25rem;
+    font-size: .875rem;
+  }
+
+  :is(.sm-qprV45, .infonomic-checkbox-sm), :is(.sm-qprV45 .icon-ETAzcD, .infonomic-checkbox-sm .infonomic-checkbox-icon) {
+    width: 16px;
+    height: 16px;
+  }
+
+  :is(.sm-qprV45 ~ .label-XrpVKR, .infonomic-checkbox-sm ~ .infonomic-checkbox-label) {
+    font-size: .85rem;
+  }
+
+  :is(.md-JptERm, .infonomic-checkbox-md), :is(.md-JptERm .icon-ETAzcD, .infonomic-checkbox-md .infonomic-checkbox-icon) {
+    width: 18px;
+    height: 18px;
+  }
+
+  :is(.md-JptERm ~ .label-XrpVKR, .infonomic-checkbox-md ~ .infonomic-checkbox-label) {
+    font-size: .875rem;
+  }
+
+  :is(.lg-oF4sRl, .infonomic-checkbox-lg) {
+    width: 20px;
+    height: 20px;
+  }
+
+  :is(.lg-oF4sRl .icon-ETAzcD, .infonomic-checkbox-lg .infonomic-checkbox-icon) {
+    width: 22px;
+    height: 22px;
+  }
+
+  :is(.lg-oF4sRl ~ .label-XrpVKR, .infonomic-checkbox-lg ~ .infonomic-checkbox-label) {
+    font-size: 1rem;
+  }
+
+  :is(.outlined-JZPcbA, .infonomic-checkbox-outlined) {
+    border: 2px solid var(--checkbox-variant-outlined-border);
+    --checkbox-icon-color: white;
+  }
+
+  :is(.outlined-JZPcbA[data-checked], .infonomic-checkbox-outlined[data-checked]) {
+    --ring-color: var(--checkbox-variant-outline-ring-color);
+    background-color: var(--checkbox-variant-outlined);
+  }
+
+  :is(.filled-kMP3C2, .infonomic-checkbox-filled) {
+    background-color: var(--checkbox-variant-filled);
+    --checkbox-icon-color: white;
+  }
+
+  :is(.filled-kMP3C2[data-checked], .infonomic-checkbox-filled[data-checked]) {
+    --ring-color: var(--checkbox-variant-outline-ring-color);
+  }
+
+  :is(.primary-VUeFFC, .infonomic-checkbox-primary) {
+    --checkbox-variant-outlined-border: var(--fill-primary-strong);
+    --checkbox-variant-outlined: var(--fill-primary-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-primary-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-primary);
+    --checkbox-variant-filled: var(--fill-primary-strong);
+    --checkbox-icon-color: white;
+  }
+
+  :is(.secondary-ZRma2z, .infonomic-checkbox-secondary) {
+    --checkbox-variant-outlined-border: var(--fill-secondary-strong);
+    --checkbox-variant-outlined: var(--fill-secondary-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-secondary-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-secondary);
+    --checkbox-variant-filled: var(--fill-secondary-strong);
+    --checkbox-icon-color: black;
+  }
+
+  :is(.noeffect-rdjjte, .infonomic-checkbox-noeffect) {
+    --checkbox-variant-outlined-border: var(--fill-noeffect-strong);
+    --checkbox-variant-outlined: var(--fill-noeffect-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-noeffect-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-noeffect);
+    --checkbox-variant-filled: var(--fill-noeffect-strong);
+    --checkbox-icon-color: var(--text-on-noeffect-strong);
+  }
+
+  :is(.success-ocrgme, .infonomic-checkbox-success) {
+    --checkbox-variant-outlined-border: var(--fill-success-strong);
+    --checkbox-variant-outlined: var(--fill-success-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-success-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-success);
+    --checkbox-variant-filled: var(--fill-success-strong);
+    --checkbox-icon-color: white;
+  }
+
+  :is(.info-vm53Ck, .infonomic-checkbox-info) {
+    --checkbox-variant-outlined-border: var(--fill-info-strong);
+    --checkbox-variant-outlined: var(--fill-info-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-info-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-info);
+    --checkbox-variant-filled: var(--fill-info-strong);
+    --checkbox-icon-color: white;
+  }
+
+  :is(.warning-Xc4GbK, .infonomic-checkbox-warning) {
+    --checkbox-variant-outlined-border: var(--fill-warning-strong);
+    --checkbox-variant-outlined: var(--fill-warning-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-warning-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-warning);
+    --checkbox-variant-filled: var(--fill-warning-strong);
+    --checkbox-icon-color: var(--text-on-warning-strong);
+  }
+
+  :is(.danger-A2Iomw, .infonomic-checkbox-danger) {
+    --checkbox-variant-outlined-border: var(--fill-danger-strong);
+    --checkbox-variant-outlined: var(--fill-danger-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-danger-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-danger);
+    --checkbox-variant-filled: var(--fill-danger-strong);
+    --checkbox-icon-color: white;
+  }
+
+  @keyframes checkBoxIn-q5l2Hl {
+    0% {
+      opacity: 0;
+      transform: scale(.8);
+    }
+
+    50% {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+
+    80% {
+      transform: scale(.9);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+}
+

package/dist/components/inputs/error-text.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+interface ErrorTextProps {
+    id: string;
+    className?: string;
+    size?: 'sm' | 'md' | 'lg';
+    text: string;
+}
+export declare function ErrorText({ id, className, size, text }: ErrorTextProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=error-text.d.ts.map

package/dist/components/inputs/error-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-text.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/error-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAM1F"}

package/dist/components/inputs/error-text.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import error_text_module from "./error-text.module.js";
+function ErrorText({ id, className, size, text }) {
+    return /*#__PURE__*/ jsx("p", {
+        id: id,
+        className: classnames('error-text', error_text_module.text, size && error_text_module[size], className),
+        children: text
+    });
+}
+export { ErrorText };

package/dist/components/inputs/error-text.module.js

@@ -0,0 +1,8 @@
+import "./error-text_module.css";
+const error_text_module = {
+    text: "text-DoybHX",
+    sm: "sm-qLUSGk",
+    md: "md-Ov9z3C",
+    lg: "lg-JCKzCI"
+};
+export default error_text_module;