@infonomic/uikit 5.4.0 → 5.6.0

package/dist/astro.d.ts

@@ -7,14 +7,17 @@ import type CardHeaderComponent from './components/card/card-header.astro'
 import type CardTitleComponent from './components/card/card-title.astro'
 import type CardComponent from './components/card/card.astro'
 import type ContainerComponent from './components/container/container.astro'
+import type CheckboxComponent from './components/forms/checkbox.astro'
 import type ErrorTextComponent from './components/forms/error-text.astro'
 import type HelpTextComponent from './components/forms/help-text.astro'
 import type InputAdornmentComponent from './components/forms/input-adornment.astro'
 import type InputComponent from './components/forms/input.astro'
 import type LabelComponent from './components/forms/label.astro'
+import type TextAreaComponent from './components/forms/text-area.astro'
 import type HamburgerComponent from './components/hamburger/hamburger.astro'
 import type ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
 import type SectionComponent from './components/section/section.astro'
+import type CheckIconComponent from './icons/check-icon.astro'
 import type CloseIconComponent from './icons/close-icon.astro'
 import type IconElementComponent from './icons/icon-element.astro'
 import type LightIconComponent from './icons/light-icon.astro'
@@ -30,14 +33,17 @@ export declare const CardHeader: typeof CardHeaderComponent
 export declare const CardTitle: typeof CardTitleComponent
 export declare const Card: typeof CardComponent
 export declare const Container: typeof ContainerComponent
+export declare const Checkbox: typeof CheckboxComponent
 export declare const ErrorText: typeof ErrorTextComponent
 export declare const HelpText: typeof HelpTextComponent
 export declare const InputAdornment: typeof InputAdornmentComponent
 export declare const Input: typeof InputComponent
 export declare const Label: typeof LabelComponent
+export declare const TextArea: typeof TextAreaComponent
 export declare const Hamburger: typeof HamburgerComponent
 export declare const ScrollToTop: typeof ScrollToTopComponent
 export declare const Section: typeof SectionComponent
+export declare const CheckIcon: typeof CheckIconComponent
 export declare const CloseIcon: typeof CloseIconComponent
 export declare const IconElement: typeof IconElementComponent
 export declare const LightIcon: typeof LightIconComponent

package/dist/astro.js

@@ -7,14 +7,17 @@ import CardHeaderComponent from './components/card/card-header.astro'
 import CardTitleComponent from './components/card/card-title.astro'
 import CardComponent from './components/card/card.astro'
 import ContainerComponent from './components/container/container.astro'
+import CheckboxComponent from './components/forms/checkbox.astro'
 import ErrorTextComponent from './components/forms/error-text.astro'
 import HelpTextComponent from './components/forms/help-text.astro'
 import InputAdornmentComponent from './components/forms/input-adornment.astro'
 import InputComponent from './components/forms/input.astro'
 import LabelComponent from './components/forms/label.astro'
+import TextAreaComponent from './components/forms/text-area.astro'
 import HamburgerComponent from './components/hamburger/hamburger.astro'
 import ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
 import SectionComponent from './components/section/section.astro'
+import CheckIconComponent from './icons/check-icon.astro'
 import CloseIconComponent from './icons/close-icon.astro'
 import IconElementComponent from './icons/icon-element.astro'
 import LightIconComponent from './icons/light-icon.astro'
@@ -30,14 +33,17 @@ export const CardHeader = CardHeaderComponent
 export const CardTitle = CardTitleComponent
 export const Card = CardComponent
 export const Container = ContainerComponent
+export const Checkbox = CheckboxComponent
 export const ErrorText = ErrorTextComponent
 export const HelpText = HelpTextComponent
 export const InputAdornment = InputAdornmentComponent
 export const Input = InputComponent
 export const Label = LabelComponent
+export const TextArea = TextAreaComponent
 export const Hamburger = HamburgerComponent
 export const ScrollToTop = ScrollToTopComponent
 export const Section = SectionComponent
+export const CheckIcon = CheckIconComponent
 export const CloseIcon = CloseIconComponent
 export const IconElement = IconElementComponent
 export const LightIcon = LightIconComponent

package/dist/components/forms/checkbox.astro

@@ -0,0 +1,129 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Size, Variant } from './@types/checkbox.js'
+import CheckIcon from '../../icons/check-icon.astro'
+import ErrorText from './error-text.astro'
+import HelpText from './help-text.astro'
+import styles from './checkbox.module.css'
+
+interface Props extends HTMLAttributes<'input'> {
+  id: string
+  name: string
+  label: string
+  variant?: Variant
+  size?: Size
+  intent?: Intent
+  reverse?: boolean
+  checked?: boolean
+  class?: string
+  checkBoxClasses?: string
+  containerClasses?: string
+  componentClasses?: string
+  labelClasses?: string
+  error?: boolean
+  helpText?: string
+  errorText?: string
+}
+
+const {
+  id,
+  name,
+  label,
+  variant = 'outlined',
+  size = 'md',
+  intent = 'primary',
+  reverse = false,
+  checked = false,
+  class: className,
+  checkBoxClasses,
+  containerClasses,
+  componentClasses,
+  labelClasses,
+  error = false,
+  helpText = '',
+  errorText = '',
+  ...rest
+} = Astro.props
+---
+
+<div class:list={['checkbox-container', containerClasses]}>
+  <div
+    class:list={[
+      'checkbox-component',
+      styles.container,
+      componentClasses,
+      { [styles.reverse]: reverse }
+    ]}
+  >
+    <input type="checkbox" id={id} name={name} checked={checked} class="sr-only peer" {...rest} />
+
+    <label
+      for={id}
+      class:list={[
+        'checkbox',
+        variant,
+        size,
+        intent,
+        styles.checkbox,
+        styles[variant],
+        styles[size],
+        styles[intent],
+        checkBoxClasses,
+        className
+      ]}
+      data-state={checked ? 'checked' : 'unchecked'}
+    >
+      <span
+        class:list={['checkbox-indicator', styles.indicator]}
+        data-state={checked ? 'checked' : 'unchecked'}
+      >
+        <CheckIcon class={styles.icon} />
+      </span>
+    </label>
+
+    <label for={id} class:list={[styles.label, labelClasses]}>
+      {label}
+    </label>
+  </div>
+  {
+    error ? (
+      <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+    ) : (
+      helpText?.length > 0 && <HelpText text={helpText} />
+    )
+  }
+</div>
+
+<script>
+  function setupCheckboxes() {
+    const inputs = document.querySelectorAll('input[type="checkbox"].peer')
+
+    inputs.forEach((input) => {
+      const checkboxInput = input as HTMLInputElement
+      const id = checkboxInput.id
+      // Find the visual checkbox label associated with this input
+      const visualCheckbox = document.querySelector(`label.checkbox[for="${id}"]`)
+      const indicator = visualCheckbox?.querySelector('.checkbox-indicator')
+
+      if (visualCheckbox && indicator) {
+        // Update state on change
+        checkboxInput.addEventListener('change', () => {
+          const state = checkboxInput.checked ? 'checked' : 'unchecked'
+          visualCheckbox.setAttribute('data-state', state)
+          indicator.setAttribute('data-state', state)
+        })
+
+        // Ensure initial state is correct
+        const state = checkboxInput.checked ? 'checked' : 'unchecked'
+        visualCheckbox.setAttribute('data-state', state)
+        indicator.setAttribute('data-state', state)
+      }
+    })
+  }
+
+  // Run on initial load
+  setupCheckboxes()
+
+  // Support Astro View Transitions
+  document.addEventListener('astro:page-load', setupCheckboxes)
+</script>

package/dist/components/forms/checkbox.js

@@ -1,6 +1,6 @@
 'use client'
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon } from "@radix-ui/react-icons";
+import { CheckIcon } from "../../icons/check-icon.js";
 import classnames from "classnames";
 import { Checkbox as external_radix_ui_Checkbox, Label } from "radix-ui";
 import checkbox_module from "./checkbox.module.js";

package/dist/components/forms/checkbox.module.css

