@onehat/ui 0.4.13 → 0.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.13",
+	"version": "0.4.15",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Buttons/IconButton.js

@@ -14,14 +14,11 @@ const IconButtonElement = forwardRef((props, ref) => {
 
 	let buttonClassName = `
 		IconButton
-		${styles.ICON_BUTTON_PY}
-		${styles.ICON_BUTTON_PX}
-		${styles.ICON_BUTTON_BG}
-		${styles.ICON_BUTTON_BG_HOVER}
-		${styles.ICON_BUTTON_BG_ACTIVE}
-		${styles.ICON_BUTTON_BG_DISABLED}
 		rounded-md
 		self-center
+		px-[10px]
+		py-[10px]
+		${styles.ICON_BUTTON_CLASSNAME}
 	`;
 	if (props.className) {
 		buttonClassName += ' ' + props.className;

package/src/Components/Editor/InlineEditor.js

@@ -157,8 +157,8 @@ function InlineEditor(props) {
 							py-1
 							border-t-4
 							border-b-4
-							${styles.GRID_INLINE_EDITOR_BORDER_TOP_COLOR}
-							${styles.GRID_INLINE_EDITOR_BORDER_BOTTOM_COLOR}
+							border-t-primary-100
+							border-b-primary-100
 						`}
 					/>
 				</VStack>

package/src/Components/Form/Field/Color.js

@@ -137,7 +137,12 @@ export function ColorElement(props) {
 	assembledComponents =
 		<HStackNative
 			onLayout={() => setIsRendered(true)}
-			className="flex-1 h-full items-center"
+			className={`
+				ColorElement-HStackNative
+				flex-1
+				h-full
+				items-center
+			`}
 		>
 			<Pressable
 				ref={triggerRef}
@@ -147,7 +152,14 @@ export function ColorElement(props) {
 				borderBottomLeftRadius={6}
 				borderTopRightRadius={0}
 				borderBottomRightRadius={0}
-				className={` bg-${value} h-[10px] w-[10px] border border-grey-300 `}
+				className={`
+					ColorElement-Pressable
+					bg-${value}
+					h-[10px]
+					w-[10px]
+					border
+					border-grey-300
+				`}
 			/>
 			<Input
 				ref={inputRef}
@@ -157,6 +169,7 @@ export function ColorElement(props) {
 				onBlur={onInputBlur}
 				onClick={onInputClick}
 				className={`
+					ColorElement-Input
 					flex-1
 					h-full
 					p-2
@@ -167,9 +180,7 @@ export function ColorElement(props) {
 					border-bottom-left-radius-0
 					border-top-right-radius-6
 					border-bottom-right-radius-6
-					${styles.FORM_COLOR_READOUT_FONTSIZE}
-					${styles.FORM_COLOR_INPUT_BG}
-					${styles.FORM_COLOR_INPUT_BG_FOCUS}
+					${styles.FORM_COLOR_INPUT_CLASSNAME}
 				`}
 				onLayout={(e) => {
 					// On web, this is not needed, but on RN it might be, so leave it in for now
@@ -190,11 +201,14 @@ export function ColorElement(props) {
 				trigger={emptyFn}
 				trapFocus={true}
 				placement={'auto'}
-				{...props}
+				className={`
+					ColorElement-Popover
+				`}
 			>
 				<PopoverContent
 					position="absolute"
 					className={`
+						ColorElement-PopoverContent
 						w-[220px]
 						h-[287px]
 					`}
@@ -206,7 +220,10 @@ export function ColorElement(props) {
 				>
 					<PopoverBody
 						ref={pickerRef}
-						className="p-0"
+						className={`
+							ColorElement-PopoverBody
+							p-0
+						`}
 					>
 						<SketchPicker
 							disableAlpha={true}

package/src/Components/Form/Field/Combo/Combo.js

@@ -519,8 +519,7 @@ export function ComboComponent(props) {
 						className={`
 							h-full
 							mr-1
-							${styles.FORM_COMBO_TRIGGER_BG}
-							${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+							${styles.FORM_COMBO_TRIGGER_CLASSNAME}
 						`}
 					/>;
 	}
@@ -538,8 +537,7 @@ export function ComboComponent(props) {
 						className={`
 							h-full
 							mr-1
-							${styles.FORM_COMBO_TRIGGER_BG}
-							${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+							${styles.FORM_COMBO_TRIGGER_CLASSNAME}
 						`}
 					/>;
 	}
@@ -552,8 +550,7 @@ export function ComboComponent(props) {
 		border-gray-400
 		rounded-l-none
 		rounded-r-md
-		${styles.FORM_COMBO_TRIGGER_BG}
-		${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+		${styles.FORM_COMBO_TRIGGER_CLASSNAME}
 	`;
 	trigger = <IconButton
 				{...testProps('trigger')}
@@ -575,7 +572,7 @@ export function ComboComponent(props) {
 						{...testProps('toggleMenuBtn')}
 						onPress={toggleMenu}
 						className={`
-							toggleMenuBtn
+							Combo-toggleMenuBtn
 							h-auto
 							self-stretch
 							flex-1
@@ -596,12 +593,12 @@ export function ComboComponent(props) {
 							numberOfLines={1}
 							ellipsizeMode="head"
 							className={`
-								Text
+								Combo-TextNative
 								h-auto
 								self-stretch
 								flex-1
 								${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
-								${styles.FORM_COMBO_INPUT_FONTSIZE}
+								${styles.FORM_COMBO_INPUT_CLASSNAME}
 							`}
 						>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</TextNative>
 					</Pressable> :
@@ -620,7 +617,7 @@ export function ComboComponent(props) {
 						autoSubmitDelay={500}
 						placeholder={placeholder}
 						className={`
-							ComboInput
+							Combo-Input
 							grow
 							h-auto
 							self-stretch
@@ -628,9 +625,7 @@ export function ComboComponent(props) {
 							m-0
 							rounded-tr-none
 							rounded-br-none
-							${styles.FORM_COMBO_INPUT_FONTSIZE}
-							${styles.FORM_COMBO_INPUT_BG}
-							${styles.FORM_COMBO_INPUT_BG_FOCUS}
+							${styles.FORM_COMBO_INPUT_CLASSNAME}
 						`}
 						{..._input}
 					/>;
@@ -665,7 +660,7 @@ export function ComboComponent(props) {
 							m-0
 							p-1
 							${_.isEmpty(displayValue) ? "text-grey-400" : "text-black"}
-							${styles.FORM_COMBO_INPUT_FONTSIZE}
+							${styles.FORM_COMBO_INPUT_CLASSNAME}
 						`}
 					>{_.isEmpty(displayValue) ? placeholder : displayValue}</TextNative>
 				</Pressable>;
@@ -854,9 +849,7 @@ export function ComboComponent(props) {
 										m-0
 										rounded-tr-none
 										rounded-br-none
-										${styles.FORM_COMBO_INPUT_FONTSIZE}
-										${styles.FORM_COMBO_INPUT_BG}
-										${styles.FORM_COMBO_INPUT_BG_FOCUS}
+										${styles.FORM_COMBO_INPUT_CLASSNAME}
 									`}
 									{..._input}
 								/>
@@ -915,8 +908,7 @@ export function ComboComponent(props) {
 									border
 									border-grey-400
 									rounded-md
-									${styles.FORM_COMBO_TRIGGER_BG}
-									${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+									${styles.FORM_COMBO_TRIGGER_CLASSNAME}
 								`}
 							/>;
 			}
@@ -937,9 +929,7 @@ export function ComboComponent(props) {
 								border
 								border-grey-400
 								rounded-r-none
-								${styles.FORM_COMBO_INPUT_BG}
-								${styles.FORM_COMBO_INPUT_BG_FOCUS}
-								${styles.FORM_COMBO_INPUT_FONTSIZE}
+								${styles.FORM_COMBO_INPUT_CLASSNAME}
 							`}
 						>{textInputValue}</TextNative> :
 						<Input
@@ -961,9 +951,7 @@ export function ComboComponent(props) {
 								flex-1
 								m-0
 								rounded-r-none
-								${styles.FORM_COMBO_INPUT_FONTSIZE}
-								${styles.FORM_COMBO_INPUT_BG}
-								${styles.FORM_COMBO_INPUT_BG_FOCUS}
+								${styles.FORM_COMBO_INPUT_CLASSNAME}
 							`}
 							{..._input}
 						/>}
@@ -982,8 +970,7 @@ export function ComboComponent(props) {
 							border-grey-400
 							rounded-l-none
 							rounded-r-md
-							${styles.FORM_COMBO_TRIGGER_BG}
-							${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+							${styles.FORM_COMBO_TRIGGER_CLASSNAME}
 						`}
 					/>
 					{checkButton}

package/src/Components/Form/Field/Date.js

@@ -292,9 +292,9 @@ export const DateElement = forwardRef((props, ref) => {
 						isDisabled={isDisabled}
 						onPress={onClearBtn}
 						className={`
+							Date-xBtn
 							h-full
-							${styles.FORM_COMBO_TRIGGER_BG}
-							${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+							${styles.FORM_COMBO_TRIGGER_CLASSNAME}
 						`}
 					/>;
 	}
@@ -304,20 +304,20 @@ export const DateElement = forwardRef((props, ref) => {
 				icon={Calendar}
 				_icon={{
 					size: 'sm',
-					className: styles.FORM_DATE_ICON_COLOR,
+					className: styles.FORM_DATE_TRIGGER_ICON_CLASSNAME,
 				}}
 				onPress={onTriggerPress}
 				onBlur={onTriggerBlur}
 				isDisabled={isDisabled}
 				className={`
+					Date-trigger
 					h-10
 					w-10
 					border
 					border-grey-400
 					rounded-l-md
 					rounded-r-none
-					${styles.FORM_DATE_ICON_BG}
-					${styles.FORM_DATE_ICON_BG_HOVER}
+					${styles.FORM_DATE_TRIGGER_CLASSNAME}
 				`}
 			/>;
 
@@ -326,13 +326,14 @@ export const DateElement = forwardRef((props, ref) => {
 			<Pressable
 				{...testProps('togglePickerBtn')}
 				onPress={togglePicker}
-				className="flex-1 h-full"
+				className="Date-togglePickerBtn flex-1 h-full"
 			>
 				<TextNative
 					ref={inputRef}
 					numberOfLines={1}
 					ellipsizeMode="head"
 					className={`
+						Date-TextNative
 						flex-1
 						h-full
 						m-0
@@ -343,9 +344,7 @@ export const DateElement = forwardRef((props, ref) => {
 						rounded-l-none
 						rounded-r-md
 						${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
-						${styles.FORM_DATE_INPUT_BG}
-						${styles.FORM_DATE_INPUT_BG_FOCUS}
-						${styles.FORM_DATE_READOUT_FONTSIZE}
+						${styles.FORM_DATE_INPUT_CLASSNAME}
 					`}
 				>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</TextNative>
 			</Pressable> :
@@ -369,13 +368,12 @@ export const DateElement = forwardRef((props, ref) => {
 				// 	setTop(Math.round(height));
 				// }}
 				className={`
+					Date-Input
 					flex-1
 					h-full
 					m-0
 					rounded-r-lg
-					${styles.FORM_DATE_INPUT_BG}
-					${styles.FORM_DATE_INPUT_BG_FOCUS}
-					${styles.FORM_DATE_READOUT_FONTSIZE}
+					${styles.FORM_DATE_INPUT_CLASSNAME}
 					${_.isEmpty(textInputValue) ? 'text-grey-400' : 'text-black'}
 				`}
 				autoSubmitDelay={1000}
@@ -407,8 +405,8 @@ export const DateElement = forwardRef((props, ref) => {
 							rounded-r-md
 							${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"} 
 							${styles.FORM_DATE_READOUT_FONTSIZE} 
-							${styles.FORM_DATE_INPUT_BG}
-							${styles.FORM_DATE_INPUT_BG_FOCUS}
+							${styles.FORM_DATE_INPUT_CLASSNAME}
+							${styles.FORM_DATE_INPUT_CLASSNAME_FOCUS}
 						`}
 					>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</TextNative>
 				</Pressable>;
@@ -422,13 +420,13 @@ export const DateElement = forwardRef((props, ref) => {
 									hidePicker();
 								}}
 								trigger={emptyFn}
-								className="block"
+								className="Date-Popover block"
 							>
 								<PopoverBackdrop className="PopoverBackdrop bg-[#000]" />
 								<PopoverContent
 									ref={pickerRef}
 									className={`
-										PopoverContent
+										Date-PopoverContent
 									`}
 									style={{
 										top,
@@ -440,7 +438,7 @@ export const DateElement = forwardRef((props, ref) => {
 								>
 									<PopoverBody
 										className={`
-											PopoverBody
+											Date-PopoverBody
 											overflow-hidden
 										`}
 									>
@@ -463,10 +461,10 @@ export const DateElement = forwardRef((props, ref) => {
 				<HStack className="h-[10px]">
 					<IconButton
 						{...testProps('hidePickerBtn')}
+						icon={Calendar}
 						_icon={{
-							as: Calendar,
-							color: styles.FORM_DATE_ICON_COLOR,
 							size: 'sm',
+							className: styles.FORM_DATE_TRIGGER_ICON_CLASSNAME,
 						}}
 						isDisabled={isDisabled}
 						onPress={() => hidePicker()}
@@ -477,8 +475,7 @@ export const DateElement = forwardRef((props, ref) => {
 							border-grey-400
 							rounded-l-md
 							rounded-r-none
-							${styles.FORM_DATE_ICON_BG}
-							${styles.FORM_DATE_ICON_BG_HOVER}
+							${styles.FORM_DATE_TRIGGER_CLASSNAME}
 						`}
 					/>
 					{disableDirectEntry ?
@@ -497,9 +494,7 @@ export const DateElement = forwardRef((props, ref) => {
 								rounded-l-none
 								rounded-r-md
 								${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
-								${styles.FORM_DATE_INPUT_BG}
-								${styles.FORM_DATE_INPUT_BG_FOCUS}
-								${styles.FORM_DATE_READOUT_FONTSIZE}
+								${styles.FORM_DATE_INPUT_CLASSNAME}
 							`}
 						>{textInputValue}</TextNative> :
 						<Input
@@ -521,9 +516,7 @@ export const DateElement = forwardRef((props, ref) => {
 								rounded-tr-none
 								rounded-br-none
 								${_.isEmpty(textInputValue) ? 'text-grey-400' : 'text-black'}
-								${styles.FORM_DATE_READOUT_FONTSIZE}
-								${styles.FORM_DATE_INPUT_BG}
-								${styles.FORM_DATE_INPUT_BG_FOCUS}
+								${styles.FORM_DATE_INPUT_CLASSNAME}
 							`}
 							{..._input}
 						/>}
@@ -532,7 +525,13 @@ export const DateElement = forwardRef((props, ref) => {
 								isOpen={true}
 								safeAreaTop={true}
 								onClose={() => setIsPickerShown(false)}
-								className="mt-auto mb-auto w-full h-[400px] p-[5px]"
+								className={`
+									Date-Modal
+									my-auto
+									w-full
+									h-[400px]
+									p-3
+								`}
 							>
 								<ModalBackdrop />
 								<ModalContent>
@@ -548,7 +547,7 @@ export const DateElement = forwardRef((props, ref) => {
 											timeFormat={mode === TIME || mode === DATETIME ? 'HH:mm:ss' : false}
 											onChange={onPickerChange}
 										/> */}
-										<Box className="bg-white">
+										<Box className="Date-Box bg-white">
 											<Datetime
 												{...testProps('picker')}
 												initialDate={moment(value).toDate()}
@@ -570,7 +569,7 @@ export const DateElement = forwardRef((props, ref) => {
 		flex-1
 		justify-center
 		items-center
-		${styles.FORM_COMBO_HEIGHT}
+		${styles.FORM_DATE_CLASSNAME}
 	`;
 	if (props.className) {
 		className += props.className;

package/src/Components/Form/Field/FormikForm.js

@@ -642,12 +642,12 @@ function FormikForm(props) {
 							title += ' for ' + record.displayValue;
 						}
 						title = <Text
-									className={` ${styles.FORM_ANCILLARY_TITLE_FONTSIZE} font-bold `}
+									className={` ${styles.FORM_ANCILLARY_TITLE_CLASSNAME} font-bold `}
 								>{title}</Text>;
 					}
 					if (description) {
 						description = <Text
-											className={` ${styles.FORM_ANCILLARY_DESCRIPTION_FONTSIZE} italic-italic `}
+											className={` ${styles.FORM_ANCILLARY_DESCRIPTION_CLASSNAME} italic-italic `}
 										>{description}</Text>;
 					}
 					components.push(<VStack key={'ancillary-' + ix} className="mx-1 my-3">{title}{description}{element}</VStack>);

package/src/Components/Form/Field/Input.js

@@ -113,9 +113,7 @@ const InputElement = forwardRef((props, ref) => {
 	}
 	let inputClassName = `
 			Input
-			${styles.FORM_INPUT_BG}
-			${styles.FORM_INPUT_BG_FOCUS}
-			${styles.FORM_INPUT_BG_HOVER}
+			${styles.FORM_INPUT_CLASSNAME}
 		`,
 		inputFieldClassName = `
 			InputField
@@ -124,10 +122,8 @@ const InputElement = forwardRef((props, ref) => {
 			w-full
 			p-2
 			${textAlignIsCenter ? 'text-center' : 'text-left'}
-			${styles.FORM_INPUT_FONTSIZE}
-			${styles.FORM_INPUT_BG}
-			${styles.FORM_INPUT_BG_FOCUS}
-			${styles.FORM_INPUT_BG_HOVER}
+			${styles.FORM_INPUT_CLASSNAME}
+			${styles.FORM_INPUT_FIELD_CLASSNAME}
 		`;
 	if (className) {
 		inputClassName += className;

package/src/Components/Form/Field/Number.js

@@ -170,10 +170,6 @@ function NumberElement(props) {
 						h-full
 						text-center
 						rounded-none
-						${styles.FORM_INPUT_FONTSIZE}
-						${styles.FORM_INPUT_BG}
-						${styles.FORM_INPUT_BG_HOVER}
-						${styles.FORM_INPUT_BG_FOCUS}
 					`}
 					style={{
 						flex: 3

package/src/Components/Form/Field/Select/Select.js

@@ -72,10 +72,7 @@ const SelectElement = forwardRef((props, ref) => {
 		w-full
 		text-left
 		rounded-lg
-		${styles.FORM_SELECT_FONTSIZE}
-		${styles.FORM_SELECT_BG}
-		${styles.FORM_SELECT_BG_FOCUS}
-		${styles.FORM_SELECT_BG_HOVER}
+		${styles.FORM_SELECT_CLASSNAME}
 	`;
 	if (props.className) {
 		className += props.className;

package/src/Components/Form/Field/Tag/Tag.js

@@ -274,15 +274,15 @@ function TagComponent(props) {
 		w-full
 		min-h-[40px]
 		max-h-[200px]
+		mb-1
+		p-1
 		flex-wrap
 		overflow-auto
 		border
 		border-grey-300
 		rounded-md
 		bg-grey-100
-		${styles.FORM_TAG_MIN_HEIGHT}
-		${styles.FORM_TAG_MB}
-		${styles.FORM_TAG_PADDING}
+		${styles.FORM_TAG_CLASSNAME}
 	`,
 	comboClassName = '';
 	if (_combo.className) {
@@ -291,7 +291,7 @@ function TagComponent(props) {
 	if (minimizeForRow) {
 		if (isViewOnly) {
 			// combo is not shown, so allow valueBoxes to take up more space
-			valueBoxesClassName += ' h-auto min-h-[50px] max-h-[50px] overflow-auto flex-1';
+			valueBoxesClassName += ' min-h-[25px] h-full overflow-auto flex-1';
 		} else {
 			// shrink both down
 			valueBoxesClassName += ' h-auto min-h-[25px] max-h-[25px] overflow-auto flex-1';

package/src/Components/Form/Field/Tag/ValueBox.js

@@ -19,6 +19,7 @@ export default function ValueBox(props) {
 	return <HStackNative
 				{...testProps('valueBox-' + text)}
 				className={`
+					ValueBox-HStackNative
 					max-w-full
 					items-center
 					mr-1
@@ -37,12 +38,17 @@ export default function ValueBox(props) {
 						className: 'text-grey-600',
 					}}
 					onPress={onView}
-					className="h-full"
+					className={`
+						ValueBox-eyeBtn
+						h-full
+						${styles.FORM_TAG_BTN_CLASSNAME}
+					`}
 				/>
 				<Text
 					className={`
+						ValueBox-Text
 						text-grey-600
-						${styles.FORM_TAG_VALUEBOX_FONTSIZE}
+						${styles.FORM_TAG_VALUEBOX_CLASSNAME}
 						${onDelete ? 'mr-0' : 'mr-1'}
 					`}
 				>{text}</Text>
@@ -55,7 +61,11 @@ export default function ValueBox(props) {
 							className: 'text-grey-600',
 						}}
 						onPress={onDelete}
-						className="h-full"
+						className={`
+							ValueBox-xBtn
+							h-full
+							${styles.FORM_TAG_BTN_CLASSNAME}
+						`}
 					/>}
 			</HStackNative>;
 }

package/src/Components/Form/Field/Text.js

@@ -16,7 +16,7 @@ const
 			min-h-[40px]
 			px-3
 			py-2
-			${styles.FORM_TEXT_FONTSIZE}
+			${styles.FORM_TEXT_CLASSNAME}
 		`;
 		if (props.className) {
 			className += ' ' + props.className;

package/src/Components/Form/Field/TextArea.js

@@ -83,9 +83,7 @@ const
 			inputClassName = `
 				TextAreaInput
 				flex-1
-				${styles.FORM_TEXTAREA_BG}
-				${styles.FORM_TEXTAREA_FONTSIZE}
-				${styles.FORM_TEXTAREA_HEIGHT}
+				${styles.FORM_TEXTAREA_CLASSNAME}
 			`;
 		if (props.className) {
 			inputClassName += ' ' + props.className;
@@ -99,9 +97,6 @@ const
 					<TextareaInput
 						ref={props.outerRef}
 						onChangeText={onChangeTextLocal}
-						_focus={{
-							bg: styles.FORM_TEXTAREA_BG,
-						}}
 						value={localValue}
 						className={inputClassName}
 						placeholder={placeholder}

package/src/Components/Form/Field/Toggle.js

@@ -101,7 +101,7 @@ const
 							className={`
 								ml-1
 								mr-2
-								${styles.FORM_TOGGLE_FONTSIZE}
+								${styles.FORM_TOGGLE_READOUT_CLASSNAME}
 							`}
 						>{_.isNil(value) ? 'N/A' : (!!value ? onText : offText)}</Text>
 					</Pressable>

package/src/Components/Form/FieldSet.js

@@ -109,7 +109,7 @@ export default function FieldSet(props) {
 							numberOfLines={1}
 							ellipsizeMode="head"
 							className={`
-								FieldSet-title-Text
+								FieldSet-title-TextNative
 								flex-1
 								py-1
 								px-3
@@ -119,25 +119,15 @@ export default function FieldSet(props) {
 						>{title}</TextNative>
 
 						{showToggleAllCheckbox && 
-							<HStack className="self-right">
-								<TextNative
-									numberOfLines={1}
-									className={`
-										flex-1
-										py-1
-										px-3
-										${styles.FORM_FIELDSET_FONTSIZE}
-									`}
-								>Toggle All?</TextNative>
-								<CheckboxButton
-									{...testProps('toggleAllBtn')}
-									isChecked={getIsAllChecked()}
-									onPress={onToggleAllChecked}
-									_icon={{
-										size: 'lg',
-									}}
-								/>
-							</HStack>}
+							<CheckboxButton
+								{...testProps('toggleAllBtn')}
+								isChecked={getIsAllChecked()}
+								onPress={onToggleAllChecked}
+								className="FieldSet-title-showToggleAllCheckbox self-right"
+								_icon={{
+									size: 'lg',
+								}}
+							/>}
 						
 						{isCollapsible && 
 							<IconButton