@byline/ui 0.9.3 → 0.10.1

package/dist/components/inputs/error-text_module.css

@@ -0,0 +1,21 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.text-DoybHX, .infonomic-error-text) {
+    color: var(--text-danger);
+    font-size: .875rem;
+  }
+
+  :is(.sm-qLUSGk, .infonomic-error-text-sm) {
+    font-size: .85rem;
+  }
+
+  :is(.md-Ov9z3C, .infonomic-error-text-md) {
+    font-size: .875rem;
+  }
+
+  :is(.lg-JCKzCI, .infonomic-error-text-lg) {
+    font-size: .9rem;
+  }
+}
+

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

@@ -0,0 +1,14 @@
+/**
+ * NOTE: Not currently used
+ * Adapted from https://remix-forms.seasoned.cc/conf/07
+ */
+export declare function Error(props: React.JSX.IntrinsicElements['div']): React.JSX.Element;
+export declare function ServerError({ name, errors, }: {
+    name: string;
+    errors: any;
+}): React.JSX.Element | null;
+export declare function FieldError({ name, errors }: {
+    name: string;
+    errors: any;
+}): React.JSX.Element;
+//# sourceMappingURL=errors.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/errors.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,wBAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAElF;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,GACP,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,GAAG,CAAA;CACZ,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAQ3B;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,GAAG,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAM7F"}

package/dist/components/inputs/errors.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+function Error(props) {
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: "mt-1 text-red-700",
+        role: "alert"
+    });
+}
+function ServerError({ name, errors }) {
+    if (null != errors) {
+        const error = errors[name];
+        return error?._errors != null ? /*#__PURE__*/ jsx(Error, {
+            id: `error-for-${name}`,
+            children: error._errors.join(' ')
+        }) : null;
+    }
+    return null;
+}
+function FieldError({ name, errors }) {
+    const message = errors[name]?.message;
+    if (null != message) return /*#__PURE__*/ jsx(Error, {
+        id: `error-for-${name}`,
+        children: message
+    });
+    return /*#__PURE__*/ jsx(ServerError, {
+        name: name,
+        errors: errors
+    });
+}
+export { Error, FieldError, ServerError };

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import help_text_module from "./help-text.module.js";
+function HelpText({ className, size, text }) {
+    return /*#__PURE__*/ jsx("p", {
+        className: classnames('infonomic-help-text', help_text_module.text, size && help_text_module[size], className),
+        children: text
+    });
+}
+export { HelpText };

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

@@ -0,0 +1,8 @@
+import "./help-text_module.css";
+const help_text_module = {
+    text: "text-tefb0a",
+    sm: "sm-nWkN9c",
+    md: "md-hbw9In",
+    lg: "lg-awNcfh"
+};
+export default help_text_module;

package/dist/components/inputs/help-text_module.css

@@ -0,0 +1,21 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.text-tefb0a, .infonomic-help-text) {
+    color: var(--muted);
+    font-size: .875rem;
+  }
+
+  :is(.sm-nWkN9c, .infonomic-help-text-sm) {
+    font-size: .85rem;
+  }
+
+  :is(.md-hbw9In, .infonomic-help-text-md) {
+    font-size: .875rem;
+  }
+
+  :is(.lg-awNcfh, .infonomic-help-text-lg) {
+    font-size: .9rem;
+  }
+}
+

package/dist/components/inputs/index.js

@@ -0,0 +1,9 @@
+export * from "./autocomplete.js";
+export * from "./checkbox.js";
+export * from "./help-text.js";
+export * from "./input.js";
+export * from "./input-adornment.js";
+export * from "./label.js";
+export * from "./select.js";
+export * from "./text-area.js";
+export * from "./utils.js";

