moduix 0.11.0 → 0.11.2

package/dist/components/Field/Field.js

@@ -0,0 +1,50 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Field_module_default from "./Field.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/components/Field/Field.tsx
+function Field$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Root, {
+		"data-slot": "field-root",
+		className: mergeClassName(className, Field_module_default.root),
+		...props
+	});
+}
+function FieldItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Item, {
+		"data-slot": "field-item",
+		className: mergeClassName(className, Field_module_default.item),
+		...props
+	});
+}
+function FieldLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Label, {
+		"data-slot": "field-label",
+		className: mergeClassName(className, Field_module_default.label),
+		...props
+	});
+}
+function FieldControl({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Control, {
+		"data-slot": "field-control",
+		className: mergeClassName(className, Field_module_default.control),
+		...props
+	});
+}
+function FieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Description, {
+		"data-slot": "field-description",
+		className: mergeClassName(className, Field_module_default.description),
+		...props
+	});
+}
+function FieldError({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Error, {
+		"data-slot": "field-error",
+		className: mergeClassName(className, Field_module_default.error),
+		...props
+	});
+}
+const FieldValidity = Field.Validity;
+//#endregion
+export { Field$1 as Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity };

package/dist/components/Field/Field.module.js

@@ -0,0 +1,12 @@
+import './Field.css';
+//#region src/components/Field/Field.module.css
+var Field_module_default = {
+	"control": "otdAoW_control",
+	"description": "otdAoW_description",
+	"error": "otdAoW_error",
+	"item": "otdAoW_item",
+	"label": "otdAoW_label",
+	"root": "otdAoW_root"
+};
+//#endregion
+export { Field_module_default as default };

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

@@ -1 +1 @@
-export { Field, FieldItem, FieldLabel, FieldControl, FieldDescription, FieldError, FieldValidity, } from './Field';
+import { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity } from "./Field.js";

package/dist/components/Fieldset/Fieldset.css

@@ -0,0 +1,39 @@
+@layer ui.components {
+  .xKLSQG_root, .xKLSQG_legend {
+    box-sizing: border-box;
+  }
+
+  .xKLSQG_root {
+    gap: var(--fieldset-gap, var(--spacing-4));
+    width: var(--fieldset-width, 100%);
+    max-width: var(--fieldset-max-width, none);
+    margin: var(--fieldset-margin, 0);
+    padding: var(--fieldset-padding, 0);
+    border-width: var(--fieldset-border-width, 0);
+    border-style: var(--fieldset-border-style, solid);
+    border-color: var(--fieldset-border-color, transparent);
+    border-radius: var(--fieldset-radius, var(--radius-none));
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .xKLSQG_root[data-disabled] {
+    opacity: var(--fieldset-disabled-opacity, var(--opacity-disabled));
+  }
+
+  .xKLSQG_legend {
+    inline-size: 100%;
+    max-inline-size: 100%;
+    margin: var(--fieldset-legend-margin, 0);
+    padding: var(--fieldset-legend-padding, 0 0 var(--spacing-3));
+    border-bottom-width: var(--fieldset-legend-border-width, var(--border-width-sm));
+    border-bottom-style: var(--fieldset-legend-border-style, solid);
+    border-bottom-color: var(--fieldset-legend-border-color, var(--color-border));
+    color: var(--fieldset-legend-color, var(--color-foreground));
+    font-size: var(--fieldset-legend-font-size, var(--text-lg));
+    font-weight: var(--fieldset-legend-font-weight, var(--weight-semibold));
+    line-height: var(--fieldset-legend-line-height, var(--line-height-text-lg));
+    display: block;
+  }
+}

package/dist/components/Fieldset/Fieldset.d.ts

@@ -1,4 +1,13 @@
-import { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';
-declare function Fieldset({ className, ...props }: FieldsetPrimitive.Root.Props): import("react").JSX.Element;
-declare function FieldsetLegend({ className, ...props }: FieldsetPrimitive.Legend.Props): import("react").JSX.Element;
-export { Fieldset, FieldsetLegend };
+import { Fieldset } from "@base-ui/react/fieldset";
+
+//#region src/components/Fieldset/Fieldset.d.ts
+declare function Fieldset$1({
+  className,
+  ...props
+}: Fieldset.Root.Props): import("react").JSX.Element;
+declare function FieldsetLegend({
+  className,
+  ...props
+}: Fieldset.Legend.Props): import("react").JSX.Element;
+//#endregion
+export { Fieldset$1 as Fieldset, FieldsetLegend };

package/dist/components/Fieldset/Fieldset.js

@@ -0,0 +1,21 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Fieldset_module_default from "./Fieldset.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/components/Fieldset/Fieldset.tsx
+function Fieldset$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Fieldset.Root, {
+		"data-slot": "fieldset-root",
+		className: mergeClassName(className, Fieldset_module_default.root),
+		...props
+	});
+}
+function FieldsetLegend({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Fieldset.Legend, {
+		"data-slot": "fieldset-legend",
+		className: mergeClassName(className, Fieldset_module_default.legend),
+		...props
+	});
+}
+//#endregion
+export { Fieldset$1 as Fieldset, FieldsetLegend };

