@byline/ui 0.9.3 → 0.10.1

package/dist/components/inputs/label_module.css

@@ -0,0 +1,14 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.label-pYbboO, .infonomic-label) {
+    color: var(--text);
+    font-weight: 500;
+    display: block;
+  }
+
+  :is(.required-UDJyfk, .infonomic-label-required) {
+    color: var(--text-danger);
+  }
+}
+

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

@@ -0,0 +1,24 @@
+import type React from 'react';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import type { Intent } from '../@types/shared';
+export interface RadioGroupValue {
+    id: string;
+    value: string;
+    label: string;
+}
+export declare const RadioGroupItem: ({ intent, className, id, value, label, ref: forwardedRef, ...props }: Omit<React.ComponentProps<typeof Radio.Root>, "value"> & {
+    intent?: Intent;
+    className?: string;
+    id: string;
+    value: string;
+    label: string;
+    ref?: React.RefObject<HTMLDivElement>;
+}) => React.JSX.Element;
+export declare const RadioGroup: ({ ref: forwardedRef, className, direction, children, ...props }: React.ComponentProps<typeof RadioGroupPrimitive> & {
+    direction?: "row" | "column";
+    className?: string;
+    children: React.ReactNode;
+    ref?: React.RefObject<HTMLDivElement>;
+}) => React.JSX.Element;
+//# sourceMappingURL=radio-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAC5C,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAI9E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAE9C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,cAAc,GAAI,sEAQ5B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,sBAkBA,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,iEAMxB,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACpD,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,sBAQA,CAAA"}

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

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+import classnames from "classnames";
+import radio_group_module from "./radio-group.module.js";
+const RadioGroupItem = ({ intent = 'primary', className, id, value, label, ref: forwardedRef, ...props })=>/*#__PURE__*/ jsxs("div", {
+        ref: forwardedRef,
+        className: radio_group_module["item-container"],
+        children: [
+            /*#__PURE__*/ jsx(Radio.Root, {
+                ...props,
+                className: classnames(radio_group_module.item, radio_group_module[intent]),
+                value: value,
+                id: id,
+                nativeButton: true,
+                render: /*#__PURE__*/ jsx("button", {
+                    type: "button"
+                }),
+                children: /*#__PURE__*/ jsx(Radio.Indicator, {
+                    className: radio_group_module.indicator
+                })
+            }),
+            /*#__PURE__*/ jsx("label", {
+                className: radio_group_module.label,
+                htmlFor: id,
+                children: label
+            })
+        ]
+    });
+const radio_group_RadioGroup = ({ ref: forwardedRef, className, direction = 'column', children, ...props })=>/*#__PURE__*/ jsx(RadioGroup, {
+        ref: forwardedRef,
+        className: classnames('infonomic-radio-group', radio_group_module[direction], className),
+        ...props,
+        children: children
+    });
+export { RadioGroupItem, radio_group_RadioGroup as RadioGroup };

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

@@ -0,0 +1,20 @@
+import "./radio-group_module.css";
+const radio_group_module = {
+    column: "column-Ca6c3z",
+    row: "row-ac6wE8",
+    "item-container": "item-container-QhnOuU",
+    itemContainer: "item-container-QhnOuU",
+    item: "item-uXVko1",
+    indicator: "indicator-B7b31p",
+    radioIn: "radioIn-fUcBet",
+    radioOut: "radioOut-mOJ8no",
+    label: "label-z3bd4D",
+    primary: "primary-Tdjbh6",
+    secondary: "secondary-OnQLgQ",
+    noeffect: "noeffect-utrLW3",
+    success: "success-ox6PBo",
+    info: "info-XQe2ch",
+    warning: "warning-tb13WX",
+    danger: "danger-wqLk2O"
+};
+export default radio_group_module;

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

