@agilant/toga-blox 1.0.136 → 1.0.137

package/dist/components/Dropdown/Dropdown.js

@@ -14,13 +14,13 @@ const Dropdown = ({ options, selectedOption, onOptionSelect, optionClasses = "fl
             return;
         setShowMenu(!showMenu);
     };
-    return (_jsxs("div", { className: `flex items-center justify-between relative min-w-40 ${dropdownClasses}`, children: [_jsx(BaseToolTip, { message: !isEnabled ? tooltipText : "", toolTipPlacement: "top", textColor: "text-white", textBackgroundColor: `${!isEnabled ? "bg-gray-700" : ""}`, children: _jsxs("div", { onClick: toggleMenu, className: "flex cursor-pointer items-center group h-full", children: [_jsx("div", { className: `font-bold ${optionClasses} bg-white min-w-28`, children: selectedOption.label }), _jsx("div", { className: `transform transition-transform duration-200 mx-1 px-1 rounded-full relative ${!isEnabled ? "text-gray-300" : icon.iconClasses} ${showMenu ? "rotate-180" : "rotate-0"}   `, "data-testid": "dropdown-icon", children: getFontAwesomeIcon(icon.name) })] }) }), showMenu && (_jsx(AnimatePresence, { children: showMenu && (_jsx(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, className: `absolute top-0 z-10 right-0 left-0  ${menuClasses}`, children: _jsx("ul", { children: options.map((option) => (_jsxs("li", { className: `justify-end  items-center flex px-4 py-2 cursor-pointer border-b ${option.value ===
+    return (_jsxs("div", { className: `flex items-center justify-between relative min-w-40 ${dropdownClasses}`, children: [_jsx(BaseToolTip, { message: !isEnabled ? tooltipText : "", toolTipPlacement: "top", textColor: "text-white", textBackgroundColor: `${!isEnabled ? "bg-gray-700" : ""}`, children: _jsxs("div", { onClick: toggleMenu, className: "flex cursor-pointer items-center group h-full", children: [_jsx("div", { className: `font-bold ${optionClasses} bg-white min-w-28`, children: selectedOption.label }), _jsx("div", { className: `transform transition-transform duration-200 mx-1 px-1 rounded-full relative ${!isEnabled ? "text-gray-300" : icon.iconClasses} ${showMenu ? "rotate-180" : "rotate-0"}   `, "data-testid": "dropdown-icon", children: getFontAwesomeIcon(icon.name) })] }) }), showMenu && (_jsx(AnimatePresence, { children: showMenu && (_jsx(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, className: `absolute top-0 z-10 right-0 left-0 ${menuClasses}`, children: _jsx("ul", { children: options.map((option) => (_jsxs("li", { className: `justify-end items-center flex px-4 py-2 cursor-pointer border-b ${option.value ===
                                 selectedOption.value
                                 ? `${selectedOptionBgColor} font-semibold`
                                 : `${optionHoverBgColor} text-black`}`, onClick: () => {
                                 onOptionSelect(option);
                                 setShowMenu(false);
                             }, children: [selectedOption.value ===
-                                    option.value && (_jsx("span", { className: `flex-1 ${icon.iconClasses}`, children: getFontAwesomeIcon("check", "solid") })), _jsx("span", { className: "pl-2  ", children: option.label })] }, option.value))) }) })) }))] }));
+                                    option.value && (_jsx("span", { className: `flex-1 ${icon.iconClasses}`, children: getFontAwesomeIcon("check", "solid") })), _jsx("span", { className: "pl-2", children: option.name || option.label })] }, option.value))) }) })) }))] }));
 };
 export default Dropdown;

package/dist/components/Input/Input.js

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  * A properly formed forwardRef component: exactly two parameters:
  * (props, ref). We pass `ref` to the <input ref={ref} ...>.
  */
-const InputField = forwardRef(function InputField({ label, placeholder, required, checked, id, name, type = "text", firstIcon, secondIcon, iconPosition = "before", iconColor = "primary", isValid = true, isReadOnly = false, onChange, value, readOnlyInfo = "", toolTipText = "", hasToolTip = false, additionalClasses = "", labelClasses = "", hasAutoFocus, onIconClick, onKeyDown, disabled, register, focusRingColor = "focus:ring-transparent", firstIconClasses, firstIconTop = "top-[8px]", placeHolderColor = "placeholder:text-gray-500", }, ref) {
+const InputField = forwardRef(function InputField({ label, placeholder, required, checked, id, name, type = "text", firstIcon, secondIcon, iconPosition = "before", iconColor = "primary", isValid = true, isReadOnly = false, onChange, value, readOnlyInfo = "", toolTipText = "", hasToolTip = false, additionalClasses = "", labelClasses = "", hasAutoFocus, onIconClick, onKeyDown, disabled, register, focusRingColor = "focus:ring-transparent", firstIconClasses, firstIconTop = "top-[8px]", placeHolderColor = "placeholder:text-red-500", }, ref) {
     const [isFocused, setIsFocused] = useState(false);
     const hasValue = value != null && !!value.toString().trim();
     const isNumberInput = type === "number";

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,3 +1,3 @@
 import { SearchInputProps } from "./SearchInput.types";
-declare const SearchInput: <T extends object>({ textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean, toggleColor, toggleTextColor, fontFamily, removePattern, isSearchable, hasOperator, tooltipText, hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor, placeHolderColor, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchInput: <T extends object>({ textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean, toggleColor, toggleTextColor, fontFamily, removePattern, isSearchable, hasOperator, tooltipText, hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor, placeHolderColor, buttonPlaceHolderTextColor, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchInput;

package/dist/components/SearchInput/SearchInput.js

@@ -8,7 +8,7 @@ const SearchInput = ({ textHighlight = "text-sky-500", inputType = "text", dropd
     name: "chevronDown",
     weight: "bold",
     iconClasses: "text-black",
-}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean = false, toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern = /^[^:]*:/, isSearchable = false, hasOperator = false, tooltipText = "Clear filters to edit operator", hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor, placeHolderColor, }) => {
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean = false, toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern = /^[^:]*:/, isSearchable = false, hasOperator = false, tooltipText = "Clear filters to edit operator", hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor, placeHolderColor, buttonPlaceHolderTextColor = "text-red-500", }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     useEffect(() => {
@@ -23,7 +23,7 @@ const SearchInput = ({ textHighlight = "text-sky-500", inputType = "text", dropd
                 case "multiSelect":
                     return (_jsx(SearchDropdownInput, { options: dropdownOptions, placeholder: "Search", additionalClasses: "", onChange: onChange, selectedValue: selectedValue, bgColor: dataPickerThemeColor, clearText: "Clear", clearTextColor: "text-sky-500", buttonText: "Filter", handleFilter: handleFilter, column: column, setSearchCriteria: setSearchCriteria, textHighlight: textHighlight, isBoolean: isBoolean, isSearchable: isSearchable, setSearchItems: setSearchItems, fontFamily: fontFamily, pillColor: pillColor, hoverBgColor: hoverBgColor, clearTextHoverColor: clearTextHoverColor }));
                 case "date":
-                    return (_jsx(SearchDatePickerInput, { textHighlight: textHighlight, dropdownOptions: dropdownOptions, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, selectedDate: selectedDate, onDateSelect: onDateSelect, selectedStartDate: selectedStartDate, onStartDateSelect: onStartDateSelect, selectedEndDate: selectedEndDate, onEndDateSelect: onEndDateSelect, handleFilter: handleFilter, themeBgColor: dataPickerThemeColor, lightThemeBg: dataPickerThemeColorAccent, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, searchItems: searchItems, setSearchItems: setSearchItems, pillColor: pillColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor, fontFamily: fontFamily, removePattern: removePattern, dropdownIconProp: dropdownIconProp, hasOperator: hasOperator, tooltipText: tooltipText, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor, placeHolderColor: placeHolderColor, firstIconTop: firstIconTop }));
+                    return (_jsx(SearchDatePickerInput, { textHighlight: textHighlight, dropdownOptions: dropdownOptions, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, selectedDate: selectedDate, onDateSelect: onDateSelect, selectedStartDate: selectedStartDate, onStartDateSelect: onStartDateSelect, selectedEndDate: selectedEndDate, onEndDateSelect: onEndDateSelect, handleFilter: handleFilter, themeBgColor: dataPickerThemeColor, lightThemeBg: dataPickerThemeColorAccent, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, searchItems: searchItems, setSearchItems: setSearchItems, pillColor: pillColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor, fontFamily: fontFamily, removePattern: removePattern, dropdownIconProp: dropdownIconProp, hasOperator: hasOperator, tooltipText: tooltipText, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor, placeHolderColor: placeHolderColor, firstIconTop: firstIconTop, buttonPlaceHolderTextColor: buttonPlaceHolderTextColor }));
                 default:
                     return null;
             }

package/dist/components/SearchInput/SearchInput.stories.js

@@ -199,7 +199,7 @@ export const DatePickerInput = Template.bind({});
 DatePickerInput.args = {
     inputType: "date",
     handleFilter: () => console.log("Filter applied"),
-    textHighlight: "text-sky-500",
+    textHighlight: "text-green-500",
     dropdownOptions: [
         { label: "Starts with", value: "==" },
         { label: "Ends with", value: "endsWith" },
@@ -210,7 +210,7 @@ DatePickerInput.args = {
     selectedDropdownOption: { label: "Starts with", value: "startsWith" },
     onDropdownOptionSelect: (option) => console.log(`Option selected: ${option}`),
     themeBgColor: "bg-sky-500",
-    lightThemeBg: "bg-sky-100",
+    lightThemeBg: "bg-sky-500",
     toggleTextColor: "text-green-500",
     toggleColor: "bg-green-500",
     column: { id: "dateColumn" },

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

@@ -60,6 +60,7 @@ export type SearchInputProps<T extends object> = {
     activeCircleColor?: string;
     inactiveCircleColor?: string;
     placeHolderColor?: string;
+    buttonPlaceHolderTextColor?: string;
 };
 export interface OptionType {
     uuid: string;

package/dist/components/SearchInput/SearchInputDatePicker.d.ts

@@ -38,6 +38,7 @@ export interface SearchDatePickerInputProps<T extends object> {
     activeCircleColor?: string;
     placeHolderColor?: string;
     firstIconTop?: string;
+    buttonPlaceHolderTextColor?: string;
 }
-declare function SearchDatePickerInput<T extends object>({ themeBgColor, lightThemeBg, pillColor, textHighlight, dropdownOptions, dropdownIconProp, toggleStatus, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText, buttonColor, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey, toggleColor, toggleTextColor, fontFamily, removePattern, hasOperator, tooltipText, inactiveCircleColor, activeCircleColor, placeHolderColor, firstIconTop, }: SearchDatePickerInputProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function SearchDatePickerInput<T extends object>({ themeBgColor, lightThemeBg, pillColor, textHighlight, dropdownOptions, dropdownIconProp, toggleStatus, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText, buttonColor, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey, toggleColor, toggleTextColor, fontFamily, removePattern, hasOperator, tooltipText, inactiveCircleColor, activeCircleColor, placeHolderColor, firstIconTop, buttonPlaceHolderTextColor, }: SearchDatePickerInputProps<T>): import("react/jsx-runtime").JSX.Element;
 export default SearchDatePickerInput;

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -66,7 +66,7 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
     iconClasses: "text-sky-500",
     name: "chevronDown",
     weight: "solid",
-}, toggleStatus = false, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonColor, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern, hasOperator, tooltipText, inactiveCircleColor = "after:bg-gray-300", activeCircleColor = "peer-checked:after:bg-sky-500", placeHolderColor, firstIconTop, }) {
+}, toggleStatus = false, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonColor, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern, hasOperator, tooltipText, inactiveCircleColor = "after:bg-red-300", activeCircleColor = "peer-checked:after:bg-red-500 border-red-500", placeHolderColor, firstIconTop, buttonPlaceHolderTextColor, }) {
     const containerRef = useRef(null);
     // Local operator state.
     const [localOperator, setLocalOperator] = useState(() => {
@@ -329,21 +329,21 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
                                     setIsDatePickerOpen(false);
                                     setActiveInput(null);
                                 }
-                            }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, firstIconTop: firstIconTop, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44 rounded", hasAutoFocus: true })) : (_jsxs("button", { onClick: openStartPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44 rounded", children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localStartDate
+                            }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, firstIconTop: firstIconTop, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44 rounded", hasAutoFocus: true })) : (_jsxs("button", { onClick: openStartPicker, className: `${buttonPlaceHolderTextColor} border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44 rounded text-red-500`, children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localStartDate
                                     ? formatDateAsMonthDayYear(localStartDate)
                                     : "mm/dd/yyyy"] })), _jsx("span", { className: "mx-2", children: "to" }), activeInput === "end" ? (_jsx(Input, { type: "text", value: endDateInputValue, onChange: handleEndDateInputChange, placeholder: "mm/dd/yyy", placeHolderColor: placeHolderColor, onKeyDown: (e) => {
                                 if (e.key === "Enter") {
                                     setIsDatePickerOpen(false);
                                     setActiveInput(null);
                                 }
-                            }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, firstIconTop: firstIconTop, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44 rounded", hasAutoFocus: true })) : (_jsxs("button", { onClick: openEndPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44 rounded", children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localEndDate
+                            }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, firstIconTop: firstIconTop, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44 rounded", hasAutoFocus: true })) : (_jsxs("button", { onClick: openEndPicker, className: `${buttonPlaceHolderTextColor} border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44 rounded`, children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localEndDate
                                     ? formatDateAsMonthDayYear(localEndDate)
                                     : "mm/dd/yyyy"] }))] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: localOperator, onOptionSelect: handleOperatorSelect, optionClasses: "px-4 h-full flex items-center ", menuClasses: "bg-white min-w-32xw rounded-md shadow-md top-12", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto min-w-44 max-w-44 rounded-l", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), activeInput === "single" ? (_jsx(_Fragment, { children: _jsx(Input, { type: "text", value: dateInputValue, onChange: handleSingleDateInputChange, placeholder: "mm/dd/yyy", onKeyDown: (e) => {
                                     if (e.key === "Enter") {
                                         setIsDatePickerOpen(false);
                                         setActiveInput(null);
                                     }
-                                }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left rounded-r", hasAutoFocus: true, firstIconTop: firstIconTop, placeHolderColor: placeHolderColor }) })) : (_jsx(_Fragment, { children: _jsxs("button", { onClick: openSinglePicker, className: "border-2 px-3 py-2 flex-[2] h-10 text-left rounded-r", children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localDate
+                                }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left rounded-r", hasAutoFocus: true, firstIconTop: firstIconTop, placeHolderColor: placeHolderColor }) })) : (_jsx(_Fragment, { children: _jsxs("button", { onClick: openSinglePicker, className: `${buttonPlaceHolderTextColor} border-2 px-3 py-2 flex-[2] h-10 text-left rounded-r`, children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localDate
                                         ? formatDateAsMonthDayYear(localDate)
                                         : "mm/dd/yyyy"] }) }))] })) }), dayPicker, searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 mt-2 rounded-md", children: searchItems.map((item, index) => {
                     const cleanedText = getCleanedText(item, removePattern);

package/dist/components/ToggleButton/ToggleButton.js

@@ -37,7 +37,7 @@ const ToggleButton = ({ initialStatus, onClick, id, textPosition, textSize,
 // Background colors
 activeColorBackground = "bg-red-600", inactiveColorBackground = "bg-red-200", 
 // Border colors (active is red and inactive is blue by default)
-activeColorBorder = "border-red-600", inactiveColorBorder = "border-blue-600", activeLabel, inactiveLabel, additionalClasses, hasDisabledStatus, hasDivider, fontFamily, activeTextColor = "text-red-700", inactiveTextColor = "text-red-400", smallToggle, pillHeight, borderStyle, inactiveCircleColor = "after:bg-red-300", activeCircleColor = "peer-checked:after:bg-red-500", }) => {
+activeColorBorder = "border-red-600", inactiveColorBorder = "border-red-600", activeLabel, inactiveLabel, additionalClasses, hasDisabledStatus, hasDivider, fontFamily, activeTextColor = "text-red-700", inactiveTextColor = "text-red-400", smallToggle, pillHeight, borderStyle, inactiveCircleColor = "after:bg-red-300", activeCircleColor = "peer-checked:after:bg-red-500", }) => {
     const handleToggle = () => {
         const newValue = !initialStatus;
         onClick(newValue);

package/dist/components/ToggleButton/ToggleButton.stories.js

@@ -46,7 +46,7 @@ Default.args = {
     textSize: "text-sm",
     activeColorBackground: "bg-green-500",
     inactiveColorBackground: "bg-gray-300",
-    activeColorBorder: "border-green-500",
+    activeColorBorder: "border-red-500",
     inactiveColorBorder: "border-gray-300",
     activeTextColor: "text-green-500",
     inactiveTextColor: "text-gray-500",
@@ -64,6 +64,7 @@ export const SmallToggle = Template.bind({});
 SmallToggle.args = {
     ...Default.args,
     smallToggle: true,
+    borderStyle: true,
     activeLabel: "ON",
     inactiveLabel: "OFF",
     pillHeight: "h-6",

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.136",
+	"version": "1.0.137",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",