package/dist/components/Fieldset/Fieldset.module.js

@@ -0,0 +1,8 @@
+import './Fieldset.css';
+//#region src/components/Fieldset/Fieldset.module.css
+var Fieldset_module_default = {
+	"legend": "xKLSQG_legend",
+	"root": "xKLSQG_root"
+};
+//#endregion
+export { Fieldset_module_default as default };

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

@@ -1 +1 @@
-export { Fieldset, FieldsetLegend } from './Fieldset';
+import { Fieldset, FieldsetLegend } from "./Fieldset.js";

package/dist/components/Form/Form.css

@@ -0,0 +1,9 @@
+@layer ui.components {
+  .t1miBq_root {
+    gap: var(--form-gap, var(--spacing-4));
+    width: var(--form-width, 100%);
+    max-width: var(--form-max-width, none);
+    flex-direction: column;
+    display: flex;
+  }
+}

package/dist/components/Form/Form.d.ts

@@ -1,3 +1,6 @@
-import { Form as FormPrimitive } from '@base-ui/react/form';
-declare const Form: import('react').ForwardRefExoticComponent<Omit<FormPrimitive.Props<Record<string, any>>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
-export { Form };
+import { Form } from "@base-ui/react/form";
+
+//#region src/components/Form/Form.d.ts
+declare const Form$1: import("react").ForwardRefExoticComponent<Omit<Form.Props<Record<string, any>>, "ref"> & import("react").RefAttributes<HTMLFormElement>>;
+//#endregion
+export { Form$1 as Form };

package/dist/components/Form/Form.js

@@ -0,0 +1,16 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Form_module_default from "./Form.module.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Form } from "@base-ui/react/form";
+//#region src/components/Form/Form.tsx
+const Form$1 = forwardRef(function Form$2({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Form, {
+		ref,
+		"data-slot": "form-root",
+		className: mergeClassName(className, Form_module_default.root),
+		...props
+	});
+});
+//#endregion
+export { Form$1 as Form };

package/dist/components/Form/Form.module.js

@@ -0,0 +1,5 @@
+import './Form.css';
+//#region src/components/Form/Form.module.css
+var Form_module_default = { "root": "t1miBq_root" };
+//#endregion
+export { Form_module_default as default };

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

@@ -1 +1 @@
-export { Form } from './Form';
+import { Form } from "./Form.js";

package/dist/components/Heading/Heading.css