package/dist/components/inputs/input-adornment.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+type InputAdornmentIntrinsicProps = React.JSX.IntrinsicElements['div'];
+export interface InputAdornmentProps extends InputAdornmentIntrinsicProps {
+    className?: string;
+    position?: 'start' | 'end';
+    margins?: boolean;
+    children: React.ReactNode;
+}
+export declare function InputAdornment({ position, margins, className, children, ...rest }: InputAdornmentProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=input-adornment.d.ts.map

package/dist/components/inputs/input-adornment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-adornment.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/input-adornment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,4BAA4B,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACtE,MAAM,WAAW,mBAAoB,SAAQ,4BAA4B;IACvE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAkB,EAClB,OAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgBzC"}

package/dist/components/inputs/input-adornment.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import input_adornment_module from "./input-adornment.module.js";
+function InputAdornment({ position = 'start', margins = true, className, children, ...rest }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: classnames('infonomic-input-adornment', `infonomic-input-adornment-${position}`, input_adornment_module.adornment, {
+            [input_adornment_module.start]: 'start' === position
+        }, {
+            [input_adornment_module.end]: 'end' === position
+        }, className),
+        ...rest,
+        children: children
+    });
+}
+export { InputAdornment };

package/dist/components/inputs/input-adornment.module.js

@@ -0,0 +1,7 @@
+import "./input-adornment_module.css";
+const input_adornment_module = {
+    adornment: "adornment-JKPOkF",
+    start: "start-dXXMnl",
+    end: "end-dUE8qM"
+};
+export default input_adornment_module;

package/dist/components/inputs/input-adornment_module.css

@@ -0,0 +1,19 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.adornment-JKPOkF, .infonomic-input-adornment) {
+    white-space: nowrap;
+    align-items: center;
+    line-height: 0;
+    display: flex;
+  }
+
+  :is(.start-dXXMnl, .infonomic-input-adornment-start) {
+    justify-content: flex-start;
+  }
+
+  :is(.end-dUE8qM, .infonomic-input-adornment-end) {
+    justify-content: flex-end;
+  }
+}
+

package/dist/components/inputs/input-password.d.ts

@@ -0,0 +1,3 @@
+import type { InputProps } from './input.jsx';
+export declare function InputPassword({ ...props }: InputProps): import("react").JSX.Element;
+//# sourceMappingURL=input-password.d.ts.map

package/dist/components/inputs/input-password.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-password.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/input-password.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAE7C,wBAAgB,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAgBrD"}

package/dist/components/inputs/input-password.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { EyeClosedIcon } from "../../icons/eye-closed-icon.js";
+import { EyeOpenIcon } from "../../icons/eye-open-icon.js";
+import { Input } from "./input.js";
+function InputPassword({ ...props }) {
+    const [visible, setVisible] = useState(false);
+    return /*#__PURE__*/ jsx(Input, {
+        type: visible ? 'text' : 'password',
+        endAdornment: visible ? /*#__PURE__*/ jsx(EyeOpenIcon, {
+            width: "18px",
+            height: "18px",
+            onClick: ()=>setVisible(!visible)
+        }) : /*#__PURE__*/ jsx(EyeClosedIcon, {
+            width: "18px",
+            height: "18px",
+            onClick: ()=>setVisible(!visible)
+        }),
+        ...props
+    });
+}
+export { InputPassword };

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

@@ -0,0 +1,25 @@
+import type React from 'react';
+import type { Intent, Size, Variant } from './@types/input.js';
+import type { InputAdornmentProps } from './input-adornment.jsx';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    id: string;
+    name: string;
+    label?: string;
+    variant?: Variant;
+    inputSize?: Size;
+    intent?: Intent;
+    required?: boolean;
+    type?: string;
+    placeHolder?: string;
+    autoComplete?: string;
+    startAdornment?: React.ReactElement<InputAdornmentProps>;
+    endAdornment?: React.ReactElement<InputAdornmentProps>;
+    error?: boolean;
+    helpText?: string;
+    errorText?: string;
+    className?: string;
+    inputWrapperClassName?: string;
+    ref?: React.RefCallback<HTMLInputElement | null> | React.RefObject<HTMLInputElement | null>;
+}
+export declare const Input: <_C extends React.ElementType = "input">({ ref, id, name, type, variant, inputSize, intent, required, label, startAdornment, endAdornment, placeHolder, autoComplete, error, helpText, errorText, inputWrapperClassName, className, ...rest }: InputProps) => React.JSX.Element;
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAEhE,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7E,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAA;IACxD,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAA;IACtD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;CAC5F;AAED,eAAO,MAAM,KAAK,GAAI,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,OAAO,EAAE,sMAoB3D,UAAU,sBAgEZ,CAAA"}