@@ -0,0 +1,160 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.column-Ca6c3z, .infonomic-radio-group-column) {
+    gap: var(--gap-2);
+    flex-direction: column;
+    display: flex;
+  }
+
+  :is(.row-ac6wE8, .infonomic-radio-group-row) {
+    gap: var(--gap-2);
+    flex-direction: row;
+    display: flex;
+  }
+
+  :is(.item-container-QhnOuU, .infonomic-radio-group-item-container) {
+    align-items: center;
+    gap: var(--gap-2);
+    display: flex;
+  }
+
+  :is(.item-uXVko1, .infonomic-radio-group-item) {
+    all: unset;
+    border-radius: var(--border-radius-full);
+    border: 2px solid var(--radio-border);
+    width: 18px;
+    height: 18px;
+    transition: all var(--transition-normal);
+  }
+
+  .item-uXVko1[data-disabled] {
+    pointer-events: none;
+  }
+
+  .infonomic-radio-group-item[data-disabled] {
+    pointer-events: none;
+  }
+
+  .indicator-B7b31p[data-checked] {
+    opacity: 1;
+    animation: .3s cubic-bezier(.25, 1.5, .5, 1) forwards radioIn-fUcBet;
+    transform: scale(1);
+  }
+
+  .infonomic-radio-group-indicator[data-checked] {
+    opacity: 1;
+    animation: .3s cubic-bezier(.25, 1.5, .5, 1) forwards radioIn-fUcBet;
+    transform: scale(1);
+  }
+
+  .indicator-B7b31p[data-unchecked] {
+    opacity: 0;
+    animation: .2s ease-in radioOut-mOJ8no;
+    transform: scale(.8);
+  }
+
+  .infonomic-radio-group-indicator[data-unchecked] {
+    opacity: 0;
+    animation: .2s ease-in radioOut-mOJ8no;
+    transform: scale(.8);
+  }
+
+  :is(.indicator-B7b31p, .infonomic-radio-group-indicator) {
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    position: relative;
+  }
+
+  :is(.indicator-B7b31p, .infonomic-radio-group-indicator):after {
+    content: "";
+    background-color: var(--radio-indicator-color);
+    border-radius: 50%;
+    width: 11px;
+    height: 11px;
+    display: block;
+  }
+
+  :is(.label-z3bd4D, .infonomic-radio-group-label) {
+    color: var(--foreground);
+    padding-left: var(--spacing-8);
+    font-size: 15px;
+    line-height: 1;
+  }
+
+  :is(.row-ac6wE8 .label-z3bd4D, .infonomic-radio-group-row .infonomic-radio-group-label) {
+    padding-left: 0;
+    padding-right: var(--spacing-16);
+  }
+
+  :is(.primary-Tdjbh6, .infonomic-radio-group-primary) {
+    --radio-border: var(--fill-primary-strong);
+    --radio-indicator-color: var(--fill-primary-strong);
+  }
+
+  :is(.secondary-OnQLgQ, .infonomic-radio-group-secondary) {
+    --radio-border: var(--fill-secondary-strong);
+    --radio-indicator-color: var(--fill-secondary-strong);
+  }
+
+  :is(.noeffect-utrLW3, .infonomic-radio-group-noeffect) {
+    --radio-border: var(--fill-noeffect-strong);
+    --radio-indicator-color: var(--fill-noeffect-strong);
+  }
+
+  :is(.success-ox6PBo, .infonomic-radio-group-success) {
+    --radio-border: var(--fill-success-strong);
+    --radio-indicator-color: var(--fill-success-strong);
+  }
+
+  :is(.info-XQe2ch, .infonomic-radio-group-info) {
+    --radio-border: var(--fill-info-strong);
+    --radio-indicator-color: var(--fill-info-strong);
+  }
+
+  :is(.warning-tb13WX, .infonomic-radio-group-warning) {
+    --radio-border: var(--fill-warning-strong);
+    --radio-indicator-color: var(--fill-warning-strong);
+  }
+
+  :is(.danger-wqLk2O, .infonomic-radio-group-danger) {
+    --radio-border: var(--fill-danger-strong);
+    --radio-indicator-color: var(--fill-danger-strong);
+  }
+
+  @keyframes radioIn-fUcBet {
+    0% {
+      opacity: 0;
+      transform: scale(.8);
+    }
+
+    50% {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+
+    80% {
+      transform: scale(.9);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes radioOut-mOJ8no {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(.8);
+    }
+  }
+}
+

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

@@ -0,0 +1,33 @@
+import type React from 'react';
+import { Select as SelectPrimitive } from '@base-ui/react/select';
+import type { Intent } from '../@types/shared.js';
+import type { Size, Variant } from '../button/@types/button.js';
+export interface SelectValue<Value extends string | number = string> {
+    label: string;
+    value: Value;
+    prefix?: string;
+    suffix?: string;
+}
+type SelectProps<Value extends string | number = string> = Omit<React.ComponentProps<typeof SelectPrimitive.Root<Value>>, 'items'> & {
+    id?: string;
+    intent?: Intent;
+    variant?: Variant;
+    size?: Size;
+    placeholder?: string;
+    position?: 'item-aligned' | 'popper';
+    containerClassName?: string;
+    className?: string;
+    disabledValue?: string;
+    ariaLabel?: string;
+    helpText?: string;
+    items?: SelectValue<Value>[];
+};
+export declare function Select<Value extends string | number = string>({ id, children, placeholder, disabledValue, intent, variant, size, position, containerClassName, className, ariaLabel, helpText, items, ...rest }: SelectProps<Value>): React.JSX.Element;
+export declare const SelectItem: {
+    ({ ref: forwardedRef, children, className, ...props }: React.ComponentProps<typeof SelectPrimitive.Item> & {
+        ref?: React.RefObject<HTMLDivElement>;
+    }): React.JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AASjE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAE/D,MAAM,WAAW,WAAW,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,KAAK,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,KAAK,WAAW,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI,IAAI,CAC7D,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EACxD,OAAO,CACR,GAAG;IACF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAA;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,CAAA;CAC7B,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,EAC7D,EAAE,EACF,QAAQ,EACR,WAAW,EACX,aAAa,EACb,MAAM,EACN,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,IAAI,EACR,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmDxC;AAED,eAAO,MAAM,UAAU;2DAKpB,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;QACrD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;KACtC;;CAeA,CAAA"}

package/dist/components/inputs/select.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+import classnames from "classnames";
+import { CheckIcon } from "../../icons/check-icon.js";
+import { ChevronDownIcon } from "../../icons/chevron-down-icon.js";
+import { ChevronUpIcon } from "../../icons/chevron-up-icon.js";
+import { Button } from "../button/button.js";
+import { HelpText } from "./help-text.js";
+import select_module from "./select.module.js";
+function select_Select({ id, children, placeholder, disabledValue, intent, variant, size, position, containerClassName, className, ariaLabel, helpText, items, ...rest }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('infonomic-select-container', containerClassName),
+        children: [
+            /*#__PURE__*/ jsxs(Select.Root, {
+                items: items,
+                ...rest,
+                children: [
+                    /*#__PURE__*/ jsxs(Select.Trigger, {
+                        "aria-label": ariaLabel ?? 'Select',
+                        render: /*#__PURE__*/ jsx(Button, {
+                            id: id,
+                            intent: intent,
+                            variant: variant,
+                            size: size,
+                            className: classnames('whitespace-nowrap', className)
+                        }),
+                        children: [
+                            /*#__PURE__*/ jsx(Select.Value, {
+                                placeholder: placeholder
+                            }),
+                            /*#__PURE__*/ jsx(Select.Icon, {
+                                children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Select.Portal, {
+                        children: /*#__PURE__*/ jsxs(Select.Positioner, {
+                            className: select_module.positioner,
+                            alignItemWithTrigger: 'popper' !== position,
+                            children: [
+                                /*#__PURE__*/ jsx(Select.ScrollUpArrow, {
+                                    className: select_module["scroll-arrow"],
+                                    children: /*#__PURE__*/ jsx(ChevronUpIcon, {})
+                                }),
+                                /*#__PURE__*/ jsx(Select.Popup, {
+                                    className: classnames(select_module.popup, null != size && select_module[`popup-${size}`]),
+                                    children: /*#__PURE__*/ jsx(Select.List, {
+                                        className: select_module.list,
+                                        children: children ?? items?.map((item)=>/*#__PURE__*/ jsx(SelectItem, {
+                                                value: item.value,
+                                                label: item.label,
+                                                children: item.label
+                                            }, item.value))
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Select.ScrollDownArrow, {
+                                    className: select_module["scroll-arrow"],
+                                    children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            null != helpText && helpText?.length > 0 && /*#__PURE__*/ jsx(HelpText, {
+                text: helpText
+            })
+        ]
+    });
+}
+const SelectItem = ({ ref: forwardedRef, children, className, ...props })=>/*#__PURE__*/ jsxs(Select.Item, {
+        className: classnames('infonomic-select-item', select_module["select-item"], className),
+        ...props,
+        ref: forwardedRef,
+        children: [
+            /*#__PURE__*/ jsx(Select.ItemIndicator, {
+                className: classnames('infonomic-select-item-indicator', select_module["select-item-indicator"]),
+                children: /*#__PURE__*/ jsx(CheckIcon, {})
+            }),
+            /*#__PURE__*/ jsx(Select.ItemText, {
+                children: children
+            })
+        ]
+    });
+SelectItem.displayName = 'SelectItem';
+export { SelectItem, select_Select as Select };

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

@@ -0,0 +1,23 @@
+import "./select_module.css";
+const select_module = {
+    positioner: "positioner-Mjx718",
+    popup: "popup-GCcnyH",
+    "popup-xs": "popup-xs-iF48Bq",
+    popupXs: "popup-xs-iF48Bq",
+    "popup-sm": "popup-sm-GyGi_i",
+    popupSm: "popup-sm-GyGi_i",
+    "popup-md": "popup-md-ZqtRNb",
+    popupMd: "popup-md-ZqtRNb",
+    "popup-lg": "popup-lg-XrEbFb",
+    popupLg: "popup-lg-XrEbFb",
+    "popup-xl": "popup-xl-botmT3",
+    popupXl: "popup-xl-botmT3",
+    list: "list-UnpLpt",
+    "scroll-arrow": "scroll-arrow-JHznBc",
+    scrollArrow: "scroll-arrow-JHznBc",
+    "select-item": "select-item-rnKFPV",
+    selectItem: "select-item-rnKFPV",
+    "select-item-indicator": "select-item-indicator-OygYkn",
+    selectItemIndicator: "select-item-indicator-OygYkn"
+};
+export default select_module;

package/dist/components/inputs/select_module.css

@@ -0,0 +1,141 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.positioner-Mjx718, .infonomic-select-positioner) {
+    z-index: 50;
+  }
+
+  :is(.popup-GCcnyH, .infonomic-select-popup) {
+    z-index: 50;
+    border: 1px solid var(--surface-panel-border);
+    box-shadow: var(--shadow-md);
+    border-radius: var(--border-radius-md);
+    background-color: var(--surface-panel-elevated);
+    margin-top: 2px;
+    padding: 6px;
+  }
+
+  .popup-xs-iF48Bq, .popup-sm-GyGi_i {
+    padding: 4px;
+  }
+
+  .popup-md-ZqtRNb, .popup-lg-XrEbFb {
+    padding: 6px;
+  }
+
+  .popup-xl-botmT3 {
+    padding: 8px;
+  }
+
+  :is(.list-UnpLpt, .infonomic-select-list) {
+    z-index: 50;
+  }
+
+  :is(.scroll-arrow-JHznBc, .infonomic-select-scroll-arrow) {
+    color: var(--surface-item-text);
+    border: 1px solid var(--surface-panel-border);
+    box-shadow: var(--shadow-md);
+    border-radius: var(--border-radius-md);
+    background-color: var(--surface-panel-elevated);
+    justify-content: center;
+    align-items: center;
+    padding: 2px;
+    display: flex;
+  }
+
+  :is(.select-item-rnKFPV, .infonomic-select-item) {
+    -webkit-user-select: none;
+    user-select: none;
+    color: var(--surface-item-text);
+    background-color: var(--surface-item);
+    border-radius: 6px;
+    align-items: center;
+    height: 32px;
+    padding-left: 24px;
+    padding-right: 32px;
+    font-size: 1rem;
+    line-height: 1;
+    display: flex;
+    position: relative;
+  }
+
+  .select-item-rnKFPV[data-disabled] {
+    color: var(--surface-item-text-disabled);
+    pointer-events: none;
+  }
+
+  .infonomic-select-item[data-disabled] {
+    color: var(--surface-item-text-disabled);
+    pointer-events: none;
+  }
+
+  .select-item-rnKFPV[data-highlighted] {
+    background-color: var(--surface-item-hover);
+    color: var(--surface-item-text-hover);
+    outline: none;
+  }
+
+  .infonomic-select-item[data-highlighted] {
+    background-color: var(--surface-item-hover);
+    color: var(--surface-item-text-hover);
+    outline: none;
+  }
+
+  :is(.select-item-indicator-OygYkn, .infonomic-select-item-indicator) {
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    display: inline-flex;
+    position: absolute;
+    left: 0;
+  }
+
+  .popup-xs-iF48Bq .select-item-rnKFPV {
+    border-radius: 4px;
+    height: 24px;
+    padding-left: 20px;
+    padding-right: 28px;
+    font-size: .75rem;
+  }
+
+  .popup-xs-iF48Bq .select-item-indicator-OygYkn {
+    width: 20px;
+  }
+
+  .popup-sm-GyGi_i .select-item-rnKFPV {
+    border-radius: 5px;
+    height: 28px;
+    padding-left: 22px;
+    padding-right: 30px;
+    font-size: .875rem;
+  }
+
+  .popup-sm-GyGi_i .select-item-indicator-OygYkn {
+    width: 22px;
+  }
+
+  .popup-lg-XrEbFb .select-item-rnKFPV {
+    border-radius: 6px;
+    height: 34px;
+    padding-left: 24px;
+    padding-right: 32px;
+    font-size: 1.125rem;
+  }
+
+  .popup-lg-XrEbFb .select-item-indicator-OygYkn {
+    width: 24px;
+  }
+
+  .popup-xl-botmT3 .select-item-rnKFPV {
+    border-radius: 8px;
+    height: 40px;
+    padding-left: 28px;
+    padding-right: 36px;
+    font-size: 1.25rem;
+  }
+
+  .popup-xl-botmT3 .select-item-indicator-OygYkn {
+    width: 28px;
+  }
+}
+

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

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { Intent, Variant } from './@types/input.js';
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    id: string;
+    name: string;
+    label?: string;
+    required?: boolean;
+    variant?: Variant;
+    intent?: Intent;
+    rows: number;
+    placeHolder?: string;
+    autoComplete?: string;
+    error?: boolean;
+    helpText?: string;
+    errorText?: string;
+    className?: string;
+    ref?: React.RefCallback<HTMLTextAreaElement | null> | React.RefObject<HTMLTextAreaElement | null>;
+}
+export declare const TextArea: ({ ref, id, name, label, rows, required, variant, intent, placeHolder, autoComplete, error, helpText, errorText, className, ...rest }: TextAreaProps) => React.JSX.Element;
+//# sourceMappingURL=text-area.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/text-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AASnC,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAExD,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACtF,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,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/inputs/text-area.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { ErrorText } from "./error-text.js";
+import { HelpText } from "./help-text.js";
+import input_module from "./input.module.js";
+import { Label } from "./label.js";
+import text_area_module from "./text-area.module.js";
+const text_area_TextArea = function({ ref, id, name, label, rows = 4, required = false, variant = 'outlined', intent = 'primary', placeHolder = '', autoComplete = 'off', error = false, helpText = '', errorText = '', className, ...rest }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('text-area-wrapper', input_module["input-wrapper"]),
+        children: [
+            null != label && /*#__PURE__*/ jsx(Label, {
+                id: id,
+                htmlFor: id,
+                required: required,
+                label: label
+            }),
+            /*#__PURE__*/ jsx("textarea", {
+                ref: ref,
+                id: id,
+                name: name,
+                required: required,
+                rows: rows,
+                autoComplete: autoComplete,
+                placeholder: placeHolder,
+                "aria-labelledby": `label-for-${id}`,
+                "aria-invalid": error,
+                "aria-required": required,
+                "aria-errormessage": errorText,
+                "aria-describedby": error ? `error-for-${id}` : void 0,
+                className: classnames('infonomic-text-area', `infonomic-text-area-${variant}`, `infonomic-text-area-${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
+            }),
+            error ? /*#__PURE__*/ jsx(ErrorText, {
+                id: `error-for-${id}`,
+                text: errorText ?? helpText
+            }) : helpText?.length > 0 && /*#__PURE__*/ jsx(HelpText, {
+                text: helpText
+            })
+        ]
+    });
+};
+export { text_area_TextArea as TextArea };

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

@@ -0,0 +1,7 @@
+import "./text-area_module.css";
+const text_area_module = {
+    "text-area": "text-area-TY2VVE",
+    textArea: "text-area-TY2VVE",
+    underlined: "underlined-TE6gDa"
+};
+export default text_area_module;

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

@@ -0,0 +1,19 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.text-area-TY2VVE, .infonomic-text-area) {
+    width: 100%;
+    padding: .5rem;
+    font-size: 1rem;
+  }
+
+  :is(.underlined-TE6gDa, .infonomic-text-area--underlined) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  :is(.underlined-TE6gDa:focus, .underlined-TE6gDa:active, .infonomic-text-area--underlined:focus, .infonomic-text-area--underlined:active) {
+    outline: none;
+  }
+}
+

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

@@ -0,0 +1,3 @@
+export declare function hasErrors(name: string, clientErrors: any, serverErrors: any): boolean;
+export declare function getErrorText(name: string, clientErrors: any, serverErrors: any): string | undefined;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/utils.ts"],"names":[],"mappings":"AAIA,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,GAAG,OAAO,CAErF;AAED,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,GAAG,EACjB,YAAY,EAAE,GAAG,GAChB,MAAM,GAAG,SAAS,CAQpB"}

package/dist/components/inputs/utils.js

@@ -0,0 +1,10 @@
+function hasErrors(name, clientErrors, serverErrors) {
+    return Boolean(serverErrors?.[name] ?? clientErrors[name]);
+}
+function getErrorText(name, clientErrors, serverErrors) {
+    const message = clientErrors[name]?.message;
+    if (null != message) return message;
+    const error = null != serverErrors ? serverErrors[name] : void 0;
+    if (error?._errors != null) return error._errors.join(' ');
+}
+export { getErrorText, hasErrors };