@@ -3,6 +3,7 @@
 @layer infonomic-components {
   .container {
     display: flex;
+    width: 100%;
     align-items: center;
     gap: var(--gap-2);
   }

package/dist/components/forms/checkbox_module.css

@@ -4,6 +4,7 @@
   .container-Mu7CJl {
     align-items: center;
     gap: var(--gap-2);
+    width: 100%;
     display: flex;
   }
 

package/dist/components/forms/input.module.css

@@ -1,6 +1,7 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
+
   .input-wrapper,
   :global(.input-wrapper) {
     display: flex;
@@ -11,6 +12,7 @@
   .input-container,
   :global(.input-container) {
     position: relative;
+    width: 100%;
     display: flex;
     align-items: center;
     gap: var(--gap-2);

package/dist/components/forms/input_module.css

@@ -10,6 +10,7 @@
   :is(.input-container-GveKcr, .input-container) {
     align-items: center;
     gap: var(--gap-2);
+    width: 100%;
     display: flex;
     position: relative;
   }

package/dist/components/forms/text-area.astro

@@ -0,0 +1,78 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Variant } from './@types/input.js'
+import ErrorText from './error-text.astro'
+import HelpText from './help-text.astro'
+import inputStyles from './input.module.css'
+import Label from './label.astro'
+import styles from './text-area.module.css'
+
+interface Props extends HTMLAttributes<'textarea'> {
+  id: string
+  name: string
+  label: string
+  required?: boolean
+  variant?: Variant
+  intent?: Intent
+  rows?: number
+  placeHolder?: string
+  autoComplete?: string
+  error?: boolean
+  helpText?: string
+  errorText?: string
+  class?: string
+}
+
+const {
+  id,
+  name,
+  label,
+  rows = 4,
+  required = false,
+  variant = 'outlined',
+  intent = 'primary',
+  placeHolder = '',
+  autoComplete = 'off',
+  error = false,
+  helpText = '',
+  errorText = '',
+  class: className,
+  ...rest
+} = Astro.props as Props
+---
+
+<fieldset class:list={['text-area-wrapper', inputStyles['input-wrapper']]}>
+  <Label id={id} for={id} required={required} label={label} />
+  <textarea
+    id={id}
+    name={name}
+    required={required}
+    rows={rows}
+    auto-complete={autoComplete}
+    placeholder={placeHolder}
+    aria-labelledby={`label-for-${id}`}
+    aria-invalid={error}
+    aria-required={required}
+    aria-errormessage={errorText}
+    aria-describedby={error ? `error-for-${id}` : undefined}
+    class:list={[
+      'text-area',
+      variant,
+      intent,
+      inputStyles.input,
+      inputStyles[variant],
+      inputStyles[intent],
+      styles['text-area'],
+      styles[variant],
+      error && inputStyles.error,
+      className
+    ]}
+    {...rest}></textarea>
+  {
+    error ? (
+      <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+    ) : (
+      helpText?.length > 0 && <HelpText text={helpText} />
+    )
+  }
+</fieldset>

package/dist/components/forms/text-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../src/components/forms/text-area.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAOxD,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACtF,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;CAClG;AAED,eAAO,MAAM,QAAQ,GAAqB,sIAgBvC,aAAa,KAAG,KAAK,CAAC,GAAG,CAAC,OAqC5B,CAAA"}
+{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../src/components/forms/text-area.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAOxD,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACtF,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;CAClG;AAED,eAAO,MAAM,QAAQ,GAAqB,sIAgBvC,aAAa,KAAG,KAAK,CAAC,GAAG,CAAC,OAsC5B,CAAA"}

package/dist/components/forms/text-area.js

@@ -28,7 +28,7 @@ const text_area_TextArea = function({ ref, id, name, label, rows = 4, required =
                 "aria-required": required,
                 "aria-errormessage": errorText,
                 "aria-describedby": error ? `error-for-${id}` : void 0,
-                className: classnames('text-area', variant, intent, input_module.input, input_module[variant], input_module[intent], text_area_module["text-area"], {
+                className: classnames('text-area', variant, intent, input_module.input, input_module[variant], input_module[intent], text_area_module["text-area"], text_area_module[variant], {
                     [input_module.error]: error
                 }, className),
                 ...rest

package/dist/components/forms/text-area.module.css

@@ -1,10 +1,20 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
+
   .text-area,
   :global(.text-area) {
     font-size: 1.1rem;
     width: 100%;
     padding: 0.5rem;
   }
+
+  .underlined {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .outlined {}
+
+  .filled {}
 }

package/dist/components/forms/text-area.module.js

@@ -1,6 +1,7 @@
 import "./text-area_module.css";
 const text_area_module = {
     "text-area": "text-area-P_aQjC",
-    textArea: "text-area-P_aQjC"
+    textArea: "text-area-P_aQjC",
+    underlined: "underlined-a9hkur"
 };
 export { text_area_module as default };

package/dist/components/forms/text-area_module.css

@@ -6,5 +6,10 @@
     padding: .5rem;
     font-size: 1.1rem;
   }
+
+  .underlined-a9hkur {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 

package/dist/icons/check-icon.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  width?: string
+  height?: string
+  menuItem?: boolean
+  svgClass?: string
+}
+
+import IconElement from './icon-element.astro'
+import styles from './icons.module.css'
+
+const { class: className, width, height, svgClass: svgClassName, menuItem, ...rest } = Astro.props
+---
+
+<IconElement
+  class:list={['check-icon', className]}
+  width={width}
+  height={height}
+  menuItem={menuItem}
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 15 15"
+    class:list={[styles['fill-current'], svgClassName]}
+    focusable="false"
+    aria-hidden="true"
+  >
+    <path
+      d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"></path>
+  </svg>
+</IconElement>

package/dist/styles/components-vanilla.css

@@ -1 +1 @@
-@layer infonomic-base,infonomic-functional,infonomic-utilities,infonomic-theme,infonomic-typography;@layer infonomic-components{:is(.card-mqJaiW,.card){width:100%;max-width:100%;color:var(--foreground);background:var(--canvas-25);border-width:var(--border-width-thin);border-color:var(--border-color);border-style:var(--border-style-solid);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);flex-direction:column;text-decoration:none;display:flex}:is(.card-mqJaiW:is(.dark *),.card:is(.dark *)){background:var(--canvas-800)}:is(.card-hover-hvT4d6,.card-hover){transition:background .2s ease-in-out}:is(.card-hover-hvT4d6:hover,.card-hover:hover){background:oklch(from var(--theme-50)1 .03 h)}:is(.card-hover-hvT4d6:hover:is(.dark *),.card-hover:hover:is(.dark *)){background:oklch(from var(--canvas-800).2 c h)}:is(.card-header-XnoBkP,.card-header){flex-direction:column;gap:.5rem;padding:1rem;display:flex}:is(.card-title-JI7Lu3,.card-title){color:var(--headings);letter-spacing:-.015em;font-size:1.8rem;font-weight:700;line-height:1}:is(.card-description-fwu7HE,.card-description){color:var(--muted);font-size:.875rem}:is(.card-content-uhoZYJ,.card-content){flex:1;padding:0 1rem 1rem}:is(.card-footer-BxTa4b,.card-footer){align-items:center;padding:0 1rem 1rem;display:flex}:is(.container-tSpizY,.container){width:100%;max-width:60rem;margin:0 auto;padding:0 1rem}@media (width>=66rem){:is(.container-tSpizY,.container){max-width:64rem}}@media (width>=77rem){:is(.container-tSpizY,.container){max-width:74.375rem}}@media (width>=94rem){:is(.container-tSpizY,.container){max-width:87.5rem}}:is(.badge-8xVidp,.badge){font-size:var(--font-size-sm);text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--border-radius-sm);padding:.25em .4em;font-weight:400;line-height:1;display:inline-block}:is(.primary-oZyR_M,.badge-primary){color:var(--text-on-primary);background-color:var(--fill-primary-strong)}:is(.secondary-VsqJTm,.badge-secondary){color:var(--text-on-secondary);background-color:var(--fill-secondary-strong)}:is(.noeffect-R8eJtO,.badge-noeffect){color:var(--text-on-noeffect);background-color:var(--fill-noeffect-strong)}:is(.success-h2otET,.badge-success){color:var(--text-on-success);background-color:var(--fill-success-strong)}:is(.info-OG3F3u,.badge-info){color:var(--text-on-info);background-color:var(--fill-info-strong)}:is(.warning-zTXksZ,.badge-warning){color:var(--text-on-warning);background-color:var(--fill-warning-strong)}:is(.danger-hKF7l_,.badge-danger){color:var(--text-on-danger);background-color:var(--fill-danger-strong)}:is(.button-IjDhC0,.button){cursor:pointer;text-align:center;gap:var(--gap-2);white-space:nowrap;outline-offset:2px;transition:background-color var(--transition-normal),box-shadow var(--transition-normal);border-radius:var(--border-radius-sm);border:none;outline:2px solid #0000;justify-content:center;align-items:center;font-weight:400;line-height:0;display:inline-flex}:is(.button-IjDhC0:disabled,.button-IjDhC0[disabled],.button:disabled,.button[disabled]){pointer-events:none}:is(.button-IjDhC0:focus,.button-IjDhC0:active,.button:focus,.button: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)}.button-IjDhC0.square-P_6yde,.button-square{aspect-ratio:1;border-radius:var(--border-radius-sm);padding:0}.button-IjDhC0.round-uqus3n,.button-round{aspect-ratio:1;border-radius:var(--border-radius-full);padding:0}:is(.xs-jxTd5R,.button-xs){min-height:26px;padding:.2rem .4rem;font-size:.7rem}:is(.sm-uD_Ugt,.button-sm){min-height:32px;padding:.25rem .5rem;font-size:.775rem}:is(.md-Qp9ad6,.button-md){min-height:38px;padding:.625rem 1.25rem;font-size:.95rem}:is(.lg-FAYTen,.button-lg){min-height:46px;padding:.75rem 1.5rem;font-size:1.1rem}:is(.xl-Gwvhl4,.button-xl){min-height:54px;padding:.75rem 1.5rem;font-size:1.2rem}:is(.filled-CwGsrO,.button-filled){color:var(--button-variant-filled-foreground);background-color:var(--button-variant-filled)}:is(.filled-CwGsrO:hover,.button-filled:hover){background-color:var(--button-variant-filled-hover)}:is(.filled-CwGsrO:focus,.filled-CwGsrO:active,.button-filled:focus,.button-filled:active){--ring-color:var(--button-ring-color)}:is(.filled-CwGsrO:disabled,.filled-CwGsrO[disabled],.button-filled:disabled,.button-filled[disabled]){background-color:var(--button-variant-filled-disabled,oklch(from var(--button-variant-filled)calc(l*1.1)calc(c*.85)h));color:var(--button-variant-filled-foreground-disabled,oklch(from var(--button-variant-filled-foreground)calc(l*.9)calc(c*.85)h))}:is(.outlined-nZGbxu,.button-outlined){border:1px solid var(--button-variant-outlined-border);color:var(--button-variant-outlined-foreground);background-color:var(--button-variant-outlined)}:is(.outlined-nZGbxu:disabled,.outlined-nZGbxu[disabled],.button-outlined:disabled,.button-outlined[disabled]){border-color:var(--button-variant-outlined-border-disabled,oklch(from var(--button-variant-outlined-border)calc(l*1.5)calc(c*.8)h));color:var(--button-variant-outlined-foreground-disabled,oklch(from var(--button-variant-outlined-foreground)calc(l*1.1)calc(c*.7)h))}:is(.outlined-nZGbxu:hover,.button-outlined:hover){background-color:var(--button-variant-outlined-hover)}:is(.outlined-nZGbxu:focus,.outlined-nZGbxu:active,.button-outlined:focus,.button-outlined:active){--ring-color:var(--button-ring-color)}:is(.gradient-ySC3O3,.button-gradient){color:var(--button-variant-gradient-foreground);background:linear-gradient(45deg,var(--button-variant-gradient-start),var(--button-variant-gradient-end))}:is(.gradient-ySC3O3:disabled,.gradient-ySC3O3[disabled],.button-gradient:disabled,.button-gradient[disabled]){background:unset;background-color:var(--button-variant-gradient-disabled,oklch(from var(--button-variant-gradient-end)calc(l*1.2)calc(c*.85)h));color:var(--button-variant-gradient-foreground-disabled,oklch(from var(--button-variant-gradient-foreground)calc(l*.9)calc(c*.85)h))}:is(.gradient-ySC3O3:hover,.button-gradient:hover){color:var(--button-variant-gradient-foreground);background:linear-gradient(45deg,var(--button-variant-gradient-start),var(--button-variant-gradient-end))}:is(.gradient-ySC3O3:focus,.gradient-ySC3O3:active,.button-gradient:focus,.button-gradient:active){--ring-color:var(--button-ring-color)}:is(.text-GaxlcE,.button-text){background-color:var(--button-variant-text);color:var(--button-variant-text-foreground)}:is(.text-GaxlcE:disabled,.text-GaxlcE[disabled],.button-text:disabled,.button-text[disabled]){color:oklch(from var(--button-variant-text-foreground)calc(l*1.5)calc(c*.5)h)}:is(.text-GaxlcE:hover,.button-text:hover){background-color:var(--button-variant-text-hover)}:is(.text-GaxlcE:focus,.text-GaxlcE:active,.button-text:focus,.button-text:active){--ring-color:var(--button-ring-color)}:is(.primary-tUmczz,.button-primary){--button-ring-color:var(--ring-primary);--button-variant-filled:var(--fill-primary-strong);--button-variant-filled-foreground:var(--text-on-primary);--button-variant-filled-hover:var(--fill-primary-strong-hover);--button-variant-filled-disabled:var(--fill-primary-strong-disabled);--button-variant-filled-foreground-disabled:var(--text-on-primary-disabled);--button-variant-outlined:transparent;--button-variant-outlined-foreground:var(--text-primary-strong);--button-variant-outlined-hover:var(--fill-primary-weak);--button-variant-outlined-border:var(--stroke-primary);--button-variant-outlined-border-disabled:var(--stroke-primary-disabled);--button-variant-outlined-foreground-disabled:var(--text-primary-disabled);--button-variant-text:transparent;--button-variant-text-foreground:var(--text-primary-weak);--button-variant-text-hover:var(--fill-primary-weak-hover);--button-variant-gradient-start:var(--gradient-primary-start);--button-variant-gradient-end:var(--gradient-primary-end);--button-variant-gradient-foreground:var(--gradient-primary-foreground);--button-variant-gradient-disabled:var(--gradient-primary-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-primary-disabled)}:is(.secondary-UqT2AY,.button-secondary){--button-ring-color:var(--ring-secondary);--button-variant-filled:var(--fill-secondary-strong);--button-variant-filled-foreground:var(--text-on-secondary);--button-variant-filled-hover:var(--fill-secondary-strong-hover);--button-variant-filled-disabled:var(--fill-secondary-strong-disabled);--button-variant-filled-foreground-disabled:var(--text-on-secondary-disabled);--button-variant-outlined:transparent;--button-variant-outlined-foreground:var(--text-secondary-strong);--button-variant-outlined-hover:var(--fill-secondary-weak);--button-variant-outlined-border:var(--stroke-secondary);--button-variant-outlined-border-disabled:var(--stroke-secondary-disabled);--button-variant-outlined-foreground-disabled:var(--text-secondary-disabled);--button-variant-text:transparent;--button-variant-text-foreground:var(--text-secondary-weak);--button-variant-text-hover:var(--fill-secondary-weak-hover);--button-variant-gradient-start:var(--gradient-secondary-start);--button-variant-gradient-end:var(--gradient-secondary-end);--button-variant-gradient-foreground:var(--gradient-secondary-foreground);--button-variant-gradient-disabled:var(--gradient-secondary-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-secondary-disabled)}:is(.noeffect-fpxSgg,.button-noeffect){--button-ring-color:var(--ring-noeffect);--button-variant-filled:var(--fill-noeffect-strong);--button-variant-filled-foreground:var(--text-on-noeffect);--button-variant-filled-hover:var(--fill-noeffect-strong-hover);--button-variant-filled-disabled:var(--fill-noeffect-strong-disabled);--button-variant-filled-foreground-disabled:var(--text-on-noeffect-disabled);--button-variant-outlined:transparent;--button-variant-outlined-foreground:var(--text-noeffect-strong);--button-variant-outlined-hover:var(--fill-noeffect-weak);--button-variant-outlined-border:var(--stroke-noeffect);--button-variant-outlined-border-disabled:var(--stroke-noeffect-disabled);--button-variant-outlined-foreground-disabled:var(--text-noeffect-disabled);--button-variant-text:transparent;--button-variant-text-foreground:var(--text-noeffect-weak);--button-variant-text-hover:var(--fill-noeffect-weak-hover);--button-variant-gradient-start:var(--gradient-noeffect-start);--button-variant-gradient-end:var(--gradient-noeffect-end);--button-variant-gradient-foreground:var(--gradient-noeffect-foreground);--button-variant-gradient-disabled:var(--gradient-noeffect-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-noeffect-disabled)}:is(.success-fTNDEn,.button-success){--button-ring-color:var(--ring-success);--button-variant-filled:var(--fill-success-strong);--button-variant-filled-foreground:var(--text-on-success);--button-variant-filled-hover:var(--fill-success-strong-hover);--button-variant-filled-disabled:var(--fill-success-strong-disabled);--button-variant-filled-foreground-disabled:var(--text-on-success-disabled);--button-variant-outlined:transparent;--button-variant-outlined-foreground:var(--text-success-strong);--button-variant-outlined-hover:var(--fill-success-weak);--button-variant-outlined-border:var(--stroke-success);--button-variant-outlined-border-disabled:var(--stroke-success-disabled);--button-variant-outlined-foreground-disabled:var(--text-success-disabled);--button-variant-text:transparent;--button-variant-text-foreground:var(--text-success-weak);--button-variant-text-hover:var(--fill-success-weak-hover);--button-variant-gradient-start:var(--gradient-success-start);--button-variant-gradient-end:var(--gradient-success-end);--button-variant-gradient-foreground:var(--gradient-success-foreground);--button-variant-gradient-disabled:var(--gradient-success-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-success-disabled)}:is(.info-qrdXQD,.button-info){--button-ring-color:var(--ring-info);--button-variant-filled:var(--fill-info-strong);--button-variant-filled-foreground:var(--text-on-info);--button-variant-filled-hover:var(--fill-info-strong-hover);--button-variant-filled-disabled:var(--fill-info-strong-disabled);--button-variant-filled-foreground-disabled:var(--text-on-info-disabled);--button-variant-outlined:transparent;--button-variant-outlined-foreground:var(--text-info-strong);--button-variant-outlined-hover:var(--fill-info-weak);--button-variant-outlined-border:var(--stroke-info);--button-variant-outlined-border-disabled:var(--stroke-info-disabled);--button-variant-outlined-foreground-disabled:var(--text-info-disabled);--button-variant-text:transparent;--button-variant-text-foreground:var(--text-info-weak);--button-variant-text-hover:var(--fill-info-weak-hover);--button-variant-gradient-start:var(--gradient-info-start);--button-variant-gradient-end:var(--gradient-info-end);--button-variant-gradient-foreground:var(--gradient-info-foreground);--button-variant-gradient-disabled:var(--gradient-info-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-info-disabled)}:is(.warning-a00T3A,.button-warning){--button-ring-color:var(--ring-warning);--button-variant-filled:var(--fill-warning-strong);--button-variant-filled-foreground:var(--text-on-warning);--button-variant-filled-hover:var(--fill-warning-strong-hover);--button-variant-filled-disabled:var(--fill-warning-strong-disabled);--button-variant-filled-foreground-disabled:var(--text-on-warning-disabled);--button-variant-outlined:transparent;--button-variant-outlined-foreground:var(--text-warning-strong);--button-variant-outlined-hover:var(--fill-warning-weak);--button-variant-outlined-border:var(--stroke-warning);--button-variant-outlined-border-disabled:var(--stroke-warning-disabled);--button-variant-outlined-foreground-disabled:var(--text-warning-disabled);--button-variant-text:transparent;--button-variant-text-foreground:var(--text-warning-weak);--button-variant-text-hover:var(--fill-warning-weak-hover);--button-variant-gradient-start:var(--gradient-warning-start);--button-variant-gradient-end:var(--gradient-warning-end);--button-variant-gradient-foreground:var(--gradient-warning-foreground);--button-variant-gradient-disabled:var(--gradient-warning-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-warning-disabled)}:is(.danger-rwIV_i,.button-danger){--button-ring-color:var(--ring-danger);--button-variant-filled:var(--fill-danger-strong);--button-variant-filled-foreground:var(--text-on-danger);--button-variant-filled-hover:var(--fill-danger-strong-hover);--button-variant-filled-disabled:var(--fill-danger-strong-disabled);--button-variant-filled-foreground-disabled:var(--text-on-danger-disabled);--button-variant-outlined:transparent;--button-variant-outlined-foreground:var(--text-danger-strong);--button-variant-outlined-hover:var(--fill-danger-weak);--button-variant-outlined-border:var(--stroke-danger);--button-variant-outlined-border-disabled:var(--stroke-danger-disabled);--button-variant-outlined-foreground-disabled:var(--text-danger-disabled);--button-variant-text:transparent;--button-variant-text-foreground:var(--text-danger-weak);--button-variant-text-hover:var(--fill-danger-weak-hover);--button-variant-gradient-start:var(--gradient-danger-start);--button-variant-gradient-end:var(--gradient-danger-end);--button-variant-gradient-foreground:var(--gradient-danger-foreground);--button-variant-gradient-disabled:var(--gradient-danger-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-danger-disabled)}:is(.fullWidth-wXvP0v,.button-full-width){width:100%;display:flex}:is(.button-group-uqvOi8,.button-group){place-items:center;gap:var(--gap-2);flex-direction:column;display:flex}@media screen and (width>=40rem){:is(.button-group-uqvOi8,.button-group){flex-direction:row}}:is(.copy-button-container-vCNz8o,.copy-button-container){display:inline-block}:is(.copy-button-oa4bdj svg,.copy-button svg){width:90%;height:90%;display:block}:is(.xs-lZmf78,.copy-button-xs){width:26px;height:26px;min-height:26px;padding:.25rem}:is(.sm-KNN1e5,.copy-button-sm){width:32px;height:32px;min-height:32px;padding:.35rem}:is(.md-OoH0l4,.copy-button-md){width:38px;height:38px;min-height:38px;padding:.45rem}:is(.lg-uu5ujz,.copy-button-lg){width:46px;height:46px;min-height:46px;padding:.55rem}:is(.xl-pFYyrS,.copy-button-xl){width:54px;height:54px;min-height:54px;padding:.65rem}:is(.input-wrapper-xxN94z,.input-wrapper){gap:var(--gap-1);flex-direction:column;display:flex}:is(.input-container-GveKcr,.input-container){align-items:center;gap:var(--gap-2);display:flex;position:relative}:is(.input-voSL1w,.input){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:400;display:inline-flex}:is(.input-voSL1w:focus,.input-voSL1w:active,.input:focus,.input: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)}:is(.input-voSL1w:disabled,.input-voSL1w[disabled],.input:disabled,.input[disabled]){pointer-events:none}:is(.label-a8k0oS,.input-label){color:var(--label-color);font-size:.875rem;font-weight:500}:is(.sm-cI5ETu,.input-sm){min-height:32px;padding:.25rem .5rem;font-size:.875rem;line-height:0}:is(.md-moqLi4,.input-md){min-height:38px;padding:.4rem .5rem;font-size:1.1rem;line-height:0}:is(.lg-Tn3YZZ,.input-lg){min-height:46px;padding:.5rem;font-size:1.2rem;line-height:0}:is(.start-adornment-H0sdmX,.end-adornment-xl3mid,.input-start-adornment,.input-end-adornment){align-items:center;display:flex;position:absolute}:is(.start-adornment-H0sdmX,.input-start-adornment){left:5px}:is(.end-adornment-xl3mid,.input-end-adornment){right:5px}:is(.help-text-MZW4yX,.input-help-text){color:var(--help-text-color);font-size:.75rem}:is(.outlined-xbB8mE,.input-outlined){border:1px solid var(--input-variant-outlined-border);background-color:#0000}:is(.outlined-xbB8mE:hover,.input-outlined:hover){border:1px solid var(--input-variant-outlined-hover-border)}:is(.outlined-xbB8mE:focus,.outlined-xbB8mE:active,.input-outlined:focus,.input-outlined:active){--ring-color:var(--input-variant-outline-ring-color)}:is(.underlined-zAz2HP,.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-zAz2HP.sm-cI5ETu,.input-underlined.input-sm{min-height:26px;padding:.25rem .1rem}.underlined-zAz2HP.md-moqLi4,.input-underlined.input-md{min-height:30px;padding:.25rem .1rem}.underlined-zAz2HP.lg-Tn3YZZ,.input-underlined.input-lg{min-height:34px;padding:0 .1rem}:is(.underlined-zAz2HP:hover,.input-underlined:hover){border-bottom:1px solid var(--input-variant-underlined-hover-border)}:is(.filled-M1_LzJ,.input-filled){background-color:var(--input-variant-filled)}:is(.error-n0kSb0,.input-error),:is(.error-n0kSb0:hover,.input-error:hover){border:1px solid var(--red-400)}:is(.error-n0kSb0:focus,.error-n0kSb0:active,.input-error:focus,.input-error:active){--ring-color:var(--red-300)}.underlined-zAz2HP.start-adornment-padding-YAcYOx,.start-adornment-padding-YAcYOx,.input-underlined.input-start-adornment-padding,.input-start-adornment-padding{padding-left:2rem}.underlined-zAz2HP.end-adornment-padding-nC63CK,.end-adornment-padding-nC63CK,.input-underlined.input-end-adornment-padding,.input-end-adornment-padding{padding-right:2rem}.underlined-zAz2HP.start-adornment-H0sdmX,.input-underlined.input-start-adornment{left:0}.underlined-zAz2HP.end-adornment-xl3mid,.input-underlined.input-end-adornment{right:0}:is(.primary-xZZpZI,.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-WWDy2x,.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-LHbgak,.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-pMbTwx,.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-SRpUkb,.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-mHL8O2,.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-Rzx3WQ,.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)}:is(.adornment-IbSUaL,.input-adornment){white-space:nowrap;align-items:center;line-height:0;display:flex}:is(.start-hcDqEk,.input-adornment-start){justify-content:flex-start}:is(.end-j0ZhyO,.input-adornment-end){justify-content:flex-end}:is(.text-area-P_aQjC,.text-area){width:100%;padding:.5rem;font-size:1.1rem}:is(.label-Q88hWY,.label){color:var(--text);font-weight:500;display:block}:is(.required-uod5eu,.label-required){color:var(--error)}:is(.text-xJE0DB,.error-text){color:var(--error);font-size:.875rem}:is(.text-U6KD9f,.help-text){color:var(--muted);font-size:.875rem}:is(.section-CEcZOp,.section){width:100%;position:relative}:is(.scroll-to-top-WYqAAl,.scroll-to-top){opacity:0;visibility:hidden;z-index:20;width:0;height:0;color:var(--text-on-primary);background-color:var(--fill-primary-strong);cursor:pointer;border-style:none;outline:none;justify-content:center;align-items:center;margin:0;padding:0;text-decoration:none;transition:all .3s cubic-bezier(.25,.8,.5,1),color 1ms;display:flex;position:fixed;bottom:45px;right:30px}.scroll-to-top-WYqAAl span,.scroll-to-top span{width:18px;padding-bottom:3px}.scroll-to-top-WYqAAl span svg path,.scroll-to-top span svg path{stroke:none;fill:var(--text-on-primary)}.scroll-to-top-WYqAAl:hover,.scroll-to-top-WYqAAl:focus,.scroll-to-top:hover,.scroll-to-top:focus{color:var(--text-on-primary);background-color:var(--fill-primary-strong-hover);transform:translateY(-5px)}:is(.scroll-to-top-shown-Wemu5m,.scroll-to-top-shown){opacity:1;visibility:visible;border-radius:20px;width:40px;min-width:0;height:40px;padding:0;bottom:20px;right:10px}@media screen and (width>=587px){:is(.scroll-to-top-WYqAAl,.scroll-to-top){bottom:45px;right:45px}.scroll-to-top-WYqAAl span,.scroll-to-top span{width:18px}:is(.scroll-to-top-shown-Wemu5m,.scroll-to-top-shown){border-radius:21px;width:42px;height:42px;bottom:22px;right:22px}}}
+@layer infonomic-base,infonomic-functional,infonomic-utilities,infonomic-theme,infonomic-typography;@layer infonomic-components{:is(.card-mqJaiW,.card){width:100%;max-width:100%;color:var(--foreground);background:var(--canvas-25);border-width:var(--border-width-thin);border-color:var(--border-color);border-style:var(--border-style-solid);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);flex-direction:column;text-decoration:none;display:flex}:is(.card-mqJaiW:is(.dark *),.card:is(.dark *)){background:var(--canvas-800)}:is(.card-hover-hvT4d6,.card-hover){transition:background .2s ease-in-out}:is(.card-hover-hvT4d6:hover,.card-hover:hover){background:oklch(from var(--theme-50)1 .03 h)}:is(.card-hover-hvT4d6:hover:is(.dark *),.card-hover:hover:is(.dark *)){background:oklch(from var(--canvas-800).2 c h)}:is(.card-header-XnoBkP,.card-header){flex-direction:column;gap:.5rem;padding:1rem;display:flex}:is(.card-title-JI7Lu3,.card-title){color:var(--headings);letter-spacing:-.015em;font-size:1.8rem;font-weight:700;line-height:1}:is(.card-description-fwu7HE,.card-description){color:var(--muted);font-size:.875rem}:is(.card-content-uhoZYJ,.card-content){flex:1;padding:0 1rem 1rem}:is(.card-footer-BxTa4b,.card-footer){align-items:center;padding:0 1rem 1rem;display:flex}:is(.container-tSpizY,.container){width:100%;max-width:60rem;margin:0 auto;padding:0 1rem}@media (width>=66rem){:is(.container-tSpizY,.container){max-width:64rem}}@media (width>=77rem){:is(.container-tSpizY,.container){max-width:74.375rem}}@media (width>=94rem){:is(.container-tSpizY,.container){max-width:87.5rem}}:is(.badge-8xVidp,.badge){font-size:var(--font-size-sm);text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--border-radius-sm);padding:.25em .4em;font-weight:400;line-height:1;display:inline-block}:is(.primary-oZyR_M,.badge-primary){color:var(--text-on-primary);background-color:var(--fill-primary-strong)}:is(.secondary-VsqJTm,.badge-secondary){color:var(--text-on-secondary);background-color:var(--fill-secondary-strong)}:is(.noeffect-R8eJtO,.badge-noeffect){color:var(--text-on-noeffect);background-color:var(--fill-noeffect-strong)}:is(.success-h2otET,.badge-success){color:var(--text-on-success);background-color:var(--fill-success-strong)}:is(.info-OG3F3u,.badge-info){color:var(--text-on-info);background-color:var(--fill-info-strong)}:is(.warning-zTXksZ,.badge-warning){color:var(--text-on-warning);background-color:var(--fill-warning-strong)}:is(.danger-hKF7l_,.badge-danger){color:var(--text-on-danger);background-color:var(--fill-danger-strong)}:is(.button-IjDhC0,.button){cursor:pointer;text-align:center;gap:var(--gap-2);white-space:nowrap;outline-offset:2px;transition:background-color var(--transition-normal),box-shadow var(--transition-normal);border-radius:var(--border-radius-sm);border:none;outline:2px solid #0000;justify-content:center;align-items:center;font-weight:400;line-height:0;display:inline-flex}:is(.button-IjDhC0:disabled,.button-IjDhC0[disabled],.button:disabled,.button[disabled]){pointer-events:none}:is(.button-IjDhC0:focus,.button-IjDhC0:active,.button:focus,.button: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)}.button-IjDhC0.square-P_6yde,.button-square{aspect-ratio:1;border-radius:var(--border-radius-sm);padding:0}.button-IjDhC0.round-uqus3n,.button-round{aspect-ratio:1;border-radius:var(--border-radius-full);padding:0}:is(.xs-jxTd5R,.button-xs){min-height:26px;padding:.2rem .4rem;font-size:.7rem}:is(.sm-uD_Ugt,.button-sm){min-height:32px;padding:.25rem .5rem;font-size:.775rem}:is(.md-Qp9ad6,.button-md){min-height:38px;padding:.625rem 1.25rem;font-size:.95rem}:is(.lg-FAYTen,.button-lg){min-height:46px;padding:.75rem 1.5rem;font-size:1.1rem}:is(.xl-Gwvhl4,.button-xl){min-height:54px;padding:.75rem 1.5rem;font-size:1.2rem}:is(.filled-CwGsrO,.button-filled){color:var(--button-variant-filled-foreground);background-color:var(--button-variant-filled)}:is(.filled-CwGsrO:hover,.button-filled:hover){background-color:var(--button-variant-filled-hover)}:is(.filled-CwGsrO:focus,.filled-CwGsrO:active,.button-filled:focus,.button-filled:active){--ring-color:var(--button-ring-color)}:is(.filled-CwGsrO:disabled,.filled-CwGsrO[disabled],.button-filled:disabled,.button-filled[disabled]){background-color:var(--button-variant-filled-disabled,oklch(from var(--button-variant-filled)calc(l*1.1)calc(c*.85)h));color:var(--button-variant-filled-foreground-disabled,oklch(from var(--button-variant-filled-foreground)calc(l*.9)calc(c*.85)h))}:is(.outlined-nZGbxu,.button-outlined){border:1px solid var(--button-variant-outlined-border);color:var(--button-variant-outlined-foreground);background-color:var(--button-variant-outlined)}:is(.outlined-nZGbxu:disabled,.outlined-nZGbxu[disabled],.button-outlined:disabled,.button-outlined[disabled]){border-color:var(--button-variant-outlined-border-disabled,oklch(from var(--button-variant-outlined-border)calc(l*1.5)calc(c*.8)h));color:var(--button-variant-outlined-foreground-disabled,oklch(from var(--button-variant-outlined-foreground)calc(l*1.1)calc(c*.7)h))}:is(.outlined-nZGbxu:hover,.button-outlined:hover){background-color:var(--button-variant-outlined-hover)}:is(.outlined-nZGbxu:focus,.outlined-nZGbxu:active,.button-outlined:focus,.button-outlined:active){--ring-color:var(--button-ring-color)}:is(.gradient-ySC3O3,.button-gradient){color:var(--button-variant-gradient-foreground);background:linear-gradient(45deg,var(--button-variant-gradient-start),var(--button-variant-gradient-end))}:is(.gradient-ySC3O3:disabled,.gradient-ySC3O3[disabled],.button-gradient:disabled,.button-gradient[disabled]){background:unset;background-color:var(--button-variant-gradient-disabled,oklch(from var(--button-variant-gradient-end)calc(l*1.2)calc(c*.85)h));color:var(--button-variant-gradient-foreground-disabled,oklch(from var(--button-variant-gradient-foreground)calc(l*.9)calc(c*.85)h))}:is(.gradient-ySC3O3:hover,.button-gradient:hover){color:var(--button-variant-gradient-foreground);background:linear-gradient(45deg,var(--button-variant-gradient-start),var(--button-variant-gradient-end))}:is(.gradient-ySC3O3:focus,.gradient-ySC3O3:active,.button-gradient:focus,.button-gradient:active){--ring-color:var(--button-ring-color)}:is(.text-GaxlcE,.button-text){background-color:var(--button-variant-text);color:var(--button-variant-text-foreground)}:is(.text-GaxlcE:disabled,.text-GaxlcE[disabled],.button-text:disabled,.button-text[disabled]){color:oklch(from var(--button-variant-text-foreground)calc(l*1.5)calc(c*.5)h)}:is(.text-GaxlcE:hover,.button-text:hover){background-color:var(--button-variant-text-hover)}:is(.text-GaxlcE:focus,.text-GaxlcE:active,.button-text:focus,.button-text:active){--ring-color:var(--button-ring-color)}:is(.primary-tUmczz,.button-primary){--button-ring-color:var(--ring-primary);--button-variant-filled:var(--fill-primary-strong);--button-variant-filled-foreground:var(--text-on-primary);--button-variant-filled-hover:var(--fill-primary-strong-hover);--button-variant-filled-disabled:var(--fill-primary-strong-disabled);--button-variant-filled-foreground-disabled:var(--text-on-primary-disabled);--button-variant-outlined:transparent;--button-variant-outlined-foreground:var(--text-primary-strong);--button-variant-outlined-hover:var(--fill-primary-weak);--button-variant-outlined-border:var(--stroke-primary);--button-variant-outlined-border-disabled:var(--stroke-primary-disabled);--button-variant-outlined-foreground-disabled:var(--text-primary-disabled);--button-variant-text:transparent;--button-variant-text-foreground:var(--text-primary-weak);--button-variant-text-hover:var(--fill-primary-weak-hover);--button-variant-gradient-start:var(--gradient-primary-start);--button-variant-gradient-end:var(--gradient-primary-end);--button-variant-gradient-foreground:var(--gradient-primary-foreground);--button-variant-gradient-disabled:var(--gradient-primary-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-primary-disabled)}:is(.secondary-UqT2AY,.button-secondary){--button-ring-color:var(--ring-secondary);--button-variant-filled:var(--fill-secondary-strong);--button-variant-filled-foreground:var(--text-on-secondary);--button-variant-filled-hover:var(--fill-secondary-strong-hover);--button-variant-filled-disabled:var(--fill-secondary-strong-disabled);--button-variant-filled-foreground-disabled:var(--text-on-secondary-disabled);--button-variant-outlined:transparent;--button-variant-outlined-foreground:var(--text-secondary-strong);--button-variant-outlined-hover:var(--fill-secondary-weak);--button-variant-outlined-border:var(--stroke-secondary);--button-variant-outlined-border-disabled:var(--stroke-secondary-disabled);--button-variant-outlined-foreground-disabled:var(--text-secondary-disabled);--button-variant-text:transparent;--button-variant-text-foreground:var(--text-secondary-weak);--button-variant-text-hover:var(--fill-secondary-weak-hover);--button-variant-gradient-start:var(--gradient-secondary-start);--button-variant-gradient-end:var(--gradient-secondary-end);--button-variant-gradient-foreground:var(--gradient-secondary-foreground);--button-variant-gradient-disabled:var(--gradient-secondary-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-secondary-disabled)}:is(.noeffect-fpxSgg,.button-noeffect){--button-ring-color:var(--ring-noeffect);--button-variant-filled:var(--fill-noeffect-strong);--button-variant-filled-foreground:var(--text-on-noeffect);--button-variant-filled-hover:var(--fill-noeffect-strong-hover);--button-variant-filled-disabled:var(--fill-noeffect-strong-disabled);--button-variant-filled-foreground-disabled:var(--text-on-noeffect-disabled);--button-variant-outlined:transparent;--button-variant-outlined-foreground:var(--text-noeffect-strong);--button-variant-outlined-hover:var(--fill-noeffect-weak);--button-variant-outlined-border:var(--stroke-noeffect);--button-variant-outlined-border-disabled:var(--stroke-noeffect-disabled);--button-variant-outlined-foreground-disabled:var(--text-noeffect-disabled);--button-variant-text:transparent;--button-variant-text-foreground:var(--text-noeffect-weak);--button-variant-text-hover:var(--fill-noeffect-weak-hover);--button-variant-gradient-start:var(--gradient-noeffect-start);--button-variant-gradient-end:var(--gradient-noeffect-end);--button-variant-gradient-foreground:var(--gradient-noeffect-foreground);--button-variant-gradient-disabled:var(--gradient-noeffect-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-noeffect-disabled)}:is(.success-fTNDEn,.button-success){--button-ring-color:var(--ring-success);--button-variant-filled:var(--fill-success-strong);--button-variant-filled-foreground:var(--text-on-success);--button-variant-filled-hover:var(--fill-success-strong-hover);--button-variant-filled-disabled:var(--fill-success-strong-disabled);--button-variant-filled-foreground-disabled:var(--text-on-success-disabled);--button-variant-outlined:transparent;--button-variant-outlined-foreground:var(--text-success-strong);--button-variant-outlined-hover:var(--fill-success-weak);--button-variant-outlined-border:var(--stroke-success);--button-variant-outlined-border-disabled:var(--stroke-success-disabled);--button-variant-outlined-foreground-disabled:var(--text-success-disabled);--button-variant-text:transparent;--button-variant-text-foreground:var(--text-success-weak);--button-variant-text-hover:var(--fill-success-weak-hover);--button-variant-gradient-start:var(--gradient-success-start);--button-variant-gradient-end:var(--gradient-success-end);--button-variant-gradient-foreground:var(--gradient-success-foreground);--button-variant-gradient-disabled:var(--gradient-success-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-success-disabled)}:is(.info-qrdXQD,.button-info){--button-ring-color:var(--ring-info);--button-variant-filled:var(--fill-info-strong);--button-variant-filled-foreground:var(--text-on-info);--button-variant-filled-hover:var(--fill-info-strong-hover);--button-variant-filled-disabled:var(--fill-info-strong-disabled);--button-variant-filled-foreground-disabled:var(--text-on-info-disabled);--button-variant-outlined:transparent;--button-variant-outlined-foreground:var(--text-info-strong);--button-variant-outlined-hover:var(--fill-info-weak);--button-variant-outlined-border:var(--stroke-info);--button-variant-outlined-border-disabled:var(--stroke-info-disabled);--button-variant-outlined-foreground-disabled:var(--text-info-disabled);--button-variant-text:transparent;--button-variant-text-foreground:var(--text-info-weak);--button-variant-text-hover:var(--fill-info-weak-hover);--button-variant-gradient-start:var(--gradient-info-start);--button-variant-gradient-end:var(--gradient-info-end);--button-variant-gradient-foreground:var(--gradient-info-foreground);--button-variant-gradient-disabled:var(--gradient-info-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-info-disabled)}:is(.warning-a00T3A,.button-warning){--button-ring-color:var(--ring-warning);--button-variant-filled:var(--fill-warning-strong);--button-variant-filled-foreground:var(--text-on-warning);--button-variant-filled-hover:var(--fill-warning-strong-hover);--button-variant-filled-disabled:var(--fill-warning-strong-disabled);--button-variant-filled-foreground-disabled:var(--text-on-warning-disabled);--button-variant-outlined:transparent;--button-variant-outlined-foreground:var(--text-warning-strong);--button-variant-outlined-hover:var(--fill-warning-weak);--button-variant-outlined-border:var(--stroke-warning);--button-variant-outlined-border-disabled:var(--stroke-warning-disabled);--button-variant-outlined-foreground-disabled:var(--text-warning-disabled);--button-variant-text:transparent;--button-variant-text-foreground:var(--text-warning-weak);--button-variant-text-hover:var(--fill-warning-weak-hover);--button-variant-gradient-start:var(--gradient-warning-start);--button-variant-gradient-end:var(--gradient-warning-end);--button-variant-gradient-foreground:var(--gradient-warning-foreground);--button-variant-gradient-disabled:var(--gradient-warning-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-warning-disabled)}:is(.danger-rwIV_i,.button-danger){--button-ring-color:var(--ring-danger);--button-variant-filled:var(--fill-danger-strong);--button-variant-filled-foreground:var(--text-on-danger);--button-variant-filled-hover:var(--fill-danger-strong-hover);--button-variant-filled-disabled:var(--fill-danger-strong-disabled);--button-variant-filled-foreground-disabled:var(--text-on-danger-disabled);--button-variant-outlined:transparent;--button-variant-outlined-foreground:var(--text-danger-strong);--button-variant-outlined-hover:var(--fill-danger-weak);--button-variant-outlined-border:var(--stroke-danger);--button-variant-outlined-border-disabled:var(--stroke-danger-disabled);--button-variant-outlined-foreground-disabled:var(--text-danger-disabled);--button-variant-text:transparent;--button-variant-text-foreground:var(--text-danger-weak);--button-variant-text-hover:var(--fill-danger-weak-hover);--button-variant-gradient-start:var(--gradient-danger-start);--button-variant-gradient-end:var(--gradient-danger-end);--button-variant-gradient-foreground:var(--gradient-danger-foreground);--button-variant-gradient-disabled:var(--gradient-danger-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-danger-disabled)}:is(.fullWidth-wXvP0v,.button-full-width){width:100%;display:flex}:is(.button-group-uqvOi8,.button-group){place-items:center;gap:var(--gap-2);flex-direction:column;display:flex}@media screen and (width>=40rem){:is(.button-group-uqvOi8,.button-group){flex-direction:row}}:is(.copy-button-container-vCNz8o,.copy-button-container){display:inline-block}:is(.copy-button-oa4bdj svg,.copy-button svg){width:90%;height:90%;display:block}:is(.xs-lZmf78,.copy-button-xs){width:26px;height:26px;min-height:26px;padding:.25rem}:is(.sm-KNN1e5,.copy-button-sm){width:32px;height:32px;min-height:32px;padding:.35rem}:is(.md-OoH0l4,.copy-button-md){width:38px;height:38px;min-height:38px;padding:.45rem}:is(.lg-uu5ujz,.copy-button-lg){width:46px;height:46px;min-height:46px;padding:.55rem}:is(.xl-pFYyrS,.copy-button-xl){width:54px;height:54px;min-height:54px;padding:.65rem}:is(.input-wrapper-xxN94z,.input-wrapper){gap:var(--gap-1);flex-direction:column;display:flex}:is(.input-container-GveKcr,.input-container){align-items:center;gap:var(--gap-2);width:100%;display:flex;position:relative}:is(.input-voSL1w,.input){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:400;display:inline-flex}:is(.input-voSL1w:focus,.input-voSL1w:active,.input:focus,.input: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)}:is(.input-voSL1w:disabled,.input-voSL1w[disabled],.input:disabled,.input[disabled]){pointer-events:none}:is(.label-a8k0oS,.input-label){color:var(--label-color);font-size:.875rem;font-weight:500}:is(.sm-cI5ETu,.input-sm){min-height:32px;padding:.25rem .5rem;font-size:.875rem;line-height:0}:is(.md-moqLi4,.input-md){min-height:38px;padding:.4rem .5rem;font-size:1.1rem;line-height:0}:is(.lg-Tn3YZZ,.input-lg){min-height:46px;padding:.5rem;font-size:1.2rem;line-height:0}:is(.start-adornment-H0sdmX,.end-adornment-xl3mid,.input-start-adornment,.input-end-adornment){align-items:center;display:flex;position:absolute}:is(.start-adornment-H0sdmX,.input-start-adornment){left:5px}:is(.end-adornment-xl3mid,.input-end-adornment){right:5px}:is(.help-text-MZW4yX,.input-help-text){color:var(--help-text-color);font-size:.75rem}:is(.outlined-xbB8mE,.input-outlined){border:1px solid var(--input-variant-outlined-border);background-color:#0000}:is(.outlined-xbB8mE:hover,.input-outlined:hover){border:1px solid var(--input-variant-outlined-hover-border)}:is(.outlined-xbB8mE:focus,.outlined-xbB8mE:active,.input-outlined:focus,.input-outlined:active){--ring-color:var(--input-variant-outline-ring-color)}:is(.underlined-zAz2HP,.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-zAz2HP.sm-cI5ETu,.input-underlined.input-sm{min-height:26px;padding:.25rem .1rem}.underlined-zAz2HP.md-moqLi4,.input-underlined.input-md{min-height:30px;padding:.25rem .1rem}.underlined-zAz2HP.lg-Tn3YZZ,.input-underlined.input-lg{min-height:34px;padding:0 .1rem}:is(.underlined-zAz2HP:hover,.input-underlined:hover){border-bottom:1px solid var(--input-variant-underlined-hover-border)}:is(.filled-M1_LzJ,.input-filled){background-color:var(--input-variant-filled)}:is(.error-n0kSb0,.input-error),:is(.error-n0kSb0:hover,.input-error:hover){border:1px solid var(--red-400)}:is(.error-n0kSb0:focus,.error-n0kSb0:active,.input-error:focus,.input-error:active){--ring-color:var(--red-300)}.underlined-zAz2HP.start-adornment-padding-YAcYOx,.start-adornment-padding-YAcYOx,.input-underlined.input-start-adornment-padding,.input-start-adornment-padding{padding-left:2rem}.underlined-zAz2HP.end-adornment-padding-nC63CK,.end-adornment-padding-nC63CK,.input-underlined.input-end-adornment-padding,.input-end-adornment-padding{padding-right:2rem}.underlined-zAz2HP.start-adornment-H0sdmX,.input-underlined.input-start-adornment{left:0}.underlined-zAz2HP.end-adornment-xl3mid,.input-underlined.input-end-adornment{right:0}:is(.primary-xZZpZI,.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-WWDy2x,.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-LHbgak,.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-pMbTwx,.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-SRpUkb,.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-mHL8O2,.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-Rzx3WQ,.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)}:is(.adornment-IbSUaL,.input-adornment){white-space:nowrap;align-items:center;line-height:0;display:flex}:is(.start-hcDqEk,.input-adornment-start){justify-content:flex-start}:is(.end-j0ZhyO,.input-adornment-end){justify-content:flex-end}:is(.text-area-P_aQjC,.text-area){width:100%;padding:.5rem;font-size:1.1rem}.underlined-a9hkur{padding-left:0;padding-right:0}:is(.label-Q88hWY,.label){color:var(--text);font-weight:500;display:block}:is(.required-uod5eu,.label-required){color:var(--error)}:is(.text-xJE0DB,.error-text){color:var(--error);font-size:.875rem}:is(.text-U6KD9f,.help-text){color:var(--muted);font-size:.875rem}:is(.section-CEcZOp,.section){width:100%;position:relative}:is(.scroll-to-top-WYqAAl,.scroll-to-top){opacity:0;visibility:hidden;z-index:20;width:0;height:0;color:var(--text-on-primary);background-color:var(--fill-primary-strong);cursor:pointer;border-style:none;outline:none;justify-content:center;align-items:center;margin:0;padding:0;text-decoration:none;transition:all .3s cubic-bezier(.25,.8,.5,1),color 1ms;display:flex;position:fixed;bottom:45px;right:30px}.scroll-to-top-WYqAAl span,.scroll-to-top span{width:18px;padding-bottom:3px}.scroll-to-top-WYqAAl span svg path,.scroll-to-top span svg path{stroke:none;fill:var(--text-on-primary)}.scroll-to-top-WYqAAl:hover,.scroll-to-top-WYqAAl:focus,.scroll-to-top:hover,.scroll-to-top:focus{color:var(--text-on-primary);background-color:var(--fill-primary-strong-hover);transform:translateY(-5px)}:is(.scroll-to-top-shown-Wemu5m,.scroll-to-top-shown){opacity:1;visibility:visible;border-radius:20px;width:40px;min-width:0;height:40px;padding:0;bottom:20px;right:10px}@media screen and (width>=587px){:is(.scroll-to-top-WYqAAl,.scroll-to-top){bottom:45px;right:45px}.scroll-to-top-WYqAAl span,.scroll-to-top span{width:18px}:is(.scroll-to-top-shown-Wemu5m,.scroll-to-top-shown){border-radius:21px;width:42px;height:42px;bottom:22px;right:22px}}}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [

package/src/astro.js

@@ -8,13 +8,16 @@ import CardHeaderComponent from './components/card/card-header.astro'
 import CardTitleComponent from './components/card/card-title.astro'
 import ContainerComponent from './components/container/container.astro'
 import HamburgerComponent from './components/hamburger/hamburger.astro'
+import CheckboxComponent from './components/forms/checkbox.astro'
 import ErrorTextComponent from './components/forms/error-text.astro'
 import HelpTextComponent from './components/forms/help-text.astro'
 import InputComponent from './components/forms/input.astro'
 import InputAdornmentComponent from './components/forms/input-adornment.astro'
 import LabelComponent from './components/forms/label.astro'
+import TextAreaComponent from './components/forms/text-area.astro'
 import SectionComponent from './components/section/section.astro'
 import ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
+import CheckIconComponent from './icons/check-icon.astro'
 import CloseIconComponent from './icons/close-icon.astro'
 import IconElementComponent from './icons/icon-element.astro'
 import LightIconComponent from './icons/light-icon.astro'
@@ -32,15 +35,18 @@ export const CardHeader = CardHeaderComponent
 export const CardTitle = CardTitleComponent
 export const Card = CardComponent
 export const Container = ContainerComponent
+export const Checkbox = CheckboxComponent
 export const ErrorText = ErrorTextComponent
 export const HelpText = HelpTextComponent
 export const InputAdornment = InputAdornmentComponent
 export const Input = InputComponent
 export const Label = LabelComponent
+export const TextArea = TextAreaComponent
 export const Section = SectionComponent
 export const ScrollToTop = ScrollToTopComponent
 export const IconElement = IconElementComponent
 export const LightIcon = LightIconComponent
 export const MoonIcon = MoonIconComponent
 export const SearchIcon = SearchIconComponent
+export const CheckIcon = CheckIconComponent
 export const CloseIcon = CloseIconComponent

package/src/components/forms/checkbox.astro

@@ -0,0 +1,129 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Size, Variant } from './@types/checkbox.js'
+import CheckIcon from '../../icons/check-icon.astro'
+import ErrorText from './error-text.astro'
+import HelpText from './help-text.astro'
+import styles from './checkbox.module.css'
+
+interface Props extends HTMLAttributes<'input'> {
+  id: string
+  name: string
+  label: string
+  variant?: Variant
+  size?: Size
+  intent?: Intent
+  reverse?: boolean
+  checked?: boolean
+  class?: string
+  checkBoxClasses?: string
+  containerClasses?: string
+  componentClasses?: string
+  labelClasses?: string
+  error?: boolean
+  helpText?: string
+  errorText?: string
+}
+
+const {
+  id,
+  name,
+  label,
+  variant = 'outlined',
+  size = 'md',
+  intent = 'primary',
+  reverse = false,
+  checked = false,
+  class: className,
+  checkBoxClasses,
+  containerClasses,
+  componentClasses,
+  labelClasses,
+  error = false,
+  helpText = '',
+  errorText = '',
+  ...rest
+} = Astro.props
+---
+
+<div class:list={['checkbox-container', containerClasses]}>
+  <div
+    class:list={[
+      'checkbox-component',
+      styles.container,
+      componentClasses,
+      { [styles.reverse]: reverse }
+    ]}
+  >
+    <input type="checkbox" id={id} name={name} checked={checked} class="sr-only peer" {...rest} />
+
+    <label
+      for={id}
+      class:list={[
+        'checkbox',
+        variant,
+        size,
+        intent,
+        styles.checkbox,
+        styles[variant],
+        styles[size],
+        styles[intent],
+        checkBoxClasses,
+        className
+      ]}
+      data-state={checked ? 'checked' : 'unchecked'}
+    >
+      <span
+        class:list={['checkbox-indicator', styles.indicator]}
+        data-state={checked ? 'checked' : 'unchecked'}
+      >
+        <CheckIcon class={styles.icon} />
+      </span>
+    </label>
+
+    <label for={id} class:list={[styles.label, labelClasses]}>
+      {label}
+    </label>
+  </div>
+  {
+    error ? (
+      <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+    ) : (
+      helpText?.length > 0 && <HelpText text={helpText} />
+    )
+  }
+</div>
+
+<script>
+  function setupCheckboxes() {
+    const inputs = document.querySelectorAll('input[type="checkbox"].peer')
+
+    inputs.forEach((input) => {
+      const checkboxInput = input as HTMLInputElement
+      const id = checkboxInput.id
+      // Find the visual checkbox label associated with this input
+      const visualCheckbox = document.querySelector(`label.checkbox[for="${id}"]`)
+      const indicator = visualCheckbox?.querySelector('.checkbox-indicator')
+
+      if (visualCheckbox && indicator) {
+        // Update state on change
+        checkboxInput.addEventListener('change', () => {
+          const state = checkboxInput.checked ? 'checked' : 'unchecked'
+          visualCheckbox.setAttribute('data-state', state)
+          indicator.setAttribute('data-state', state)
+        })
+
+        // Ensure initial state is correct
+        const state = checkboxInput.checked ? 'checked' : 'unchecked'
+        visualCheckbox.setAttribute('data-state', state)
+        indicator.setAttribute('data-state', state)
+      }
+    })
+  }
+
+  // Run on initial load
+  setupCheckboxes()
+
+  // Support Astro View Transitions
+  document.addEventListener('astro:page-load', setupCheckboxes)
+</script>

package/src/components/forms/checkbox.module.css

@@ -3,6 +3,7 @@
 @layer infonomic-components {
   .container {
     display: flex;
+    width: 100%;
     align-items: center;
     gap: var(--gap-2);
   }

package/src/components/forms/checkbox.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { CheckIcon } from '@radix-ui/react-icons'
+import { CheckIcon } from '../../icons/check-icon'
 import cx from 'classnames'
 import { Checkbox as CheckboxPrimitive, Label as LabelPrimitive } from 'radix-ui'
 import type * as React from 'react'

package/src/components/forms/input.module.css

@@ -1,6 +1,7 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
+
   .input-wrapper,
   :global(.input-wrapper) {
     display: flex;
@@ -11,6 +12,7 @@
   .input-container,
   :global(.input-container) {
     position: relative;
+    width: 100%;
     display: flex;
     align-items: center;
     gap: var(--gap-2);

package/src/components/forms/text-area.astro

@@ -0,0 +1,78 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Variant } from './@types/input.js'
+import ErrorText from './error-text.astro'
+import HelpText from './help-text.astro'
+import inputStyles from './input.module.css'
+import Label from './label.astro'
+import styles from './text-area.module.css'
+
+interface Props extends HTMLAttributes<'textarea'> {
+  id: string
+  name: string
+  label: string
+  required?: boolean
+  variant?: Variant
+  intent?: Intent
+  rows?: number
+  placeHolder?: string
+  autoComplete?: string
+  error?: boolean
+  helpText?: string
+  errorText?: string
+  class?: string
+}
+
+const {
+  id,
+  name,
+  label,
+  rows = 4,
+  required = false,
+  variant = 'outlined',
+  intent = 'primary',
+  placeHolder = '',
+  autoComplete = 'off',
+  error = false,
+  helpText = '',
+  errorText = '',
+  class: className,
+  ...rest
+} = Astro.props as Props
+---
+
+<fieldset class:list={['text-area-wrapper', inputStyles['input-wrapper']]}>
+  <Label id={id} for={id} required={required} label={label} />
+  <textarea
+    id={id}
+    name={name}
+    required={required}
+    rows={rows}
+    auto-complete={autoComplete}
+    placeholder={placeHolder}
+    aria-labelledby={`label-for-${id}`}
+    aria-invalid={error}
+    aria-required={required}
+    aria-errormessage={errorText}
+    aria-describedby={error ? `error-for-${id}` : undefined}
+    class:list={[
+      'text-area',
+      variant,
+      intent,
+      inputStyles.input,
+      inputStyles[variant],
+      inputStyles[intent],
+      styles['text-area'],
+      styles[variant],
+      error && inputStyles.error,
+      className
+    ]}
+    {...rest}></textarea>
+  {
+    error ? (
+      <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+    ) : (
+      helpText?.length > 0 && <HelpText text={helpText} />
+    )
+  }
+</fieldset>

package/src/components/forms/text-area.module.css

@@ -1,10 +1,20 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
+
   .text-area,
   :global(.text-area) {
     font-size: 1.1rem;
     width: 100%;
     padding: 0.5rem;
   }
+
+  .underlined {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .outlined {}
+
+  .filled {}
 }

package/src/components/forms/text-area.tsx

@@ -66,6 +66,7 @@ export const TextArea = function TextArea({
           inputStyles[variant],
           inputStyles[intent],
           styles['text-area'],
+          styles[variant],
           { [inputStyles.error]: error },
           className
         )}

package/src/icons/check-icon.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  width?: string
+  height?: string
+  menuItem?: boolean
+  svgClass?: string
+}
+
+import IconElement from './icon-element.astro'
+import styles from './icons.module.css'
+
+const { class: className, width, height, svgClass: svgClassName, menuItem, ...rest } = Astro.props
+---
+
+<IconElement
+  class:list={['check-icon', className]}
+  width={width}
+  height={height}
+  menuItem={menuItem}
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 15 15"
+    class:list={[styles['fill-current'], svgClassName]}
+    focusable="false"
+    aria-hidden="true"
+  >
+    <path
+      d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"></path>
+  </svg>
+</IconElement>