@infonomic/uikit 1.0.0

package/dist/components/input/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, text }) {
+    return /*#__PURE__*/ jsx("p", {
+        id: id,
+        className: classnames(error_text_module.text, className),
+        children: text
+    });
+}
+export { ErrorText };

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

@@ -0,0 +1,5 @@
+import "./error-text_module.css";
+const error_text_module = {
+    text: "text-wwMLSt"
+};
+export { error_text_module as default };

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

@@ -0,0 +1,13 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography;
+
+@layer infonomic-components {
+  .text-wwMLSt {
+    color: var(--red-500);
+    font-size: .875rem;
+  }
+
+  .dark .text-wwMLSt:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    color: var(--red-400);
+  }
+}
+

package/dist/components/input/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/input/errors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../../src/components/input/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/input/errors.js

@@ -0,0 +1,31 @@
+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 (null == error ? void 0 : error._errors) != null ? /*#__PURE__*/ jsx(Error, {
+            id: `error-for-${name}`,
+            children: error._errors.join(' ')
+        }) : null;
+    }
+    return null;
+}
+function FieldError({ name, errors }) {
+    var _errors_name;
+    const message = null == (_errors_name = errors[name]) ? void 0 : _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/input/help-text.d.ts

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

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

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

package/dist/components/input/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, text }) {
+    return /*#__PURE__*/ jsx("p", {
+        className: classnames(help_text_module.text, className),
+        children: text
+    });
+}
+export { HelpText };

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

@@ -0,0 +1,5 @@
+import "./help-text_module.css";
+const help_text_module = {
+    text: "text-cLsIw6"
+};
+export { help_text_module as default };

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

@@ -0,0 +1,13 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography;
+
+@layer infonomic-components {
+  .text-cLsIw6 {
+    color: var(--gray-800);
+    font-size: .875rem;
+  }
+
+  .dark .text-cLsIw6:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    color: var(--gray-300);
+  }
+}
+

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

@@ -0,0 +1,9 @@
+export * from './input.js';
+export * from './input-adornment.js';
+export * from './label.js';
+export * from './help-text.js';
+export * from './select.js';
+export * from './text-area.js';
+export * from './checkbox.js';
+export * from './utils.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA"}

package/dist/components/input/index.js

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

package/dist/components/input/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/input/input-adornment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-adornment.d.ts","sourceRoot":"","sources":["../../../src/components/input/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,CAczC"}

package/dist/components/input/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(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/input/input-adornment.module.js

@@ -0,0 +1,7 @@
+import "./input-adornment_module.css";
+const input_adornment_module = {
+    adornment: "adornment-E8IYJs",
+    start: "start-Nv3fFI",
+    end: "end-GWP_9m"
+};
+export { input_adornment_module as default };

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

@@ -0,0 +1,19 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography;
+
+@layer infonomic-components {
+  .adornment-E8IYJs {
+    white-space: nowrap;
+    align-items: center;
+    line-height: 0;
+    display: flex;
+  }
+
+  .start-Nv3fFI {
+    justify-content: flex-start;
+  }
+
+  .end-GWP_9m {
+    justify-content: flex-end;
+  }
+}
+

package/dist/components/input/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.js';
+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/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAK9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAG/D,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,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,OAAO,EAAE,sMAoB1D,UAAU,sBA4CZ,CAAA"}

package/dist/components/input/input.js

@@ -0,0 +1,60 @@
+'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(input_module.inputWrapper, inputWrapperClassName),
+        children: [
+            null != label && /*#__PURE__*/ jsx(Label, {
+                id: id,
+                htmlFor: id,
+                required: required,
+                label: label
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: input_module.inputContainer,
+                children: [
+                    null != startAdornment && /*#__PURE__*/ jsx("div", {
+                        className: classnames(input_module.startAdornment, 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(input_module.input, input_module[variant], input_module[inputSize], input_module[intent], {
+                            [input_module.startAdornmentPadding]: null != startAdornment
+                        }, {
+                            [input_module.endAdornmentPadding]: null != endAdornment
+                        }, {
+                            [input_module.error]: error
+                        }, className),
+                        ...rest
+                    }),
+                    null != endAdornment && /*#__PURE__*/ jsx("div", {
+                        className: classnames(input_module.endAdornment, input_module[variant]),
+                        children: endAdornment
+                    })
+                ]
+            }),
+            error ? /*#__PURE__*/ jsx(ErrorText, {
+                id: `error-for-${id}`,
+                text: errorText ?? helpText
+            }) : (null == helpText ? void 0 : helpText.length) > 0 && /*#__PURE__*/ jsx(HelpText, {
+                text: helpText
+            })
+        ]
+    });
+export { Input };

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