@@ -0,0 +1,50 @@
+@layer ui.components {
+  .qDe8qG_root {
+    color: var(--heading-color, var(--color-foreground));
+    font-family: var(--heading-font-family, var(--font-sans));
+    font-size: var(--heading-font-size-2xl, var(--heading-font-size, var(--text-3xl)));
+    font-weight: var(--heading-font-weight-semibold, var(--heading-font-weight, var(--weight-semibold)));
+    line-height: var(--heading-line-height-2xl, var(--heading-line-height, var(--line-height-text-3xl)));
+    letter-spacing: var(--heading-letter-spacing, 0);
+    text-wrap: var(--heading-text-wrap, balance);
+    overflow-wrap: break-word;
+    margin: 0;
+
+    &[data-size="xs"] {
+      font-size: var(--heading-font-size-xs, var(--heading-font-size, var(--text-sm)));
+      line-height: var(--heading-line-height-xs, var(--heading-line-height, var(--line-height-text-sm)));
+    }
+
+    &[data-size="sm"] {
+      font-size: var(--heading-font-size-sm, var(--heading-font-size, var(--text-md)));
+      line-height: var(--heading-line-height-sm, var(--heading-line-height, var(--line-height-text-md)));
+    }
+
+    &[data-size="md"] {
+      font-size: var(--heading-font-size-md, var(--heading-font-size, var(--text-lg)));
+      line-height: var(--heading-line-height-md, var(--heading-line-height, var(--line-height-text-lg)));
+    }
+
+    &[data-size="lg"] {
+      font-size: var(--heading-font-size-lg, var(--heading-font-size, var(--text-xl)));
+      line-height: var(--heading-line-height-lg, var(--heading-line-height, var(--line-height-text-xl)));
+    }
+
+    &[data-size="xl"] {
+      font-size: var(--heading-font-size-xl, var(--heading-font-size, var(--text-2xl)));
+      line-height: var(--heading-line-height-xl, var(--heading-line-height, var(--line-height-text-2xl)));
+    }
+
+    &[data-weight="regular"] {
+      font-weight: var(--heading-font-weight-regular, var(--heading-font-weight, var(--weight-regular)));
+    }
+
+    &[data-weight="medium"] {
+      font-weight: var(--heading-font-weight-medium, var(--heading-font-weight, var(--weight-medium)));
+    }
+
+    &[data-weight="bold"] {
+      font-weight: var(--heading-font-weight-bold, var(--heading-font-weight, var(--weight-bold)));
+    }
+  }
+}

package/dist/components/Heading/Heading.d.ts

@@ -1,20 +1,28 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from "react";
+
+//#region src/components/Heading/Heading.d.ts
 declare const defaultSizeByElement: {
-    readonly h1: "2xl";
-    readonly h2: "xl";
-    readonly h3: "lg";
-    readonly h4: "md";
-    readonly h5: "sm";
-    readonly h6: "xs";
+  readonly h1: "2xl";
+  readonly h2: "xl";
+  readonly h3: "lg";
+  readonly h4: "md";
+  readonly h5: "sm";
+  readonly h6: "xs";
 };
 type HeadingLevel = keyof typeof defaultSizeByElement;
 type HeadingSize = (typeof defaultSizeByElement)[HeadingLevel];
 type HeadingWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 type HeadingProps = ComponentPropsWithoutRef<HeadingLevel> & {
-    as?: HeadingLevel;
-    size?: HeadingSize;
-    weight?: HeadingWeight;
+  as?: HeadingLevel;
+  size?: HeadingSize;
+  weight?: HeadingWeight;
 };
-declare function Heading({ as, size, weight, className, ...props }: HeadingProps): import("react").JSX.Element;
-export { Heading };
-export type { HeadingLevel, HeadingProps, HeadingSize, HeadingWeight };
+declare function Heading({
+  as,
+  size,
+  weight,
+  className,
+  ...props
+}: HeadingProps): import("react").JSX.Element;
+//#endregion
+export { Heading, type HeadingLevel, type HeadingProps, type HeadingSize, type HeadingWeight };

package/dist/components/Heading/Heading.js

@@ -0,0 +1,23 @@
+import Heading_module_default from "./Heading.module.js";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/Heading/Heading.tsx
+const defaultSizeByElement = {
+	h1: "2xl",
+	h2: "xl",
+	h3: "lg",
+	h4: "md",
+	h5: "sm",
+	h6: "xs"
+};
+function Heading({ as = "h1", size, weight = "semibold", className, ...props }) {
+	return /* @__PURE__ */ jsx(as, {
+		"data-slot": "heading-root",
+		"data-size": size ?? defaultSizeByElement[as],
+		"data-weight": weight,
+		className: clsx$1(Heading_module_default.root, className),
+		...props
+	});
+}
+//#endregion
+export { Heading };

package/dist/components/Heading/Heading.module.js

@@ -0,0 +1,5 @@
+import './Heading.css';
+//#region src/components/Heading/Heading.module.css
+var Heading_module_default = { "root": "qDe8qG_root" };
+//#endregion
+export { Heading_module_default as default };

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

@@ -1 +1 @@
-export * from './Heading';
+import { Heading, HeadingLevel, HeadingProps, HeadingSize, HeadingWeight } from "./Heading.js";