package/dist/components/inputs/input.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { ErrorText } from "./error-text.js";
+import { HelpText } from "./help-text.js";
+import input_module from "./input.module.js";
+import { Label } from "./label.js";
+const Input = ({ ref, id, name, type = 'text', variant = 'outlined', inputSize = 'md', intent = 'primary', required, label, startAdornment, endAdornment, placeHolder = '', autoComplete = 'off', error = false, helpText = '', errorText = '', inputWrapperClassName, className, ...rest })=>/*#__PURE__*/ jsxs("div", {
+        className: classnames('infonomic-input-wrapper', input_module["input-wrapper"], inputWrapperClassName),
+        children: [
+            null != label && /*#__PURE__*/ jsx(Label, {
+                id: id,
+                htmlFor: id,
+                required: required,
+                label: label
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames('infonomic-input-container', input_module["input-container"]),
+                children: [
+                    null != startAdornment && /*#__PURE__*/ jsx("div", {
+                        className: classnames('infonomic-input-start-adornment', input_module["start-adornment"], input_module[variant]),
+                        children: startAdornment
+                    }),
+                    /*#__PURE__*/ jsx("input", {
+                        ref: ref,
+                        id: id,
+                        name: name,
+                        type: type,
+                        required: required,
+                        autoComplete: autoComplete,
+                        placeholder: placeHolder,
+                        "aria-labelledby": `label-for-${id}`,
+                        "aria-invalid": error,
+                        "aria-required": required,
+                        "aria-errormessage": errorText,
+                        "aria-describedby": error ? `error-for-${id}` : void 0,
+                        className: classnames('infonomic-input', `infonomic-input-${variant}`, `infonomic-input-${inputSize}`, `infonomic-input-${intent}`, input_module.input, input_module[variant], input_module[inputSize], input_module[intent], {
+                            [input_module["start-adornment-padding"]]: null != startAdornment
+                        }, {
+                            [input_module["end-adornment-padding"]]: null != endAdornment
+                        }, {
+                            [input_module.error]: error
+                        }, className),
+                        ...rest
+                    }),
+                    null != endAdornment && /*#__PURE__*/ jsx("div", {
+                        className: classnames('infonomic-input-end-adornment', input_module["end-adornment"], input_module[variant]),
+                        children: endAdornment
+                    })
+                ]
+            }),
+            error ? /*#__PURE__*/ jsx(ErrorText, {
+                id: `error-for-${id}`,
+                size: inputSize,
+                text: errorText ?? helpText
+            }) : helpText?.length > 0 && /*#__PURE__*/ jsx(HelpText, {
+                size: inputSize,
+                text: helpText
+            })
+        ]
+    });
+export { Input };

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

