react-native-ui-lib 7.39.0 → 7.39.1-snapshot.6736

package/src/components/picker/helpers/usePickerSelection.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { PickerProps, PickerValue, PickerSingleValue, PickerMultiValue } from '../types';
-interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode'> {
+interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode' | 'items'> {
     pickerExpandableRef: RefObject<any>;
     setSearchValue: (searchValue: string) => void;
 }
@@ -9,5 +9,8 @@ declare const usePickerSelection: (props: UsePickerSelectionProps) => {
     onDoneSelecting: (item: PickerValue) => void;
     toggleItemSelection: (item: PickerSingleValue) => void;
     cancelSelect: () => void;
+    areAllItemsSelected: boolean;
+    selectedCount: number;
+    toggleAllItemsSelection: (selectAll: boolean) => void;
 };
 export default usePickerSelection;

package/src/components/picker/helpers/usePickerSelection.js

@@ -1,6 +1,6 @@
 import _xor from "lodash/xor";
 import _xorBy from "lodash/xorBy";
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect, useMemo } from 'react';
 import { PickerModes } from "../types";
 const usePickerSelection = props => {
   const {
@@ -11,7 +11,8 @@ const usePickerSelection = props => {
     pickerExpandableRef,
     getItemValue,
     setSearchValue,
-    mode
+    mode,
+    items
   } = props;
   const [multiDraftValue, setMultiDraftValue] = useState(value);
   const [multiFinalValue, setMultiFinalValue] = useState(value);
@@ -43,11 +44,26 @@ const usePickerSelection = props => {
     pickerExpandableRef.current?.closeExpandable?.();
     topBarProps?.onCancel?.();
   }, [multiFinalValue, topBarProps]);
+  const availableItems = useMemo(() => {
+    return items?.filter(item => !item.disabled).map(item => item.value) || [];
+  }, [items]);
+  const areAllItemsSelected = useMemo(() => {
+    return multiDraftValue?.length === availableItems.length;
+  }, [multiDraftValue, availableItems]);
+  const selectedCount = useMemo(() => {
+    return multiDraftValue?.length;
+  }, [multiDraftValue]);
+  const toggleAllItemsSelection = useCallback(selectAll => {
+    setMultiDraftValue(selectAll ? availableItems : []);
+  }, [availableItems]);
   return {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    areAllItemsSelected,
+    selectedCount,
+    toggleAllItemsSelection
   };
 };
 export default usePickerSelection;

package/src/components/picker/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PickerItem from './PickerItem';
 import { extractPickerItems } from './PickerPresenter';
-import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from './types';
+import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps } from './types';
 type PickerStatics = {
     Item: typeof PickerItem;
     modes: typeof PickerModes;
@@ -9,7 +9,7 @@ type PickerStatics = {
     extractPickerItems: typeof extractPickerItems;
 };
 declare const Picker: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<unknown>>;
-export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods };
+export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps };
 export { Picker };
 declare const _default: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<unknown>> & PickerStatics;
 export default _default;

package/src/components/picker/index.js

@@ -18,7 +18,7 @@ import useFieldType from "./helpers/useFieldType";
 import useNewPickerProps from "./helpers/useNewPickerProps";
 // import usePickerMigrationWarnings from './helpers/usePickerMigrationWarnings';
 import { extractPickerItems } from "./PickerPresenter";