@@ -0,0 +1,27 @@
+import "./input_module.css";
+const input_module = {
+    inputWrapper: "inputWrapper-mAHVD5",
+    inputContainer: "inputContainer-rwVhce",
+    input: "input-ZoQqR8",
+    label: "label-XCzmEc",
+    sm: "sm-gXd6Lj",
+    md: "md-FLpZg6",
+    lg: "lg-Gx_VXF",
+    startAdornment: "startAdornment-m5OhH9",
+    endAdornment: "endAdornment-I8D_Kn",
+    helpText: "helpText-mMTduV",
+    outlined: "outlined-A4FTMB",
+    underlined: "underlined-UMONwU",
+    filled: "filled-IQq2M9",
+    error: "error-bZhwHt",
+    startAdornmentPadding: "startAdornmentPadding-dcRUiO",
+    endAdornmentPadding: "endAdornmentPadding-jiTlQb",
+    primary: "primary-FIrC7m",
+    secondary: "secondary-LmtH1h",
+    noeffect: "noeffect-Kb93bb",
+    success: "success-fNk168",
+    info: "info-_CXlQd",
+    warning: "warning-abMXZC",
+    danger: "danger-Q_LJPS"
+};
+export { input_module as default };

package/dist/components/input/input_module.css

@@ -0,0 +1,283 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography;
+
+@layer infonomic-components {
+  .inputWrapper-mAHVD5 {
+    gap: var(--gap-1);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .inputContainer-rwVhce {
+    align-items: center;
+    gap: var(--gap-2);
+    display: flex;
+    position: relative;
+  }
+
+  .input-ZoQqR8 {
+    gap: var(--gap-2);
+    width: 100%;
+    transition: all var(--transition-normal);
+    border-radius: var(--border-radius-sm);
+    border: none;
+    outline: none;
+    align-items: center;
+    font-weight: normal;
+    display: inline-flex;
+  }
+
+  .input-ZoQqR8:focus, .input-ZoQqR8:active {
+    --ring-offset-color: var(--background);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
+    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  }
+
+  .input-ZoQqR8:disabled, .input-ZoQqR8[disabled] {
+    pointer-events: none;
+  }
+
+  .label-XCzmEc {
+    color: var(--label-color);
+    font-size: .875rem;
+    font-weight: 500;
+  }
+
+  .sm-gXd6Lj {
+    min-height: 32px;
+    padding: .25rem .5rem;
+    font-size: .875rem;
+    line-height: 0;
+  }
+
+  .md-FLpZg6 {
+    min-height: 38px;
+    padding: .4rem .5rem;
+    font-size: 1.1rem;
+    line-height: 0;
+  }
+
+  .lg-Gx_VXF {
+    min-height: 46px;
+    padding: .5rem;
+    font-size: 1.2rem;
+    line-height: 0;
+  }
+
+  .startAdornment-m5OhH9, .endAdornment-I8D_Kn {
+    align-items: center;
+    display: flex;
+    position: absolute;
+  }
+
+  .startAdornment-m5OhH9 {
+    left: 5px;
+  }
+
+  .endAdornment-I8D_Kn {
+    right: 5px;
+  }
+
+  .helpText-mMTduV {
+    color: var(--help-text-color);
+    font-size: .75rem;
+  }
+
+  .outlined-A4FTMB {
+    border: 1px solid var(--input-variant-outlined-border);
+    background-color: #0000;
+  }
+
+  .outlined-A4FTMB:hover {
+    border: 1px solid var(--input-variant-outlined-hover-border);
+  }
+
+  .outlined-A4FTMB:focus, .outlined-A4FTMB:active {
+    --ring-color: var(--input-variant-outline-ring-color);
+  }
+
+  .underlined-UMONwU {
+    border-bottom: 1px solid var(--input-variant-underlined-border);
+    gap: var(--gap-1);
+    background-color: var(--input-variant-underlined);
+    border-radius: 0;
+  }
+
+  .underlined-UMONwU.sm-gXd6Lj {
+    min-height: 26px;
+    padding: .25rem .1rem;
+  }
+
+  .underlined-UMONwU.md-FLpZg6 {
+    min-height: 30px;
+    padding: .25rem .1rem;
+  }
+
+  .underlined-UMONwU.lg-Gx_VXF {
+    min-height: 34px;
+    padding: 0 .1rem;
+  }
+
+  .underlined-UMONwU:hover {
+    border-bottom: 1px solid var(--input-variant-underlined-hover-border);
+  }
+
+  .filled-IQq2M9 {
+    background-color: var(--input-variant-filled);
+  }
+
+  .error-bZhwHt, .error-bZhwHt:hover {
+    border: 1px solid var(--red-400);
+  }
+
+  .error-bZhwHt:focus, .error-bZhwHt:active {
+    --ring-color: var(--red-300);
+  }
+
+  .underlined-UMONwU.startAdornmentPadding-dcRUiO, .startAdornmentPadding-dcRUiO {
+    padding-left: 2rem;
+  }
+
+  .underlined-UMONwU.endAdornmentPadding-jiTlQb, .endAdornmentPadding-jiTlQb {
+    padding-right: 2rem;
+  }
+
+  .underlined-UMONwU.startAdornment-m5OhH9 {
+    left: 0;
+  }
+
+  .underlined-UMONwU.endAdornment-I8D_Kn {
+    right: 0;
+  }
+
+  .primary-FIrC7m {
+    --input-variant-outlined-border: var(--primary-300);
+    --input-variant-outlined-hover-border: var(--primary-500);
+    --input-variant-outline-ring-color: var(--primary-300);
+    --input-variant-underlined-border: var(--primary-300);
+    --input-variant-underlined-hover-border: var(--primary-500);
+    --input-variant-filled: var(--gray-50);
+  }
+
+  .secondary-LmtH1h {
+    --input-variant-outlined-border: var(--secondary-600);
+    --input-variant-outlined-hover-border: var(--secondary-800);
+    --input-variant-outline-ring-color: var(--secondary-600);
+    --input-variant-underlined-border: var(--secondary-600);
+    --input-variant-underlined-hover-border: var(--secondary-800);
+    --input-variant-filled: var(--gray-50);
+  }
+
+  .noeffect-Kb93bb {
+    --input-variant-outlined-border: var(--gray-500);
+    --input-variant-outlined-hover-border: var(--gray-700);
+    --input-variant-outline-ring-color: var(--gray-700);
+    --input-variant-underlined-border: var(--gray-500);
+    --input-variant-underlined-hover-border: var(--gray-700);
+    --input-variant-filled: var(--gray-50);
+  }
+
+  .success-fNk168 {
+    --input-variant-outlined-border: var(--green-300);
+    --input-variant-outlined-hover-border: var(--green-600);
+    --input-variant-outline-ring-color: var(--green-600);
+    --input-variant-underlined-border: var(--green-300);
+    --input-variant-underlined-hover-border: var(--green-600);
+    --input-variant-filled: var(--gray-50);
+  }
+
+  .info-_CXlQd {
+    --input-variant-outlined-border: var(--blue-300);
+    --input-variant-outlined-hover-border: var(--blue-600);
+    --input-variant-outline-ring-color: var(--blue-300);
+    --input-variant-underlined-border: var(--blue-100);
+    --input-variant-underlined-hover-border: var(--blue-400);
+    --input-variant-filled: var(--gray-50);
+  }
+
+  .warning-abMXZC {
+    --input-variant-outlined-border: var(--yellow-600);
+    --input-variant-outlined-hover-border: var(--yellow-800);
+    --input-variant-outline-ring-color: var(--yellow-600);
+    --input-variant-underlined-border: var(--yellow-600);
+    --input-variant-underlined-hover-border: var(--yellow-800);
+    --input-variant-filled: var(--gray-50);
+  }
+
+  .danger-Q_LJPS {
+    --input-variant-outlined-border: var(--red-300);
+    --input-variant-outlined-hover-border: var(--red-600);
+    --input-variant-outline-ring-color: var(--red-600);
+    --input-variant-underlined-border: var(--red-300);
+    --input-variant-underlined-hover-border: var(--red-600);
+    --input-variant-filled: var(--gray-50);
+  }
+
+  .dark .input-ZoQqR8:focus:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .input-ZoQqR8:active:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --ring-offset-color: var(--background);
+  }
+
+  .dark .primary-FIrC7m:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --input-variant-outlined-border: var(--primary-200);
+    --input-variant-outlined-hover-border: var(--primary-100);
+    --input-variant-outline-ring-color: var(--primary-200);
+    --input-variant-underlined-border: var(--primary-200);
+    --input-variant-underlined-hover-border: var(--primary-100);
+    --input-variant-filled: var(--canvas-800);
+  }
+
+  .dark .secondary-LmtH1h:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --input-variant-outlined-border: var(--secondary-600);
+    --input-variant-outlined-hover-border: var(--secondary-400);
+    --input-variant-outline-ring-color: var(--secondary-600);
+    --input-variant-underlined-border: var(--secondary-600);
+    --input-variant-underlined-hover-border: var(--secondary-400);
+    --input-variant-filled: var(--canvas-800);
+  }
+
+  .dark .noeffect-Kb93bb:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --input-variant-outlined-border: var(--gray-500);
+    --input-variant-outlined-hover-border: var(--gray-300);
+    --input-variant-outline-ring-color: var(--gray-400);
+    --input-variant-underlined-border: var(--gray-500);
+    --input-variant-underlined-hover-border: var(--gray-300);
+    --input-variant-filled: var(--canvas-800);
+  }
+
+  .dark .success-fNk168:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --input-variant-outlined-border: var(--green-500);
+    --input-variant-outlined-hover-border: var(--green-300);
+    --input-variant-outline-ring-color: var(--green-400);
+    --input-variant-underlined-border: var(--green-500);
+    --input-variant-underlined-hover-border: var(--green-300);
+    --input-variant-filled: var(--canvas-800);
+  }
+
+  .dark .info-_CXlQd:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --input-variant-outlined-border: var(--blue-500);
+    --input-variant-outlined-hover-border: var(--blue-300);
+    --input-variant-outline-ring-color: var(--blue-400);
+    --input-variant-underlined-border: var(--blue-500);
+    --input-variant-underlined-hover-border: var(--blue-300);
+    --input-variant-filled: var(--canvas-800);
+  }
+
+  .dark .warning-abMXZC:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --input-variant-outlined-border: var(--yellow-500);
+    --input-variant-outlined-hover-border: var(--yellow-300);
+    --input-variant-outline-ring-color: var(--yellow-400);
+    --input-variant-underlined-border: var(--yellow-500);
+    --input-variant-underlined-hover-border: var(--yellow-300);
+    --input-variant-filled: var(--canvas-800);
+  }
+
+  .dark .danger-Q_LJPS:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --input-variant-outlined-border: var(--red-500);
+    --input-variant-outlined-hover-border: var(--red-300);
+    --input-variant-outline-ring-color: var(--red-400);
+    --input-variant-underlined-border: var(--red-500);
+    --input-variant-underlined-hover-border: var(--red-500);
+    --input-variant-filled: var(--canvas-800);
+  }
+}
+

package/dist/components/input/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/input/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/input/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,CAOhG"}

package/dist/components/input/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_module.label, className),
+        children: [
+            label,
+            null != required && /*#__PURE__*/ jsx("span", {
+                className: label_module.required,
+                children: "\xa0*"
+            })
+        ]
+    });
+}
+export { Label };

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

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