@@ -0,0 +1,34 @@
+import "./input_module.css";
+const input_module = {
+    "input-wrapper": "input-wrapper-OJAKML",
+    inputWrapper: "input-wrapper-OJAKML",
+    "input-container": "input-container-bU4yD2",
+    inputContainer: "input-container-bU4yD2",
+    input: "input-IWjcip",
+    label: "label-zIFfZp",
+    sm: "sm-ZFjgnI",
+    md: "md-unbc45",
+    lg: "lg-gpW386",
+    "start-adornment": "start-adornment-PjWsd5",
+    startAdornment: "start-adornment-PjWsd5",
+    "end-adornment": "end-adornment-xFqztV",
+    endAdornment: "end-adornment-xFqztV",
+    "help-text": "help-text-aFXa9e",
+    helpText: "help-text-aFXa9e",
+    outlined: "outlined-jwv7LI",
+    underlined: "underlined-CSLRKX",
+    filled: "filled-zNQ9B3",
+    error: "error-FQ2_hh",
+    "start-adornment-padding": "start-adornment-padding-ya34Ht",
+    startAdornmentPadding: "start-adornment-padding-ya34Ht",
+    "end-adornment-padding": "end-adornment-padding-dYaxaB",
+    endAdornmentPadding: "end-adornment-padding-dYaxaB",
+    primary: "primary-SHCX1n",
+    secondary: "secondary-ykH7ET",
+    noeffect: "noeffect-aujnaG",
+    success: "success-VsDfv9",
+    info: "info-ogHmno",
+    warning: "warning-FQYlHl",
+    danger: "danger-patit2"
+};
+export default input_module;

package/dist/components/inputs/input_module.css