-import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from "./types";
+import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps } from "./types";
 const DEFAULT_DIALOG_PROPS = {
   bottom: true,
   width: '100%'
@@ -58,6 +58,7 @@ const Picker = React.forwardRef((props, ref) => {
     showLoader,
     customLoaderElement,
     renderCustomTopElement,
+    selectionStatus,
     ...others
   } = themeProps;
   const {
@@ -101,7 +102,10 @@ const Picker = React.forwardRef((props, ref) => {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    areAllItemsSelected,
+    selectedCount,
+    toggleAllItemsSelection
   } = usePickerSelection({
     migrate,
     value,
@@ -110,7 +114,8 @@ const Picker = React.forwardRef((props, ref) => {
     getItemValue,
     topBarProps,
     setSearchValue,
-    mode
+    mode,
+    items
   });
   const {
     label,
@@ -154,9 +159,12 @@ const Picker = React.forwardRef((props, ref) => {
       getItemLabel,
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
-      selectionLimit
+      selectionLimit,
+      areAllItemsSelected,
+      selectedCount,
+      toggleAllItemsSelection
     };
-  }, [migrate, mode, value, multiDraftValue, renderItem, getItemValue, getItemLabel, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting]);
+  }, [migrate, mode, value, multiDraftValue, renderItem, getItemValue, getItemLabel, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting, areAllItemsSelected, selectedCount, toggleAllItemsSelection]);
   const renderPickerItem = useCallback((item, index) => {
     return <PickerItem key={`${index}-${item.value}`} {...item} />;
   }, []);
@@ -201,7 +209,7 @@ const Picker = React.forwardRef((props, ref) => {
       ...topBarProps,
       onCancel: cancelSelect,
       onDone: mode === PickerModes.MULTI ? () => onDoneSelecting(multiDraftValue) : undefined
-    }} showSearch={showSearch} searchStyle={searchStyle} searchPlaceholder={searchPlaceholder} onSearchChange={_onSearchChange} renderCustomSearch={renderCustomSearch} renderHeader={renderHeader} listProps={listProps} useSafeArea={useSafeArea} showLoader={showLoader} customLoaderElement={customLoaderElement} renderCustomTopElement={renderCustomTopElement}>
+    }} showSearch={showSearch} searchStyle={searchStyle} searchPlaceholder={searchPlaceholder} onSearchChange={_onSearchChange} renderCustomSearch={renderCustomSearch} renderHeader={renderHeader} listProps={listProps} useSafeArea={useSafeArea} showLoader={showLoader} customLoaderElement={customLoaderElement} renderCustomTopElement={renderCustomTopElement} selectionStatus={selectionStatus}>
         {filteredItems}
       </PickerItemsList>;
   }, [testID, mode, useDialog, selectedItemPosition, topBarProps, cancelSelect, onDoneSelecting, multiDraftValue, showSearch, searchStyle, searchPlaceholder, _onSearchChange, renderCustomSearch, renderHeader, listProps, filteredItems, useSafeArea, useWheelPicker, items, showLoader]);
@@ -221,6 +229,6 @@ Picker.modes = PickerModes;
 Picker.fieldTypes = PickerFieldTypes;
 // @ts-expect-error
 Picker.extractPickerItems = extractPickerItems;
-export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods };
+export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps };
 export { Picker }; // For tests
 export default Picker;

package/src/components/picker/types.d.ts

@@ -4,6 +4,8 @@ import { ExpandableOverlayProps, ExpandableOverlayMethods } from '../../incubato
 import { ModalTopBarProps } from '../modal/TopBar';
 import { TextFieldMethods, TextFieldProps } from '../textField';
 import { TouchableOpacityProps } from '../touchableOpacity';
