@agilant/toga-blox 1.0.318-beta.13 → 1.0.318-beta.14

package/dist/components/AdvancedSelect/AdvancedSelect.js

@@ -239,7 +239,7 @@ function AdvancedSelect(props) {
                                 }, onFocus: openMenu, onKeyDown: onKeyDown })] }), _jsxs("div", { className: classes.indicators, children: [hasAnyValue && (_jsx("button", { type: "button", className: classes.indicatorBtn, disabled: disabled, onClick: (e) => {
                                     e.stopPropagation();
                                     clearAll();
-                                }, "aria-label": "Clear", children: getFontAwesomeIcon("xmark", "regular") })), _jsx("button", { type: "button", className: classes.indicatorBtn, disabled: disabled, onClick: (e) => {
+                                }, "aria-label": "Clear", children: _jsx("span", { className: classes.clearSingleInput, children: getFontAwesomeIcon("xmark", "regular") }) })), _jsx("button", { type: "button", className: classes.indicatorBtn, disabled: disabled, onClick: (e) => {
                                     e.stopPropagation();
                                     if (open)
                                         closeMenu();

package/dist/components/AdvancedSelect/AdvancedSelect.module.css

@@ -27,6 +27,7 @@
 
 	&.multi {
 		min-height: var(--advancedSelect-row-min-height);
+		padding: var(--advancedSelect-row-padding);
 	}
 
 	&:hover {
@@ -161,7 +162,7 @@
 
 .input::placeholder {
 	color: var(--baseInput-placeholder-text-default);
-	font-size: var(--baseInput-font-size-small, 0.875rem);
+	font-size: var(--baseInput-font-size-default, 0.875rem);
 }
 
 .chip {
@@ -172,8 +173,12 @@
 	border-radius: var(--baseInputMultiSelect-border-radius, 0.25rem);
 	background: var(--baseInputMultiSelect-bg-default);
 	color: var(--baseInputMultiSelect-text-default);
-	font-size: var(--baseInput-font-size-small, 0.875rem);
+	font-size: var(--baseInput-font-size-default, 0.875rem);
 	line-height: 1.2;
+
+	&:hover {
+		background: var(--baseInputMultiSelect-bg-hover);
+	}
 }
 
 .chipRemove {
@@ -182,18 +187,9 @@
 	justify-content: center;
 	background: transparent;
 	border: none;
-	padding: 0;
+	padding: 1px;
 	cursor: pointer;
 	color: inherit;
-	opacity: 0.7;
-
-	svg {
-		color: #FFF;
-	}
-}
-
-.chipRemove:hover {
-	opacity: 1;
 }
 
 .indicators {
@@ -210,16 +206,20 @@
 	background: transparent;
 	border: none;
 	cursor: pointer;
-	color: var(--baseInput-dropdownIndicator-default);
+	color: var(--baseInput-dropdownIndicator-text-default);
 	line-height: 1;
-
-	svg {
-		color: #677FD5;
+	
+	&:hover {
+		color: var(--baseInput-dropdownIndicator-text-focusAndHover);
 	}
 }
 
-.indicatorBtn:hover {
-	color: var(--baseInput-dropdownIndicator-text-focusAndHover);
+.clearSingleInput {
+	color: var(--baseInput-clearIndicator-text-default);
+
+	&:hover {
+		color: var(--baseInput-clearIndicator-text-hover);
+	}
 }
 
 .indicatorBtn:disabled {
@@ -298,6 +298,7 @@
 		border-radius: var(--baseInputOptionCheckbox-border-radius);
 		border: var(--baseInputOptionCheckbox-border);
 		padding: var(--baseInputOptionCheckbox-padding);
+		flex-shrink: 0;
 		cursor: pointer;
 	}
 

package/dist/components/BaseAddress/BaseAddress.module.css

@@ -2,8 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: var(--address-line-gap, 0.125rem);
-}
+ }
 
 .addressee {
 	font-size: var(--address-line-font-size, 0.875rem);

package/dist/components/BaseDetailField/BaseDetailField.js

@@ -5,10 +5,10 @@ import renderBaseDetailFieldLabel from "./renderBaseDetailFieldLabel.js";
 import styles from "./BaseDetailField.module.css";
 const IconWrapper = ({ icon, weight, }) => (_jsx("div", { className: styles.icon, children: getFontAwesomeIcon(icon, weight ?? "regular") }));
 const ValueImage = ({ src, alt }) => (_jsx("div", { className: styles.valueImage, children: _jsx("img", { src: src, alt: alt || "" }) }));
-const BaseDetailField = ({ dataItem, field, allFields, allData, iconStyle = "solid", isDisabled, dataTestId, currencyCharacter, labelSuffixValue, showSecondValue, }) => {
+const BaseDetailField = ({ dataItem, field, allFields, allData, iconStyle = "solid", isDisabled, dataTestId, currencyCharacter, labelSuffixValue, showSecondValue, dtLabelClassName }) => {
     if (!field)
         return null;
     const { uuid, hasBottomBorder, hasTopBorder, hideLabel, hasValueLeftIconOne, valueIconOneWeight, hasValueLeftIconTwo, valueIconTwoWeight, hasValueImage, valueImageAlt, hasValueRightIcon, valueType, colSpan, } = field;
-    return (_jsx("div", { className: styles.container, style: { "--field-col-span": colSpan ?? 1 }, "data-testid": dataTestId ?? "base-detail-field", "data-disabled": isDisabled || undefined, "data-has-bottom-border": hasBottomBorder || undefined, "data-has-top-border": hasTopBorder || undefined, children: _jsxs("dl", { className: styles.inner, children: [_jsx("dt", { className: hideLabel ? styles.labelHidden : styles.label, children: renderBaseDetailFieldLabel(field, labelSuffixValue) }), _jsxs("dd", { className: styles.value, children: [hasValueLeftIconOne && (_jsx(IconWrapper, { icon: hasValueLeftIconOne, weight: valueIconOneWeight })), hasValueLeftIconTwo && (_jsx(IconWrapper, { icon: hasValueLeftIconTwo, weight: valueIconTwoWeight })), hasValueImage && dataItem !== "—" && (_jsx(ValueImage, { src: hasValueImage, alt: valueImageAlt })), renderBaseDetailFieldValue(field, dataItem, isDisabled, allFields, allData, currencyCharacter, showSecondValue), hasValueRightIcon && (_jsx(IconWrapper, { icon: hasValueRightIcon, weight: iconStyle }))] })] }) }, uuid));
+    return (_jsx("div", { className: styles.container, style: { "--field-col-span": colSpan ?? 1 }, "data-testid": dataTestId ?? "base-detail-field", "data-disabled": isDisabled || undefined, "data-has-bottom-border": hasBottomBorder || undefined, "data-has-top-border": hasTopBorder || undefined, children: _jsxs("dl", { className: styles.inner, children: [_jsx("dt", { className: hideLabel ? styles.labelHidden : styles.label, children: renderBaseDetailFieldLabel(field, labelSuffixValue, dtLabelClassName) }), _jsxs("dd", { className: styles.value, children: [hasValueLeftIconOne && (_jsx(IconWrapper, { icon: hasValueLeftIconOne, weight: valueIconOneWeight })), hasValueLeftIconTwo && (_jsx(IconWrapper, { icon: hasValueLeftIconTwo, weight: valueIconTwoWeight })), hasValueImage && dataItem !== "—" && (_jsx(ValueImage, { src: hasValueImage, alt: valueImageAlt })), renderBaseDetailFieldValue(field, dataItem, isDisabled, allFields, allData, currencyCharacter, showSecondValue), hasValueRightIcon && (_jsx(IconWrapper, { icon: hasValueRightIcon, weight: iconStyle }))] })] }) }, uuid));
 };
 export default BaseDetailField;

package/dist/components/BaseDetailField/BaseDetailField.module.css

@@ -7,7 +7,7 @@
 
 .inner {
 	display: flex;
-	gap: 0.5rem;
+	gap: var(--field-label-gap, 2px);
 	width: 100%;
 	flex-wrap: wrap;
 	flex-direction: var(--field-flex-direction, row);
@@ -29,7 +29,7 @@
 	white-space: var(--field-label-white-space, nowrap);
 	color: var(--field-label-color, inherit);
 	font-size: var(--field-label-font-size, 0.875rem);
-	font-family: var(--field-label-fontFamily-default, inherit)
+	font-family: var(--field-label-fontFamily-default, inherit);
 }
 
 .labelHidden {
@@ -126,7 +126,6 @@
 	pointer-events: none;
 }
 
-
 .labelWithBadge {
 	display: flex;
 	align-items: center;

package/dist/components/BaseDetailField/renderBaseDetailFieldLabel.d.ts

@@ -1,3 +1,3 @@
 import { FieldConfig } from "../DetailSection/types.js";
-declare const renderBaseDetailFieldLabel: (field: FieldConfig, labelSuffixValue?: string) => import("react/jsx-runtime").JSX.Element;
+declare const renderBaseDetailFieldLabel: (field: FieldConfig, labelSuffixValue?: string, dtLabelClassName?: string) => import("react/jsx-runtime").JSX.Element;
 export default renderBaseDetailFieldLabel;

package/dist/components/BaseDetailField/renderBaseDetailFieldLabel.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// renderBaseDetailFieldLabel.tsx
+import clsx from "clsx";
 import { BaseToolTip } from "../index.js";
 // import { renderBadge } from "../../utils/index.js";
 import styles from "./BaseDetailField.module.css";
-const renderBaseDetailFieldLabel = (field, labelSuffixValue) => {
+const renderBaseDetailFieldLabel = (field, labelSuffixValue, dtLabelClassName) => {
     const { label, labelSuffix, labelTooltip } = field || {};
     const labelHasBadge = labelSuffix?.type === "badge" && labelSuffixValue;
     if (!label)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: labelHasBadge ? styles.labelWithBadge : styles.label, children: label }), labelTooltip && (_jsx(BaseToolTip, { message: labelTooltip, icon: "circleInfo", toolTipPlacement: "right" }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(labelHasBadge ? styles.labelWithBadge : styles.label, dtLabelClassName), children: label }), labelTooltip && (_jsx(BaseToolTip, { message: labelTooltip, icon: "circleInfo", toolTipPlacement: "right" }))] }));
 };
 export default renderBaseDetailFieldLabel;

package/dist/components/BaseDetailField/types.d.ts

@@ -10,4 +10,5 @@ export type BaseDetailFieldProps<TData = any> = {
     labelSuffixValue?: string;
     dataTestId?: string;
     showSecondValue?: boolean;
+    dtLabelClassName?: string;
 };

package/dist/components/BaseInput/BaseCheckbox.d.ts

@@ -2,6 +2,7 @@ interface BaseCheckboxProps {
     control: any;
     valueKey: string;
     defaultValue: boolean;
+    isDisabled?: boolean;
 }
 declare const BaseCheckbox: React.FC<BaseCheckboxProps>;
 export default BaseCheckbox;

package/dist/components/BaseInput/BaseCheckbox.js

@@ -4,8 +4,8 @@ import { Controller } from "react-hook-form";
 import styles from "./BaseInput.module.css";
 import clsx from "clsx";
 const BaseCheckbox = (props) => {
-    const { control, valueKey, defaultValue, } = props;
-    return (_jsx(Controller, { name: valueKey, control: control, defaultValue: defaultValue, render: ({ field }) => (_jsxs("div", { className: styles.checkboxWrapper, children: [_jsx("input", { type: "checkbox", className: clsx(styles.checkbox), id: valueKey, checked: field.value, onChange: (e) => {
+    const { control, valueKey, defaultValue, isDisabled, } = props;
+    return (_jsx(Controller, { name: valueKey, control: control, defaultValue: defaultValue, render: ({ field }) => (_jsxs("div", { className: styles.checkboxWrapper, children: [_jsx("input", { type: "checkbox", className: clsx(styles.checkbox), disabled: isDisabled, id: valueKey, checked: field.value, onChange: (e) => {
                         field.onChange(e.target.checked);
                     } }), _jsx("span", { className: styles.checkboxIconWrapper, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3.5 w-3.5", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "1", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })] })) }));
 };

package/dist/components/BaseInput/BaseInput.js

@@ -10,7 +10,7 @@ import BaseRadioInput from "./BaseRadio.js";
 import clsx from "clsx";
 import styles from "./BaseInput.module.css";
 import BaseTextInput from "./BaseTextInput.js";
-const BaseInput = ({ dataItem, field, uuid, dynamicDefaultValue, isArrayValue, onBlur, menuPlacement, valueKey, requireUuidField, afterInputTextClasses, afterInputText, disabledSelectText = "Not Editable", colSpan, onSearchChange, toggleTextPosition = "right", toggleAdditionalClasses, toggleHasDivider = false, toggleActiveLabel = "Yes", toggleInactiveLabel = "No", }) => {
+const BaseInput = ({ dataItem, field, uuid, dynamicDefaultValue, isArrayValue, onBlur, menuPlacement, valueKey, requireUuidField, afterInputTextClasses, afterInputText, disabledSelectText = "Not Editable", colSpan, onSearchChange, toggleTextPosition = "right", toggleAdditionalClasses, toggleHasDivider = false, toggleActiveLabel = "Yes", toggleInactiveLabel = "No", disabled }) => {
     const input = field;
     const { register, control, watch, getValues, formState: { errors, dirtyFields }, setValue, } = useFormContext();
     const handleInputChange = (inputValue) => {
@@ -61,20 +61,20 @@ const BaseInput = ({ dataItem, field, uuid, dynamicDefaultValue, isArrayValue, o
         return (_jsxs("div", { className: clsx(styles.inputAndLabelWrapper, colSpan && getColSpanClass(colSpan)), children: [_jsxs("label", { htmlFor: input.valueKey, className: clsx(styles.label), children: [input.inputLabel, input.isRequired && input.showRequiredIndicator && (_jsx("span", { className: styles.requiredAsterisk, children: "*" }))] }), (() => {
                     switch (input.inputType) {
                         case "text":
-                            return (_jsx(BaseTextInput, { uuid: input.uuid, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey), control: control, onBlur: onBlur, inputHasLeftIcon: input.inputHasLeftIcon, isRequired: input.isRequired, showRequiredIndicator: input.showRequiredIndicator, valueType: input.valueType, valueKey: input.valueKey, requireUuidField: input.requireUuidField, hasTypeCheck: input.hasTypeCheck, placeholder: input.placeholder, errorMessage: errorMessage, isFieldDirty: isFieldDirty, isFieldError: isFieldError }));
+                            return (_jsx(BaseTextInput, { uuid: input.uuid, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey), control: control, onBlur: onBlur, inputHasLeftIcon: input.inputHasLeftIcon, isRequired: input.isRequired, showRequiredIndicator: input.showRequiredIndicator, valueType: input.valueType, valueKey: input.valueKey, requireUuidField: input.requireUuidField, hasTypeCheck: input.hasTypeCheck, placeholder: input.placeholder, errorMessage: errorMessage, isFieldDirty: isFieldDirty, isFieldError: isFieldError, isDisabled: disabled }));
                         case "toggle":
                             return (_jsx(BaseToggle, { control: control, valueKey: input.valueKey, defaultValue: dataItem
                                     ? dataItem[input.valueKey]
-                                    : "", toggleTextPosition: toggleTextPosition, toggleAdditionalClasses: toggleAdditionalClasses, toggleHasDivider: toggleHasDivider, toggleActiveLabel: toggleActiveLabel, toggleInactiveLabel: toggleInactiveLabel }));
+                                    : "", toggleTextPosition: toggleTextPosition, toggleAdditionalClasses: toggleAdditionalClasses, toggleHasDivider: toggleHasDivider, toggleActiveLabel: toggleActiveLabel, toggleInactiveLabel: toggleInactiveLabel, isDisabled: disabled }));
                         case "textArea":
-                            return (_jsx(BaseTextareaInput, { watch: watch, control: control, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey), valueKey: input.valueKey, errorMessage: errorMessage, isFieldDirty: isFieldDirty, isFieldError: isFieldError, placeholder: input.placeholder, characterLimit: input.characterLimit }));
+                            return (_jsx(BaseTextareaInput, { watch: watch, control: control, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey), valueKey: input.valueKey, errorMessage: errorMessage, isFieldDirty: isFieldDirty, isFieldError: isFieldError, placeholder: input.placeholder, characterLimit: input.characterLimit, isDisabled: disabled }));
                         case "disabledSelect":
                             return (_jsx(DisabledSelect, { disabledSelectText: disabledSelectText, labelTextClasses: styles.label }));
                         case "checkbox":
-                            return (_jsx(BaseCheckbox, { control: control, valueKey: input.valueKey, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey) }));
+                            return (_jsx(BaseCheckbox, { control: control, valueKey: input.valueKey, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey), isDisabled: disabled }));
                         case "advancedSelect":
                         case "advancedMultiSelect":
-                            return (_jsx(Controller, { control: control, name: input.valueKey, render: ({ field: rhfField }) => (_jsx(AdvancedSelect, { isFieldDirty: isFieldDirty, isFieldError: isFieldError, mode: input.inputType ===
+                            return (_jsx(Controller, { control: control, name: input.valueKey, render: ({ field: rhfField }) => (_jsx(AdvancedSelect, { isFieldDirty: isFieldDirty, isFieldError: isFieldError, disabled: disabled, mode: input.inputType ===
                                         "advancedMultiSelect"
                                         ? "multi"
                                         : "single", data: input.data ??
@@ -87,11 +87,11 @@ const BaseInput = ({ dataItem, field, uuid, dynamicDefaultValue, isArrayValue, o
                                             i?.label ??
                                             String(i)), hasMorePages: input.hasMorePages, isFetchingMore: input.isFetchingMore, fetchMoreData: input.fetchMoreData, findSpecificValue: input.findSpecificValue, placeholder: input.placeholder, valueKey: input.valueKey })) }));
                         case "radio":
-                            return (_jsx(BaseRadioInput, { control: control, valueKey: input.valueKey, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey), options: input.options }));
+                            return (_jsx(BaseRadioInput, { control: control, valueKey: input.valueKey, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey), options: input.options, isDisabled: disabled }));
                         default:
                             return null;
                     }
-                })(), input.afterInputText && (_jsx("div", { className: "flex items-center ml-2 text-nowrap", children: _jsx("p", { className: `${afterInputTextClasses}`, children: afterInputText }) }))] }, input.uuid));
+                })(), input.afterInputText && (_jsx("div", { className: styles.afterInputText, children: _jsx("p", { className: `${afterInputTextClasses}`, children: afterInputText }) }))] }, input.uuid));
     };
     return input && _jsx(_Fragment, { children: getInput(input) });
 };

package/dist/components/BaseInput/BaseInput.module.css

@@ -12,6 +12,7 @@
 	width: var(--baseInputAndWrapper-width);
 	min-height: var(--baseInputAndWrapper-height);
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
 	gap: var(--baseInputAndWrapper-gap, 0.5rem);
 
@@ -21,9 +22,8 @@
 }
 
 .label {
-	color: var(--field-label-color);
+	color: var(--baseInput-label-text);
 	letter-spacing: var(--field-label-letter-spacing);
-	text-wrap: nowrap;
 }
 
 .requiredAsterisk {
@@ -54,11 +54,8 @@
 		background: var(--baseInput-bg-focus);
 	}
 
-	&:has(.input:disabled),
-	&:has(.textarea:disabled),
-	&:has(.select__control--is-disabled) {
-		color: var(--baseInput-border-disabled);
-		background: var(--baseInput-bg-disabled);
+	&:has(.inputIcon) .input {
+		text-align: end;
 	}
 
 	/* ask designers if icon needs to change after typing */
@@ -115,7 +112,17 @@
 	&:has(.doubleValue) {
 		/* double the lineheight */
 		min-height: calc(2 * 1lh);
+	}	
+	
+	&:has(.input:disabled),
+	&:has(.textarea:disabled),
+	&:has(.checkbox:disabled),
+	&:has(.radio:disabled),
+	&:has(.select__control--is-disabled) {
+		border: var(--baseInput-border-disabled);
+		background: var(--baseInput-bg-disabled);
 	}
+
 }
 
 .disabledSelect {
@@ -144,7 +151,7 @@
 }
 
 .inputIcon {
-	color: var(--Gray-gray-500, #8c8e96);
+	color: var(--baseInput-dollarIcon);
 	text-align: center;
 	font-size: var(--baseInput-icon-font-size);
 	font-weight: var(--baseInput-icon-font-weight);
@@ -498,3 +505,10 @@ React Select: selectInput from BaseSelect, multiSelectInput from BaseMultiSelect
 	font-size: var(--baseInputRadioLabel-font-default);
 	color: var(--baseInputRadioLabel-font-default);
 }
+
+.afterInputText {
+	display: flex;
+	align-items: center;
+	margin: var(--baseInputAfterInput-margin);
+	text-wrap: nowrap;
+}

package/dist/components/BaseInput/BaseInput.types.d.ts

@@ -102,6 +102,7 @@ export interface BaseInputTypes {
     characterLimit?: number;
     disabledSelectContainerClasses?: string;
     disabledSelectText?: string;
+    disabled?: boolean;
     textAreaHeight?: string;
     colSpan?: string;
     dropdownIndicatorColor?: string;

package/dist/components/BaseInput/BaseRadio.d.ts

@@ -9,6 +9,7 @@ interface BaseRadioInputProps {
     }[];
     radioAndSvgWrapperClassName?: string;
     radioLabelClassName?: string;
+    isDisabled?: boolean;
 }
 declare const BaseRadioInput: React.FC<BaseRadioInputProps>;
 export default BaseRadioInput;

package/dist/components/BaseInput/BaseRadio.js

@@ -3,7 +3,7 @@ import { Controller } from "react-hook-form";
 import styles from "./BaseInput.module.css";
 import clsx from "clsx";
 const BaseRadioInput = (props) => {
-    const { control, valueKey, defaultValue, options, radioAndSvgWrapperClassName, radioLabelClassName, } = props;
-    return (_jsx(Controller, { name: valueKey, control: control, defaultValue: defaultValue, render: ({ field }) => (_jsx("div", { className: styles.radioContainer, children: options.map((option) => (_jsxs("label", { className: styles.radioLabel, children: [_jsxs("div", { className: clsx(styles.radioAndSvgWrapper, radioAndSvgWrapperClassName), children: [_jsx("input", { type: "radio", className: styles.radio, id: `${valueKey}-${option.value}`, value: option.value, checked: field.value === option.value, onChange: () => field.onChange(option.value) }), _jsx("span", { className: styles.radioIconWrapper, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `${styles.radioSvg}`, viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "1", children: _jsx("circle", { cx: "10", cy: "10", r: "7" }) }) })] }), _jsx("span", { className: clsx(styles.radioLabel, radioLabelClassName), children: option.label })] }, option.value))) })) }));
+    const { control, valueKey, defaultValue, options, radioAndSvgWrapperClassName, radioLabelClassName, isDisabled, } = props;
+    return (_jsx(Controller, { name: valueKey, control: control, defaultValue: defaultValue, render: ({ field }) => (_jsx("div", { className: styles.radioContainer, children: options.map((option) => (_jsxs("label", { className: styles.radioLabel, children: [_jsxs("div", { className: clsx(styles.radioAndSvgWrapper, radioAndSvgWrapperClassName), children: [_jsx("input", { type: "radio", className: styles.radio, disabled: isDisabled, id: `${valueKey}-${option.value}`, value: option.value, checked: field.value === option.value, onChange: () => field.onChange(option.value) }), _jsx("span", { className: styles.radioIconWrapper, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `${styles.radioSvg}`, viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "1", children: _jsx("circle", { cx: "10", cy: "10", r: "7" }) }) })] }), _jsx("span", { className: clsx(styles.radioLabel, radioLabelClassName), children: option.label })] }, option.value))) })) }));
 };
 export default BaseRadioInput;

package/dist/components/BaseInput/BaseTextInput.d.ts

@@ -15,6 +15,7 @@ interface BaseTextInputProps {
     errorMessage?: string;
     isFieldDirty?: boolean;
     isFieldError?: boolean;
+    isDisabled?: boolean;
 }
 declare const BaseTextInput: React.FC<BaseTextInputProps>;
 export default BaseTextInput;

package/dist/components/BaseInput/BaseTextInput.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
-import { getFontAwesomeIcon, formatPhoneNumber } from "../../utils/index.js";
+import { getFontAwesomeIcon, formatPhoneNumber, formatCurrency } from "../../utils/index.js";
 import BaseErrorMessage from "./components/BaseErrorMessage.js";
 import clsx from "clsx";
 import styles from "./BaseInput.module.css";
 const BaseTextInput = (props) => {
-    const { uuid, defaultValue, control, onBlur, inputHasLeftIcon, isRequired, valueType, valueKey, requireUuidField, hasTypeCheck, placeholder, errorMessage, isFieldDirty, isFieldError, } = props;
+    const { uuid, defaultValue, control, onBlur, inputHasLeftIcon, isRequired, valueType, valueKey, requireUuidField, hasTypeCheck, placeholder, errorMessage, isFieldDirty, isFieldError, isDisabled, } = props;
     return (_jsxs("div", { className: styles.inputContainer, children: [inputHasLeftIcon && (_jsx("div", { className: styles.inputIcon, children: getFontAwesomeIcon(inputHasLeftIcon, "solid") })), _jsx(Controller, { name: `${requireUuidField ? uuid : valueKey}`, control: control, defaultValue: defaultValue, rules: {
                     ...(isRequired
                         ? {
@@ -23,12 +23,25 @@ const BaseTextInput = (props) => {
                             },
                         }
                         : {}),
-                }, render: ({ field }) => (_jsx("input", { ...field, id: valueKey, type: hasTypeCheck === "number" ? "number" : "text", className: clsx(styles.input, isFieldDirty && !isFieldError && styles.dirty, isFieldError && styles.error), placeholder: placeholder, onFocus: (e) => e.target.select(), onBlur: onBlur, onChange: (e) => {
-                        let value = e.target.value;
-                        if (valueType === "phone") {
-                            value = formatPhoneNumber(value);
+                    ...(hasTypeCheck === "currency"
+                        ? {
+                            pattern: {
+                                value: /^[0-9]+(\.[0-9]{1,2})?$/,
+                                message: `Enter valid cost.`,
+                            },
                         }
-                        field.onChange(value);
-                    } })) }), errorMessage && _jsx(BaseErrorMessage, { errorMessage: errorMessage })] }));
+                        : {}),
+                }, render: ({ field, }) => {
+                    return (_jsx("input", { ...field, id: valueKey, type: "text", className: clsx(styles.input, isFieldDirty && !isFieldError && styles.dirty, isFieldError && styles.error), disabled: isDisabled, placeholder: placeholder, onFocus: (e) => e.target.select(), onBlur: onBlur, onChange: (e) => {
+                            let value = e.target.value;
+                            if (valueType === "phone") {
+                                value = formatPhoneNumber(value);
+                            }
+                            if (valueType === "currency") {
+                                value = formatCurrency(value);
+                            }
+                            field.onChange(value);
+                        } }));
+                } }), errorMessage && _jsx(BaseErrorMessage, { errorMessage: errorMessage })] }));
 };
 export default BaseTextInput;

package/dist/components/BaseInput/BaseTextareaInput.d.ts

@@ -10,6 +10,7 @@ interface BaseTextareaInputProps {
     placeholder?: string;
     characterLimit?: number;
     textareaClassName?: string;
+    isDisabled?: boolean;
 }
 declare const BaseTextareaInput: React.FC<BaseTextareaInputProps>;
 export default BaseTextareaInput;

package/dist/components/BaseInput/BaseTextareaInput.js

@@ -5,13 +5,13 @@ import CharacterLimitMessage from "./components/CharacterLimitMessage.js";
 import clsx from "clsx";
 import styles from "./BaseInput.module.css";
 const BaseTextareaInput = (props) => {
-    const { watch, control, defaultValue, valueKey, errorMessage, isFieldDirty, isFieldError, placeholder, characterLimit, textareaClassName, } = props;
+    const { watch, control, defaultValue, valueKey, errorMessage, isFieldDirty, isFieldError, placeholder, characterLimit, textareaClassName, isDisabled, } = props;
     return (_jsx("div", { className: styles.inputContainer, children: _jsx(Controller, { control: control, name: valueKey, defaultValue: defaultValue, render: ({ field }) => {
                 const textAreaValue = watch(valueKey);
                 const characterCount = textAreaValue
                     ? textAreaValue.length
                     : 0;
-                return (_jsxs("div", { className: styles.textareaAndCharLimitWrapper, children: [_jsx("textarea", { ...field, id: valueKey, placeholder: placeholder, value: field.value || "", className: clsx(styles.textarea, isFieldDirty && !isFieldError && styles.dirty, isFieldError && styles.error, textareaClassName), onFocus: (e) => e.target.select() }), _jsxs("div", { className: clsx(styles.textareaBottomTextContainer, isFieldError && styles.textareaError), children: [errorMessage && (_jsx(BaseErrorMessage, { errorMessage: errorMessage })), characterLimit && (_jsx(CharacterLimitMessage, { isFieldError: isFieldError, isFieldDirty: isFieldDirty, characterLimit: characterLimit, characterCount: characterCount }))] })] }));
+                return (_jsxs("div", { className: styles.textareaAndCharLimitWrapper, children: [_jsx("textarea", { ...field, id: valueKey, placeholder: placeholder, disabled: isDisabled, value: field.value || "", className: clsx(styles.textarea, isFieldDirty && !isFieldError && styles.dirty, isFieldError && styles.error, textareaClassName), onFocus: (e) => e.target.select() }), _jsxs("div", { className: clsx(styles.textareaBottomTextContainer, isFieldError && styles.textareaError), children: [errorMessage && (_jsx(BaseErrorMessage, { errorMessage: errorMessage })), characterLimit && (_jsx(CharacterLimitMessage, { isFieldError: isFieldError, isFieldDirty: isFieldDirty, characterLimit: characterLimit, characterCount: characterCount }))] })] }));
             } }) }));
 };
 export default BaseTextareaInput;

package/dist/components/BaseInput/BaseToggle.d.ts

@@ -8,6 +8,7 @@ interface BaseToggleProps {
     toggleHasDivider?: boolean;
     toggleActiveLabel?: string;
     toggleInactiveLabel?: string;
+    isDisabled?: boolean;
 }
 declare const BaseToggle: React.FC<BaseToggleProps>;
 export default BaseToggle;

package/dist/components/BaseInput/BaseToggle.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 import { ToggleButton } from "../ToggleButton/index.js";
 const BaseToggle = (props) => {
-    const { control, valueKey, defaultValue, toggleTextPosition = "right", toggleAdditionalClasses, toggleHasDivider = false, toggleActiveLabel = "Yes", toggleInactiveLabel = "No", } = props;
-    return (_jsx("div", { children: _jsx(Controller, { control: control, name: valueKey, defaultValue: defaultValue, render: ({ field: { value, onChange } }) => (_jsx(ToggleButton, { initialStatus: Boolean(value), onClick: () => onChange(!value), textPosition: toggleTextPosition, additionalClasses: toggleAdditionalClasses, hasDivider: toggleHasDivider, activeLabel: toggleActiveLabel, inactiveLabel: toggleInactiveLabel, id: valueKey })) }) }));
+    const { control, valueKey, defaultValue, toggleTextPosition = "right", toggleAdditionalClasses, toggleHasDivider = false, toggleActiveLabel = "Yes", toggleInactiveLabel = "No", isDisabled, } = props;
+    return (_jsx("div", { children: _jsx(Controller, { control: control, name: valueKey, defaultValue: defaultValue, render: ({ field: { value, onChange } }) => (_jsx(ToggleButton, { initialStatus: Boolean(value), onClick: () => onChange(!value), textPosition: toggleTextPosition, additionalClasses: toggleAdditionalClasses, hasDivider: toggleHasDivider, activeLabel: toggleActiveLabel, inactiveLabel: toggleInactiveLabel, id: valueKey, isDisabled: isDisabled })) }) }));
 };
 export default BaseToggle;

package/dist/components/BaseToolTip/BaseToolTip.module.css

@@ -11,6 +11,9 @@
 	align-items: center;
 	justify-content: center;
 	border-radius: 9999px;
+	background-color: var(--tooltip-icon-bg);
+	color: var(--tooltip-icon-text);
+	font-size: 12px;
 }
 
 .childrenTrigger {
@@ -28,10 +31,10 @@
 	font-size: 12px;
 	text-align: left;
 	white-space: nowrap;
-	background-color: var(--tooltip-bg, #191e2d);
+	background-color: var(--tooltip-bg);
 	color: var(--tooltip-text, #ffffff);
 	pointer-events: none;
-	font-family: var(--tooltip-fontFamily, #ffffff);
+	font-family: var(--tooltip-fontFamily);
 }
 
 /* Placement transforms — top/left coords are set via inline style */

package/dist/components/BaseTotals/BaseTotals.js

@@ -16,9 +16,13 @@ const formatValue = (raw, valueType = "text", currencyCharacter, prefix) => {
 const FieldRow = ({ field, value, currencyCharacter }) => {
     const formatted = formatValue(value, field.valueType, currencyCharacter, field.valuePrefix);
     if (field.isTotal) {
-        return (_jsxs("div", { className: styles.totalRow, children: [_jsxs("div", { className: styles.labelGroup, children: [_jsx("p", { className: styles.totalLabel, children: field.label }), field.tooltip && (_jsx(BaseToolTip, { message: field.tooltip, icon: "circleInfo", toolTipPlacement: "right" }))] }), _jsx("div", { children: field.loadingState ? (_jsxs("div", { className: styles.loadingGroup, children: [field.loadingState, _jsx("p", { className: styles.totalValue, children: formatted })] })) : (_jsx("p", { className: styles.totalValue, children: formatted })) })] }));
+        return (_jsxs("div", { className: styles.totalRow, children: [_jsxs("div", { className: styles.labelGroup, children: [_jsx("p", { className: styles.totalLabel, children: field.label }), field.labelToolTip && (_jsx(BaseToolTip, { message: field.labelToolTip, icon: "circleInfo", toolTipPlacement: field.labelToolTipPlacement }))] }), _jsx("div", { children: field.loadingState ? (_jsxs("div", { className: styles.loadingGroup, children: [field.loadingState, _jsx("p", { className: styles.totalValue, children: formatted })] })) : (_jsx("p", { className: styles.totalValue, children: formatted })) })] }));
     }
-    return (_jsxs("div", { className: styles.row, children: [_jsxs("div", { className: styles.labelGroup, children: [_jsx("p", { className: styles.label, children: field.label }), field.tooltip && (_jsx(BaseToolTip, { message: field.tooltip, icon: "circleInfo", toolTipPlacement: "right" }))] }), _jsx("p", { className: styles.value, children: formatted })] }));
+    return (_jsxs("div", { className: styles.row, children: [_jsxs("div", { className: styles.labelGroup, children: [_jsx("p", { className: field.valueKey === "_subtotalPurchase"
+                            ? styles.subTotalLabel
+                            : styles.label, children: field.label }), field.labelToolTip && (_jsx(BaseToolTip, { message: field.labelToolTip, icon: "circleInfo", toolTipPlacement: field.labelToolTipPlacement }))] }), _jsx("p", { className: field.valueKey === "_subtotalPurchase"
+                    ? styles.subTotalValue
+                    : styles.value, children: formatted })] }));
 };
 const BaseTotals = ({ fields, recurringFields, recurringTitle = "Recurring Charges", data, currencyCharacter = "$", }) => {
     const showRecurring = recurringFields &&

package/dist/components/BaseTotals/BaseTotals.module.css

@@ -32,6 +32,21 @@
 	font-variant-numeric: tabular-nums;
 }
 
+.subTotalLabel {
+	font-size: var(--baseTotals-subTotalLabel-font-size, 0.875rem);
+	font-weight: var(--baseTotals-subTotalLabel-font-weight, 400);
+	color: var(--baseTotals-subTotalLabel-color, inherit);
+	font-family: var(--baseTotals-subTotalLabel-fontFamily-default, inherit);
+}
+
+.subTotalValue {
+	font-size: var(--baseTotals-subTotalValue-font-size, 0.875rem);
+	font-weight: var(--baseTotals-subTotalValue-font-weight, inherit);
+	color: var(--baseTotals-subTotalValue-color, inherit);
+	font-family: var(--baseTotals-subTotalValue-fontFamily-default, inherit);
+	font-variant-numeric: tabular-nums;
+}
+
 .totalRow {
 	display: flex;
 	align-items: center;
@@ -44,14 +59,14 @@
 .totalLabel {
 	font-size: var(--baseTotals-label-font-size, 0.875rem);
 	font-weight: var(--baseTotals-total-label-font-weight, 600);
-	color: var(--baseTotals-label-color, inherit);
+	color: var(--baseTotals-total-label-color, inherit);
 	font-family: var(--baseTotals-label-fontFamily-default, inherit);
 }
 
 .totalValue {
 	font-size: var(--baseTotals-value-font-size, 0.875rem);
 	font-weight: var(--baseTotals-total-value-font-weight, 600);
-	color: var(--baseTotals-value-color, inherit);
+	color: var(--baseTotals-total-value-color, inherit);
 	font-family: var(--baseTotals-value-fontFamily-default, inherit);
 	font-variant-numeric: tabular-nums;
 }

package/dist/components/BaseTotals/types.d.ts

@@ -7,8 +7,11 @@ export interface TotalsFieldConfig {
     valueType?: TotalsValueType;
     /** Marks this field as the total row — rendered with a top border separator */
     isTotal?: boolean;
+    /** Marks this field as a subtotal row — rendered with subtotal label/value styling */
+    isSubTotal?: boolean;
     valuePrefix?: string;
-    tooltip?: string;
+    labelToolTip?: string;
+    labelToolTipPlacement?: "top" | "bottom" | "right" | "left";
     labelClasses?: string;
     valueClasses?: string;
     loadingState?: React.ReactNode;

package/dist/components/EnvironmentBadge/EnvironmentBadge.css

@@ -0,0 +1,55 @@
+.environment-badge {
+	--color-env-development-bg: #eafce8;
+	--color-env-alpha-bg: #f6e2e4;
+	--color-env-beta-bg: #ffd0b9;
+	--color-env-gamma-bg: #d3cfff;
+	--color-env-sprint-bg: #ffe8b8;
+	--color-env-stage-bg: #e6ceff;
+	--color-env-test-bg: #fce4ec;
+	--color-env-production-bg: #d60027;
+	--color-env-production-text: #ffffff;
+
+	display: flex;
+	position: absolute;
+	gap: 0.5rem;
+}
+
+.badge-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0.25rem 0.5rem;
+	font-family: var(--color-env-badge-font-family, "Omnes Medium", sans-serif);
+	font-size: var(--color-env-badge-font-size, 1rem);
+}
+
+.env-development {
+	background-color: var(--color-env-development-bg);
+}
+.env-alpha {
+	background-color: var(--color-env-alpha-bg);
+}
+.env-beta {
+	background-color: var(--color-env-beta-bg);
+}
+.env-gamma {
+	background-color: var(--color-env-gamma-bg);
+}
+.env-sprint {
+	background-color: var(--color-env-sprint-bg);
+}
+.env-stage {
+	background-color: var(--color-env-stage-bg);
+}
+.env-test {
+	background-color: var(--color-env-test-bg);
+}
+
+.env-dev-sandbox {
+	background-color: var(--color-env-beta-bg);
+}
+
+.env-production {
+	background-color: var(--color-env-production-bg);
+	color: var(--color-env-production-text);
+}

package/dist/components/EnvironmentBadge/EnvironmentBadge.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "./EnvironmentBadge.css";
+declare const EnvironmentBadge: React.FC;
+export default EnvironmentBadge;