@@ -0,0 +1,259 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.input-wrapper-OJAKML, .infonomic-input-wrapper) {
+    gap: var(--gap-1);
+    flex-direction: column;
+    display: flex;
+  }
+
+  :is(.input-container-bU4yD2, .infonomic-input-container) {
+    align-items: center;
+    gap: var(--gap-2);
+    width: 100%;
+    padding: 0;
+    display: flex;
+    position: relative;
+  }
+
+  :is(.input-IWjcip, .infonomic-input) {
+    outline-offset: 2px;
+    gap: var(--gap-2);
+    width: 100%;
+    transition: all var(--transition-normal);
+    border-radius: var(--border-radius-sm);
+    border: none;
+    outline: 1px solid #0000;
+    align-items: center;
+    font-weight: normal;
+    display: inline-flex;
+  }
+
+  :is(.input-IWjcip:focus, .input-IWjcip:active, .infonomic-input:focus, .infonomic-input:active) {
+    outline-color: var(--ring-color);
+  }
+
+  :is(.input-IWjcip:disabled, .input-IWjcip[disabled], .infonomic-input:disabled, .infonomic-input[disabled]) {
+    pointer-events: none;
+  }
+
+  :is(.label-zIFfZp, .infonomic-input-label) {
+    color: var(--label-color);
+    font-size: .875rem;
+    font-weight: 500;
+  }
+
+  :is(.sm-ZFjgnI, .infonomic-input-sm) {
+    min-height: 32px;
+    padding: .25rem .5rem;
+    font-size: .875rem;
+    line-height: 0;
+  }
+
+  :is(.md-unbc45, .infonomic-input-md) {
+    min-height: 36px;
+    padding: .3rem .5rem;
+    font-size: 1rem;
+    line-height: 0;
+  }
+
+  :is(.lg-gpW386, .infonomic-input-lg) {
+    min-height: 40px;
+    padding: .4rem .5rem;
+    font-size: 1.175rem;
+    line-height: 0;
+  }
+
+  :is(.start-adornment-PjWsd5, .end-adornment-xFqztV, .infonomic-input-start-adornment, .infonomic-input-end-adornment) {
+    align-items: center;
+    display: flex;
+    position: absolute;
+  }
+
+  :is(.start-adornment-PjWsd5, .infonomic-input-start-adornment) {
+    left: 5px;
+  }
+
+  :is(.end-adornment-xFqztV, .infonomic-input-end-adornment) {
+    right: 5px;
+  }
+
+  :is(.help-text-aFXa9e, .infonomic-input-help-text) {
+    color: var(--help-text-color);
+    font-size: .75rem;
+  }
+
+  :is(.outlined-jwv7LI, .infonomic-input-outlined) {
+    border: 1px solid var(--input-variant-outlined-border);
+    background-color: #0000;
+  }
+
+  :is(.outlined-jwv7LI:hover, .infonomic-input-outlined:hover) {
+    border: 1px solid var(--input-variant-outlined-hover-border);
+  }
+
+  :is(.outlined-jwv7LI:focus, .outlined-jwv7LI:active, .infonomic-input-outlined:focus, .infonomic-input-outlined:active) {
+    --ring-color: var(--input-variant-outline-ring-color);
+  }
+
+  :is(.underlined-CSLRKX, .infonomic-input-underlined) {
+    border-bottom: 1px solid var(--input-variant-underlined-border);
+    gap: var(--gap-1);
+    background-color: var(--input-variant-underlined);
+    border-radius: 0;
+  }
+
+  .underlined-CSLRKX.sm-ZFjgnI {
+    min-height: 26px;
+    padding: .25rem .1rem;
+  }
+
+  .infonomic-input-underlined.input-sm {
+    min-height: 26px;
+    padding: .25rem .1rem;
+  }
+
+  .underlined-CSLRKX.md-unbc45 {
+    min-height: 30px;
+    padding: .25rem .1rem;
+  }
+
+  .infonomic-input-underlined.input-md {
+    min-height: 30px;
+    padding: .25rem .1rem;
+  }
+
+  .underlined-CSLRKX.lg-gpW386 {
+    min-height: 34px;
+    padding: 0 .1rem;
+  }
+
+  .infonomic-input-underlined.input-lg {
+    min-height: 34px;
+    padding: 0 .1rem;
+  }
+
+  :is(.underlined-CSLRKX:hover, .infonomic-input-underlined:hover) {
+    border-bottom: 1px solid var(--input-variant-underlined-hover-border);
+  }
+
+  :is(.underlined-CSLRKX:focus, .underlined-CSLRKX:active, .infonomic-input-underlined:focus, .infonomic-input-underlined:active) {
+    outline: none;
+  }
+
+  :is(.filled-zNQ9B3, .infonomic-input-filled) {
+    background-color: var(--input-variant-filled);
+  }
+
+  :is(.error-FQ2_hh, .infonomic-input-error), :is(.error-FQ2_hh:hover, .infonomic-input-error:hover) {
+    border: 1px solid var(--field-border-invalid);
+  }
+
+  :is(.error-FQ2_hh:focus, .error-FQ2_hh:active, .infonomic-input-error:focus, .infonomic-input-error:active) {
+    --ring-color: var(--field-ring-invalid);
+  }
+
+  .underlined-CSLRKX.start-adornment-padding-ya34Ht, .start-adornment-padding-ya34Ht {
+    padding-left: 2rem;
+  }
+
+  .infonomic-input-underlined.input-start-adornment-padding {
+    padding-left: 2rem;
+  }
+
+  .infonomic-input-start-adornment-padding {
+    padding-left: 2rem;
+  }
+
+  .underlined-CSLRKX.end-adornment-padding-dYaxaB, .end-adornment-padding-dYaxaB {
+    padding-right: 2rem;
+  }
+
+  .infonomic-input-underlined.input-end-adornment-padding {
+    padding-right: 2rem;
+  }
+
+  .infonomic-input-end-adornment-padding {
+    padding-right: 2rem;
+  }
+
+  .underlined-CSLRKX.start-adornment-PjWsd5 {
+    left: 0;
+  }
+
+  .infonomic-input-underlined.input-start-adornment {
+    left: 0;
+  }
+
+  .underlined-CSLRKX.end-adornment-xFqztV {
+    right: 0;
+  }
+
+  .infonomic-input-underlined.input-end-adornment {
+    right: 0;
+  }
+
+  :is(.primary-SHCX1n, .infonomic-input-primary) {
+    --input-variant-outlined-border: var(--stroke-primary);
+    --input-variant-outlined-hover-border: var(--stroke-primary-hover);
+    --input-variant-outline-ring-color: var(--ring-primary);
+    --input-variant-underlined-border: var(--stroke-primary);
+    --input-variant-underlined-hover-border: var(--stroke-primary-hover);
+    --input-variant-filled: var(--fill-primary-weak);
+  }
+
+  :is(.secondary-ykH7ET, .infonomic-input-secondary) {
+    --input-variant-outlined-border: var(--stroke-secondary);
+    --input-variant-outlined-hover-border: var(--stroke-secondary-hover);
+    --input-variant-outline-ring-color: var(--ring-secondary);
+    --input-variant-underlined-border: var(--stroke-secondary);
+    --input-variant-underlined-hover-border: var(--stroke-secondary-hover);
+    --input-variant-filled: var(--fill-secondary-weak);
+  }
+
+  :is(.noeffect-aujnaG, .infonomic-input-noeffect) {
+    --input-variant-outlined-border: var(--stroke-noeffect);
+    --input-variant-outlined-hover-border: var(--stroke-noeffect-hover);
+    --input-variant-outline-ring-color: var(--ring-noeffect);
+    --input-variant-underlined-border: var(--stroke-noeffect);
+    --input-variant-underlined-hover-border: var(--stroke-noeffect-hover);
+    --input-variant-filled: var(--fill-noeffect-weak);
+  }
+
+  :is(.success-VsDfv9, .infonomic-input-success) {
+    --input-variant-outlined-border: var(--stroke-success);
+    --input-variant-outlined-hover-border: var(--stroke-success-hover);
+    --input-variant-outline-ring-color: var(--ring-success);
+    --input-variant-underlined-border: var(--stroke-success);
+    --input-variant-underlined-hover-border: var(--stroke-success-hover);
+    --input-variant-filled: var(--fill-success-weak);
+  }
+
+  :is(.info-ogHmno, .infonomic-input-info) {
+    --input-variant-outlined-border: var(--stroke-info);
+    --input-variant-outlined-hover-border: var(--stroke-info-hover);
+    --input-variant-outline-ring-color: var(--ring-info);
+    --input-variant-underlined-border: var(--stroke-info);
+    --input-variant-underlined-hover-border: var(--stroke-info-hover);
+    --input-variant-filled: var(--fill-info-weak);
+  }
+
+  :is(.warning-FQYlHl, .infonomic-input-warning) {
+    --input-variant-outlined-border: var(--stroke-warning);
+    --input-variant-outlined-hover-border: var(--stroke-warning-hover);
+    --input-variant-outline-ring-color: var(--ring-warning);
+    --input-variant-underlined-border: var(--stroke-warning);
+    --input-variant-underlined-hover-border: var(--stroke-warning-hover);
+    --input-variant-filled: var(--fill-warning-weak);
+  }
+
+  :is(.danger-patit2, .infonomic-input-danger) {
+    --input-variant-outlined-border: var(--stroke-danger);
+    --input-variant-outlined-hover-border: var(--stroke-danger-hover);
+    --input-variant-outline-ring-color: var(--ring-danger);
+    --input-variant-underlined-border: var(--stroke-danger);
+    --input-variant-underlined-hover-border: var(--stroke-danger-hover);
+    --input-variant-filled: var(--fill-danger-weak);
+  }
+}
+

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

@@ -0,0 +1,11 @@
+import type React from 'react';
+interface LabelProps {
+    className?: string;
+    id: string;
+    htmlFor: string;
+    label: string;
+    required?: boolean;
+}
+export declare function Label({ className, id, htmlFor, label, required }: LabelProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAWhG"}

package/dist/components/inputs/label.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import label_module from "./label.module.js";
+function Label({ className, id, htmlFor, label, required }) {
+    return /*#__PURE__*/ jsxs("label", {
+        id: `label-for-${id}`,
+        htmlFor: htmlFor,
+        className: classnames('label', label_module.label, className),
+        children: [
+            label,
+            required && /*#__PURE__*/ jsx("span", {
+                className: label_module.required,
+                children: "\xa0*"
+            })
+        ]
+    });
+}
+export { Label };

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

@@ -0,0 +1,6 @@
+import "./label_module.css";
+const label_module = {
+    label: "label-pYbboO",
+    required: "required-UDJyfk"
+};
+export default label_module;