package/dist/components/Input/Input.css

@@ -0,0 +1,78 @@
+@layer ui.components {
+  .ek-HaW_root {
+    box-sizing: border-box;
+    width: var(--input-width, 100%);
+    max-width: var(--input-max-width, none);
+    min-height: var(--input-height, var(--input-height-md, var(--size-lg)));
+    border: var(--input-border-width, var(--border-width-sm)) var(--input-border-style, solid)
+      var(--input-border-color, var(--color-border));
+    border-radius: var(--input-radius, var(--radius-md));
+    padding: var(--input-padding-y, var(--input-padding-y-md, .5rem))
+      var(--input-padding-x, var(--input-padding-x-md, .875rem));
+    background-color: var(--input-bg, var(--color-background));
+    color: var(--input-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--input-font-size, var(--input-font-size-md, var(--text-md)));
+    line-height: var(--input-line-height, var(--input-line-height-md, var(--line-height-text-md)));
+    outline: var(--input-focus-ring-width, var(--input-border-width, var(--border-width-sm))) solid
+      transparent;
+    outline-offset: var(--input-focus-ring-offset, calc(0px - var(--input-border-width, var(--border-width-sm))));
+    transition: border-color var(--input-transition, var(--transition-default)),
+      outline-color var(--input-transition, var(--transition-default)),
+      opacity var(--input-transition, var(--transition-default));
+    margin: 0;
+  }
+
+  .ek-HaW_root::placeholder {
+    color: var(--input-placeholder-color, var(--color-muted-foreground));
+  }
+
+  .ek-HaW_root:focus-visible {
+    outline-color: var(--input-focus-ring-color, var(--color-ring));
+  }
+
+  .ek-HaW_root[data-invalid] {
+    border-color: var(--input-border-color-invalid, var(--color-destructive));
+  }
+
+  .ek-HaW_root[data-invalid]:focus-visible {
+    outline-color: var(--input-border-color-invalid, var(--color-destructive));
+  }
+
+  .ek-HaW_root[data-disabled] {
+    pointer-events: none;
+    opacity: var(--input-disabled-opacity, var(--opacity-disabled));
+  }
+
+  .ek-HaW_root[data-size="xs"] {
+    --input-height: var(--input-height-xs, var(--size-sm));
+    --input-padding-x: var(--input-padding-x-xs, .625rem);
+    --input-padding-y: var(--input-padding-y-xs, .25rem);
+    --input-font-size: var(--input-font-size-xs, var(--text-xs));
+    --input-line-height: var(--input-line-height-xs, var(--line-height-text-xs));
+  }
+
+  .ek-HaW_root[data-size="sm"] {
+    --input-height: var(--input-height-sm, 2rem);
+    --input-padding-x: var(--input-padding-x-sm, .75rem);
+    --input-padding-y: var(--input-padding-y-sm, .3125rem);
+    --input-font-size: var(--input-font-size-sm, var(--text-sm));
+    --input-line-height: var(--input-line-height-sm, var(--line-height-text-sm));
+  }
+
+  .ek-HaW_root[data-size="lg"] {
+    --input-height: var(--input-height-lg, var(--size-xl));
+    --input-padding-x: var(--input-padding-x-lg, 1rem);
+    --input-padding-y: var(--input-padding-y-lg, .625rem);
+    --input-font-size: var(--input-font-size-lg, var(--text-lg));
+    --input-line-height: var(--input-line-height-lg, var(--line-height-text-lg));
+  }
+
+  .ek-HaW_root[data-size="xl"] {
+    --input-height: var(--input-height-xl, 3rem);
+    --input-padding-x: var(--input-padding-x-xl, 1.125rem);
+    --input-padding-y: var(--input-padding-y-xl, .75rem);
+    --input-font-size: var(--input-font-size-xl, var(--text-lg));
+    --input-line-height: var(--input-line-height-xl, var(--line-height-text-lg));
+  }
+}

package/dist/components/Input/Input.d.ts