+import { ButtonProps } from '../button';
+import { CheckboxProps } from '../checkbox';
 export declare enum PickerModes {
     SINGLE = "SINGLE",
     MULTI = "MULTI"
@@ -147,6 +149,44 @@ type PickerExpandableOverlayProps = {
      */
     enableModalBlur?: boolean;
 };
+interface PickerSelectionStatusLabelData {
+    selectedCount: number;
+    areAllItemsSelected: boolean;
+}
+export type ButtonSelectionStatus = {
+    /**
+     * Select all element type
+     */
+    selectAllType?: 'button';
+    /**
+     * Button props
+     */
+    buttonProps?: ButtonProps;
+};
+export type CheckboxSelectionStatus = {
+    /**
+     * Select all element type
+     */
+    selectAllType?: 'checkbox';
+    /**
+     * Checkbox props
+     */
+    checkboxProps?: CheckboxProps;
+};
+export type PickerSelectionStatusProps = {
+    /**
+     * A function that generates a label based on the selected items' count and status
+     */
+    getLabel?: (data: PickerSelectionStatusLabelData) => string;
+    /**
+     * Custom container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Control weather to show the label or not
+     */
+    showLabel?: boolean;
+} & (ButtonSelectionStatus | CheckboxSelectionStatus);
 export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & PickerPropsDeprecation & PickerExpandableOverlayProps & PickerListProps & {
     /**
      * Use dialog instead of modal picker
@@ -193,6 +233,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & Picke
      * Render custom top element
      */
     renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
+    /**
+     * Selection status bar props
+     */
+    selectionStatus?: PickerSelectionStatusProps;
     /**
      * Add onPress callback for when pressing the picker
      */
@@ -286,8 +330,11 @@ export interface PickerContextProps extends Pick<PickerProps, 'migrate' | 'value
     isMultiMode: boolean;
     onSelectedLayout: (event: any) => any;
     selectionLimit: PickerProps['selectionLimit'];
+    areAllItemsSelected: boolean;
+    selectedCount: number;
+    toggleAllItemsSelection?: (selectAll: boolean) => void;
 }
-export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
+export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'selectionStatus' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
     items?: {
         value: any;
         label: any;

package/src/components/scrollBar/index.js

@@ -8,8 +8,8 @@ import { Colors } from "../../style";
 import { Constants, asBaseComponent, forwardRef } from "../../commons/new";
 import View from "../view";
 import Image from "../image";
+import Assets from "../../assets";
 const GRADIENT_WIDTH = 76;
-const defaultImage = () => require("./assets/gradientOverlay.png");
 
 /**
  * @description: Scrollable container with animated gradient overlay for horizontal scroll
@@ -17,7 +17,7 @@ const defaultImage = () => require("./assets/gradientOverlay.png");
  */
 
 class ScrollBar extends Component {
-  static displayName = 'ScrollBar';
+  static displayName = 'IGNORE';
   static defaultProps = {
     gradientWidth: GRADIENT_WIDTH,
     gradientMargins: 0,
@@ -175,7 +175,7 @@ class ScrollBar extends Component {
       right: !left ? gradientMargins : undefined,
       left: left ? gradientMargins : undefined
     }}>
-        <Image source={gradientImage || defaultImage()} style={{
+        <Image source={gradientImage || Assets.internal.images.gradientOverlay} style={{
         width: gradientWidth,
         height: heightToUse,
         tintColor: gradientColor,

package/src/components/sortableList/SortableList.api.json

@@ -45,14 +45,14 @@
   "snippet": [
     "function Example(props) {",
     "  const data = Array.from({length: 10}, (_, index) => {",
-    "    let text = \\`\\${index}\\`;",
+    "    let text = `${index}`;",
     "    if (index === 3) {",
     "      text = 'Locked item';",
     "    }",
     "  ",
     "    return {",
     "      text,",
-    "      id: \\`\\${index}\\`,",
+    "      id: `${index}`,",
     "      locked: index === 3",
     "    };",
     "  });",
@@ -78,11 +78,11 @@
     "  }, []);",
     "",
     "  const keyExtractor = useCallback((item: Item) => {",
-    "    return \\`\\${item.id}\\`;",
+    "    return `${item.id}`;",
     "  }, []);",
     "",
     "  return (",
-    "    <div>",
+    "    <View>",
     "      <SortableList",
     "        data={data$1}",
     "        flexMigration",
@@ -90,8 +90,8 @@
     "        renderItem={renderItem$3}",
     "        keyExtractor={keyExtractor$4}",
     "      />",
-    "    </div>",
-    "  );",
-    "}"
+    "    </View>",
+    "  )",
+    "};"
   ]
 }

package/src/components/stepper/index.js

@@ -6,17 +6,12 @@ import { asBaseComponent } from "../../commons/new";
 import View from "../view";
 import Text from "../text";
 import Button from "../button";
+import Assets from "../../assets";
 var ActionType = /*#__PURE__*/function (ActionType) {
   ActionType["MINUS"] = "minus";
   ActionType["PLUS"] = "plus";
   return ActionType;
 }(ActionType || {});
-const minusOutline = require("./assets/minusOutline.png");
-const minusOutlineSmall = require("./assets/minusOutlineSmall.png");
-const plusOutline = require("./assets/plusOutline.png");
-const plusOutlineSmall = require("./assets/plusOutlineSmall.png");
-const plusSmall = require("./assets/plusSmall.png");
-const minusSmall = require("./assets/minusSmall.png");
 const DEFAULT_STEP = 1;
 /**
  * @description: A stepper component
@@ -150,8 +145,8 @@ class Stepper extends PureComponent {
     } = this.props;
     const allowStepChange = this.allowStepChange(actionType);
     const isFloatingStepper = type === 'floating';
-    const minusButton = isFloatingStepper ? minusSmall : small ? minusOutlineSmall : minusOutline;
-    const plusButton = isFloatingStepper ? plusSmall : small ? plusOutlineSmall : plusOutline;
+    const minusButton = isFloatingStepper ? Assets.internal.icons.minusSmall : small ? Assets.internal.icons.minusOutlineSmall : Assets.internal.icons.minusOutline;
+    const plusButton = isFloatingStepper ? Assets.internal.icons.plusSmall : small ? Assets.internal.icons.plusOutlineSmall : Assets.internal.icons.plusOutline;
     return <Button link color={isFloatingStepper ? Colors.$iconDefault : undefined} iconSource={actionType === ActionType.MINUS ? minusButton : plusButton} disabled={disabled || !allowStepChange} onPress={() => this.handleStepChange(actionType)} testID={actionType === ActionType.MINUS ? `${testID}.minusStep` : `${testID}.plusStep`} />;
   }
   render() {

package/src/components/tabController/apis/pageCarousel.api.json

@@ -7,11 +7,14 @@
   "extendsLink": ["https://reactnative.dev/docs/scrollview"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx",
   "images": [],
+  "props": [],
   "snippet": [
-    "<TabController.PageCarousel>",
-    "  {_.map(items, (item, key) => {",
-    "   return ($1);",
-    "  })}",
-    "</TabController.PageCarousel>"
+    "<TabController>",
+    "  <TabController.PageCarousel>",
+    "    {_.map(items, (item, key) => {",
+    "     return <TabController.TabPage index={key}/>;",
+    "    })}",
+    "  </TabController.PageCarousel>",
+    "</TabController>"
   ]
 }

package/src/components/textField/ClearButton.js

@@ -54,7 +54,7 @@ const ClearButton = ({
     onClear?.();
   };
   return <View reanimated style={style} testID={`${testID}.container`}>
-      <Button link iconSource={Assets.icons.xFlat} iconStyle={styles.clearIcon} onPress={clear} hitSlop={hitSlop} accessible={hasValue} accessibilityLabel={'clear'} testID={testID} />
+      <Button link iconSource={Assets.internal.icons.xFlat} iconStyle={styles.clearIcon} onPress={clear} hitSlop={hitSlop} accessible={hasValue} accessibilityLabel={'clear'} testID={testID} />
     </View>;
 };
 const styles = StyleSheet.create({

package/src/components/textField/textField.api.json

@@ -2,9 +2,17 @@
   "name": "TextField",
   "category": "form",
   "description": "An enhanced customizable TextField with validation support",
-  "extends": ["TextInput"],
-  "extendsLink": ["https://reactnative.dev/docs/textinput"],
-  "modifiers": ["margin", "color", "typography"],
+  "extends": [
+    "TextInput"
+  ],
+  "extendsLink": [
+    "https://reactnative.dev/docs/textinput"
+  ],
+  "modifiers": [
+    "margin",
+    "color",
+    "typography"
+  ],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextFieldScreen.tsx",
   "images": [
     "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Incubator.TextField/FloatingPlaceholder.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Incubator.TextField/Validation.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Incubator.TextField/ColorByState.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Incubator.TextField/CharCounter.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Incubator.TextField/Hint.gif?raw=true"
@@ -276,7 +284,7 @@
             "type": "section",
             "layout": "horizontal",
             "title": "Structure",
-            "description": "1. **Label**\nDescribes the information that the user needs to enter. The label should be short and clear, preferably a noun.  \n2. **Placeholder** (optional)  \nPlaceholders can serve as an assistive text that can provide additional aid or context to the user. Don’t use it to display critical information - as it disappears when the users starts typing.  \n3. **Helper text** (optional)  \nUse this to provide a hint or a disclaimer about the content of the field. For example, “Passwords must contain at least 8 characters”  \n4. **Clear button**  \nLets the user to easily clear the input value. Appears only when value was typed.  \n5. **Character count**  \nShould be used if there is a character limit. Displays the amount of typed characters out of total allowed. If the limit is reached, the counter will become red and further typing is disabled.  \n6. **Validation message**  \nDemonstrates that a required input is missing something or the entry was invalid.",
+            "description": "Markdown:\n\n1. **Label**\nDescribes the information that the user needs to enter. The label should be short and clear, preferably a noun.  \n2. **Placeholder** (optional)  \nPlaceholders can serve as an assistive text that can provide additional aid or context to the user. Don’t use it to display critical information - as it disappears when the users starts typing.  \n3. **Helper text** (optional)  \nUse this to provide a hint or a disclaimer about the content of the field. For example, “Passwords must contain at least 8 characters”  \n4. **Clear button**  \nLets the user to easily clear the input value. Appears only when value was typed.  \n5. **Character count**  \nShould be used if there is a character limit. Displays the amount of typed characters out of total allowed. If the limit is reached, the counter will become red and further typing is disabled.  \n6. **Validation message**  \nDemonstrates that a required input is missing something or the entry was invalid.",
             "content": [
               {
                 "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/textField/textField_overview_section_03.png"
@@ -285,7 +293,11 @@
           },
           {
             "type": "table",
-            "columns": ["Property", "Component", "New Column"],
+            "columns": [
+              "Property",
+              "Component",
+              "New Column"
+            ],
             "items": [
               {
                 "title": "Inactive (default)",
@@ -374,7 +386,10 @@
           },
           {
             "type": "table",
-            "columns": ["Property", "Component"],
+            "columns": [
+              "Property",
+              "Component"
+            ],
             "items": [
               {
                 "title": "Outline (Default)",
@@ -400,7 +415,10 @@
           },
           {
             "type": "table",
-            "columns": ["Property", "Component"],
+            "columns": [
+              "Property",
+              "Component"
+            ],
             "items": [
               {
                 "title": "Leading Accessory (Prefix)",
@@ -458,7 +476,7 @@
               }
             ],
             "title": "Spec",
-            "description": "**Label**\nbodySmall, $textNeutralHeavy  \n**Placeholder**\nbody, $textNeutralLight  \n**Value**  \nbody, $textDefault  \n**Helper Text**  \nsubtext, $textNeutralHeavy  \n**Character Count**  \nbodySmall, $textNeutralHeavy  \n**Validation message**  \nMessage - bodySmall, $textDangerLight\nIcon - exclamationFillSmall, $iconDangerLight  \n**Prefix & Suffix**  \nbody, $textNeutral  \n**Clear Button**  \nxFlat, $textNeutralLight  \n**Warning Message**  \nMessage - bodySmall, $textDefault\nIcon - exclamationFillSmall, $iconDefault  \n**Validation Success**  \nIcon - checkmarkFlatSmall, $iconSuccess  \n**Outline - Default/unfocused**  \n1p, $outlineNeutral  \n**Outline - Focused, typing**  \n1p, $outlinePrimary  \n**Outline - Validation**  \n1p, $outlineDanger  \n**Outline - Disabled**  \n1p, $outlineDisabled  \n**Outline - Read only**  \nfill background- $backgroundNeutralLight"
+            "description": "Markdown:\n\n**Label**\nbodySmall, $textNeutralHeavy  \n**Placeholder**\nbody, $textNeutralLight  \n**Value**  \nbody, $textDefault  \n**Helper Text**  \nsubtext, $textNeutralHeavy  \n**Character Count**  \nbodySmall, $textNeutralHeavy  \n**Validation message**  \nMessage - bodySmall, $textDangerLight\nIcon - exclamationFillSmall, $iconDangerLight  \n**Prefix & Suffix**  \nbody, $textNeutral  \n**Clear Button**  \nxFlat, $textNeutralLight  \n**Warning Message**  \nMessage - bodySmall, $textDefault\nIcon - exclamationFillSmall, $iconDefault  \n**Validation Success**  \nIcon - checkmarkFlatSmall, $iconSuccess  \n**Outline - Default/unfocused**  \n1p, $outlineNeutral  \n**Outline - Focused, typing**  \n1p, $outlinePrimary  \n**Outline - Validation**  \n1p, $outlineDanger  \n**Outline - Disabled**  \n1p, $outlineDisabled  \n**Outline - Read only**  \nfill background- $backgroundNeutralLight"
           }
         ]
       },