@@ -1,10 +1,12 @@
-import { ComponentProps } from 'react';
-import { Input as InputPrimitive } from '@base-ui/react/input';
+import { ComponentProps } from "react";
+import { Input } from "@base-ui/react/input";
+
+//#region src/components/Input/Input.d.ts
 type InputSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type InputProps = Omit<InputPrimitive.Props, 'size'> & {
-    size?: InputSize;
-    htmlSize?: ComponentProps<'input'>['size'];
+type InputProps = Omit<Input.Props, 'size'> & {
+  size?: InputSize;
+  htmlSize?: ComponentProps<'input'>['size'];
 };
-declare const Input: import('react').ForwardRefExoticComponent<Omit<InputProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
-export { Input };
-export type { InputProps, InputSize };
+declare const Input$1: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { Input$1 as Input, type InputProps, type InputSize };

package/dist/components/Input/Input.js

@@ -0,0 +1,18 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Input_module_default from "./Input.module.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Input } from "@base-ui/react/input";
+//#region src/components/Input/Input.tsx
+const Input$1 = forwardRef(function Input$2({ className, size = "md", htmlSize, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Input, {
+		ref,
+		"data-slot": "input-root",
+		"data-size": size,
+		className: mergeClassName(className, Input_module_default.root),
+		size: htmlSize,
+		...props
+	});
+});
+//#endregion
+export { Input$1 as Input };

package/dist/components/Input/Input.module.js

@@ -0,0 +1,5 @@
+import './Input.css';
+//#region src/components/Input/Input.module.css
+var Input_module_default = { "root": "ek-HaW_root" };
+//#endregion
+export { Input_module_default as default };

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

@@ -1,2 +1 @@
-export { Input } from './Input';
-export type { InputProps, InputSize } from './Input';
+import { Input, InputProps, InputSize } from "./Input.js";

package/dist/components/InputGroup/InputGroup.css

@@ -0,0 +1,160 @@
+@layer ui.components {
+  .jSOrbG_root {
+    box-sizing: border-box;
+    width: var(--input-group-width, 100%);
+    max-width: var(--input-group-max-width, none);
+    min-height: var(--input-group-height, var(--input-group-height-md, var(--size-lg)));
+    border: var(--input-group-border-width, var(--border-width-sm))
+      var(--input-group-border-style, solid) var(--input-group-border-color, var(--color-border));
+    border-radius: var(--input-group-radius, var(--radius-md));
+    background-color: var(--input-group-bg, var(--color-background));
+    color: var(--input-group-color, var(--color-foreground));
+    outline: var(--input-group-focus-ring-width, var(--input-group-border-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: var(--input-group-focus-ring-offset, -1px);
+    transition: border-color var(--input-group-transition, var(--transition-default)),
+      outline-color var(--input-group-transition, var(--transition-default)),
+      opacity var(--input-group-transition, var(--transition-default));
+    align-items: stretch;
+    display: flex;
+    overflow: hidden;
+
+    &:focus-within {
+      outline-color: var(--input-group-focus-ring-color, var(--color-ring));
+    }
+
+    &:has([data-slot="input-group-input"][data-invalid], [data-slot="input-group-input"][aria-invalid="true"]) {
+      border-color: var(--input-group-border-color-invalid, var(--color-destructive));
+    }
+
+    &:has([data-slot="input-group-input"][data-invalid], [data-slot="input-group-input"][aria-invalid="true"]):focus-within {
+      outline-color: var(--input-group-border-color-invalid, var(--color-destructive));
+    }
+
+    &:has([data-slot="input-group-input"][data-disabled], [data-slot="input-group-input"]:disabled) {
+      opacity: var(--input-group-disabled-opacity, var(--opacity-disabled));
+    }
+
+    &[data-size="xs"] {
+      --input-group-height: var(--input-group-height-xs, var(--size-sm));
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-xs, .625rem);
+      --input-group-font-size: var(--input-group-font-size-xs, var(--text-xs));
+      --input-group-line-height: var(--input-group-line-height-xs, var(--line-height-text-xs));
+      --input-group-input-padding-x: var(--input-group-input-padding-x-xs, .625rem);
+      --input-group-input-padding-y: var(--input-group-input-padding-y-xs, .25rem);
+    }
+
+    &[data-size="sm"] {
+      --input-group-height: var(--input-group-height-sm, 2rem);
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-sm, .75rem);
+      --input-group-font-size: var(--input-group-font-size-sm, var(--text-sm));
+      --input-group-line-height: var(--input-group-line-height-sm, var(--line-height-text-sm));
+      --input-group-input-padding-x: var(--input-group-input-padding-x-sm, .75rem);
+      --input-group-input-padding-y: var(--input-group-input-padding-y-sm, .3125rem);
+    }
+
+    &[data-size="md"] {
+      --input-group-height: var(--input-group-height-md, var(--size-lg));
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-md, .875rem);
+      --input-group-font-size: var(--input-group-font-size-md, var(--text-md));
+      --input-group-line-height: var(--input-group-line-height-md, var(--line-height-text-md));
+      --input-group-input-padding-x: var(--input-group-input-padding-x-md, .875rem);
+      --input-group-input-padding-y: var(--input-group-input-padding-y-md, .5rem);
+    }
+
+    &[data-size="lg"] {
+      --input-group-height: var(--input-group-height-lg, var(--size-xl));
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-lg, 1rem);
+      --input-group-font-size: var(--input-group-font-size-lg, var(--text-lg));
+      --input-group-line-height: var(--input-group-line-height-lg, var(--line-height-text-lg));
+      --input-group-input-padding-x: var(--input-group-input-padding-x-lg, 1rem);
+      --input-group-input-padding-y: var(--input-group-input-padding-y-lg, .625rem);
+    }
+
+    &[data-size="xl"] {
+      --input-group-height: var(--input-group-height-xl, 3rem);
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-xl, 1.125rem);
+      --input-group-font-size: var(--input-group-font-size-xl, var(--text-lg));
+      --input-group-line-height: var(--input-group-line-height-xl, var(--line-height-text-lg));
+      --input-group-input-padding-x: var(--input-group-input-padding-x-xl, 1.125rem);
+      --input-group-input-padding-y: var(--input-group-input-padding-y-xl, .75rem);
+    }
+  }
+
+  .jSOrbG_input {
+    min-width: 0;
+    min-height: 0;
+    font-size: var(--input-group-font-size, var(--text-md));
+    line-height: var(--input-group-line-height, var(--line-height-text-md));
+    padding-block: var(--input-group-input-padding-y, .5rem);
+    padding-inline: var(--input-group-input-padding-x, .875rem);
+    background-color: #0000;
+    border: 0;
+    border-radius: 0;
+    outline: 0;
+    flex: auto;
+  }
+
+  .jSOrbG_addon, .jSOrbG_text {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--input-group-addon-gap, var(--spacing-2));
+    min-width: max-content;
+    padding-inline: var(--input-group-addon-padding-x, .875rem);
+    background-color: var(--input-group-addon-bg, var(--color-muted));
+    color: var(--input-group-addon-color, var(--color-muted-foreground));
+    font-size: var(--input-group-font-size, var(--text-md));
+    line-height: var(--input-group-line-height, var(--line-height-text-md));
+    white-space: nowrap;
+    display: inline-flex;
+
+    & > svg {
+      width: var(--input-group-icon-size, 1rem);
+      height: var(--input-group-icon-size, 1rem);
+      flex-shrink: 0;
+    }
+  }
+
+  .jSOrbG_addon {
+    border-inline: var(--input-group-separator-width, var(--border-width-sm)) solid
+      var(--input-group-separator-color, var(--color-border));
+
+    &:first-child {
+      border-inline-start: 0;
+    }
+
+    &:last-child {
+      border-inline-end: 0;
+    }
+  }
+
+  .jSOrbG_text {
+    background-color: #0000;
+  }
+
+  .jSOrbG_button {
+    height: auto;
+    min-height: auto;
+    padding-block: 0;
+    padding-inline: var(--input-group-addon-padding-x, .875rem);
+    border: 0;
+    border-inline-start: var(--input-group-separator-width, var(--border-width-sm)) solid
+      var(--input-group-separator-color, var(--color-border));
+    color: var(--input-group-button-color, var(--color-foreground));
+    font-size: var(--input-group-font-size, var(--text-sm));
+    line-height: var(--input-group-line-height, var(--line-height-text-sm));
+    border-radius: 0;
+    align-self: stretch;
+
+    &:first-child {
+      border-inline-start: 0;
+      border-inline-end: var(--input-group-separator-width, var(--border-width-sm)) solid
+        var(--input-group-separator-color, var(--color-border));
+    }
+
+    &:focus-visible {
+      outline-offset: var(--input-group-button-focus-ring-offset, -1px);
+    }
+  }
+}