@meatech/payblend_app_ui_component 1.1.38 → 1.1.39

package/.trunk/trunk.yaml

@@ -7,7 +7,7 @@ cli:
 plugins:
   sources:
     - id: trunk
-      ref: v1.7.3
+      ref: v1.7.4
       uri: https://github.com/trunk-io/plugins
 # Many linters and tools depend on runtimes - configure them here. (https://docs.trunk.io/runtimes)
 runtimes:
@@ -17,7 +17,7 @@ runtimes:
 # This is the section where you manage your linters. (https://docs.trunk.io/check/configuration)
 lint:
   enabled:
-    - checkov@3.2.490
+    - checkov@3.2.493
     - git-diff-check
     - osv-scanner@2.2.4
     - oxipng@9.1.5

package/components/Inputs/SelectField.tsx

@@ -157,7 +157,7 @@ export const SelectField = ({
         onPress={handleToggleModal}
         style={[styles.selectInput, selectFieldStyle, selectFieldBorderStyle]}>
         <View style={styles.textWrapper}>
-          <Text color="tertiary" style={selectFieldTextStyle}>
+          <Text color={currentValue ? "tertiary" : "placeholder"} style={selectFieldTextStyle}>
             {currentValue
               ? currentValue.label
                 ? currentValue.label

package/components/Text/styles.tsx

@@ -5,6 +5,7 @@ export const colorsText: Record<string, string> = {
   secondary: colors.neutral[90],
   tertiary: colors.neutral[80],
   disabled: colors.neutral[60],
+  placeholder: colors.neutral[60],
   error: colors.red[90],
   success: colors.green[90],
   warning: colors.orange[90],

package/dist/components/Inputs/SelectField.js

@@ -86,7 +86,7 @@ const SelectField = ({ value, label, labelColor = 'tertiary', listData, size = '
         label && (React.createElement(Text, { color: labelColor, size: size }, label)),
         React.createElement(Pressable, { disabled: disabled, onPress: handleToggleModal, style: [styles.selectInput, selectFieldStyle, selectFieldBorderStyle] },
             React.createElement(View, { style: styles.textWrapper },
-                React.createElement(Text, { color: "tertiary", style: selectFieldTextStyle }, currentValue
+                React.createElement(Text, { color: currentValue ? "tertiary" : "placeholder", style: selectFieldTextStyle }, currentValue
                     ? currentValue.label
                         ? currentValue.label
                         : placeholder

package/dist/components/Inputs/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sources":["../../../../components/Inputs/SelectField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {useEffect, useMemo, useState} from 'react';\nimport {\n  FlatList,\n  ListRenderItemInfo,\n  Pressable,\n  StyleProp,\n  StyleSheet,\n  TextStyle,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport Modal from 'react-native-modal';\nimport Text from '@ui/components/Text';\nimport {Space, colors, metrics, ph} from '@ui/themes';\nimport {Icon} from '@ui/components';\nimport {inputFieldFontSize, inputFieldHeight} from './styles';\n\ntype SelectItemT = {\n  label: string;\n  value: string;\n};\n\nexport const SelectField = ({\n  value,\n  label,\n  labelColor = 'tertiary',\n  listData,\n  size = 'medium',\n  variant = 'default',\n  cusHeight,\n  cusWidth,\n  cusFontSize,\n  disabled = false,\n  isWhiteDisabledBackground = false,\n  placeholder,\n  isShowIcon = true,\n  textAlign = 'left',\n  onChangeValue,\n}: {\n  value: SelectItemT;\n  label?: string;\n  labelColor?:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'disabled'\n    | 'error'\n    | 'success'\n    | 'warning'\n    | 'info'\n    | 'interactive'\n    | 'hover'\n    | 'active'\n    | 'focus'\n    | 'brand'\n    | 'white'\n    | 'white';\n  listData: Array<SelectItemT>;\n  size?:\n    | 'xxxs'\n    | 'xxs'\n    | 'xs'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xl'\n    | 'xxl'\n    | 'xxxl'\n    | 'xxxxl';\n  variant?: 'default' | 'quite' | 'none';\n  cusHeight?: number;\n  cusWidth?: number;\n  cusFontSize?: number;\n  disabled?: boolean;\n  isWhiteDisabledBackground?: boolean;\n  placeholder?: string;\n  isShowIcon?: boolean;\n  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined;\n  onChangeValue?: (item: SelectItemT) => void;\n}) => {\n  const {height, fontSize} = useMemo(\n    () => ({\n      height: inputFieldHeight[size],\n      fontSize: inputFieldFontSize[size],\n    }),\n    [size],\n  );\n  const selectInputContainer: StyleProp<ViewStyle> = {\n    width: cusWidth || '100%',\n  };\n  const selectFieldStyle: StyleProp<ViewStyle> = {\n    backgroundColor: isWhiteDisabledBackground\n      ? colors.white[10]\n      : disabled\n        ? colors.neutral[20]\n        : colors.white[10],\n    height: cusHeight || height,\n  };\n\n  const selectFieldTextStyle: StyleProp<TextStyle> = {\n    fontSize: cusFontSize || fontSize,\n    textAlign,\n  };\n\n  const selectFieldBorderStyle: StyleProp<ViewStyle> = {\n    borderRadius: variant === 'default' ? metrics.borderRadiusBase : 0,\n    borderWidth:\n      variant === 'default'\n        ? metrics.borderWidthMedium\n        : metrics.borderWidthNone,\n    borderBottomWidth:\n      variant === 'none' ? metrics.borderWidthNone : metrics.borderWidthMedium,\n    borderColor: disabled ? colors.neutral[20] : colors.neutral[60],\n  };\n\n  const [isVisible, setIsVisible] = useState(false);\n  const [currentValue, setCurrentValue] = useState<SelectItemT | null>(\n    value || null,\n  );\n  useEffect(() => {\n    if (currentValue && onChangeValue) {\n      onChangeValue(currentValue);\n    }\n  }, [currentValue]);\n  const handleToggleModal = () => setIsVisible(!isVisible);\n  const handleSelectItem = (itemSelected: SelectItemT) => {\n    setIsVisible(false);\n    setCurrentValue(itemSelected);\n  };\n  const renderSelectItem = ({item}: ListRenderItemInfo<SelectItemT>) => {\n    return (\n      <Pressable\n        onPress={() => handleSelectItem(item)}\n        style={styles.selectItemWrapper}>\n        <View style={styles.textWrapper}>\n          <Text>{item.label}</Text>\n        </View>\n        {item.value === currentValue?.value && (\n          <Icon name=\"ic_checkmark_circle\" />\n        )}\n      </Pressable>\n    );\n  };\n  const renderItemSeparatorComponent = () => {\n    return <View style={styles.itemSeparator} />;\n  };\n  return (\n    <View style={selectInputContainer}>\n      {label && (\n        <Text color={labelColor} size={size}>\n          {label}\n        </Text>\n      )}\n      <Pressable\n        disabled={disabled}\n        onPress={handleToggleModal}\n        style={[styles.selectInput, selectFieldStyle, selectFieldBorderStyle]}>\n        <View style={styles.textWrapper}>\n          <Text color=\"tertiary\" style={selectFieldTextStyle}>\n            {currentValue\n              ? currentValue.label\n                ? currentValue.label\n                : placeholder\n                ? placeholder\n                : ''\n              : ''}\n          </Text>\n        </View>\n        {isShowIcon && <Icon name=\"ic_chevron_down\" />}\n      </Pressable>\n      <Modal\n        isVisible={isVisible}\n        animationIn=\"zoomInDown\"\n        animationOut=\"zoomOutUp\"\n        backdropColor={'rgba(0,0,0,0.3)'}\n        onBackdropPress={handleToggleModal}\n        style={styles.modal}>\n        <View style={styles.modalContainer}>\n          <FlatList<SelectItemT>\n            data={listData}\n            showsVerticalScrollIndicator={false}\n            ItemSeparatorComponent={renderItemSeparatorComponent}\n            removeClippedSubviews={false}\n            renderItem={renderSelectItem}\n          />\n        </View>\n      </Modal>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  selectInputContainer: {\n    width: '100%',\n  },\n  selectInput: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    backgroundColor: colors.white[10],\n    paddingHorizontal: Space.medium,\n  },\n  modal: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n\n  modalContainer: {\n    width: '90%',\n    maxHeight: '90%',\n    backgroundColor: colors.white[10],\n    borderRadius: metrics.borderRadiusBase,\n  },\n  selectItemWrapper: {\n    height: ph(40),\n    paddingVertical: Space.xs,\n    paddingHorizontal: Space.medium,\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  textWrapper: {\n    flex: 1,\n  },\n  itemSeparator: {\n    height: 1,\n    backgroundColor: colors.neutral[60],\n  },\n});\n"],"names":["ph"],"mappings":"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"}
+{"version":3,"file":"SelectField.js","sources":["../../../../components/Inputs/SelectField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {useEffect, useMemo, useState} from 'react';\nimport {\n  FlatList,\n  ListRenderItemInfo,\n  Pressable,\n  StyleProp,\n  StyleSheet,\n  TextStyle,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport Modal from 'react-native-modal';\nimport Text from '@ui/components/Text';\nimport {Space, colors, metrics, ph} from '@ui/themes';\nimport {Icon} from '@ui/components';\nimport {inputFieldFontSize, inputFieldHeight} from './styles';\n\ntype SelectItemT = {\n  label: string;\n  value: string;\n};\n\nexport const SelectField = ({\n  value,\n  label,\n  labelColor = 'tertiary',\n  listData,\n  size = 'medium',\n  variant = 'default',\n  cusHeight,\n  cusWidth,\n  cusFontSize,\n  disabled = false,\n  isWhiteDisabledBackground = false,\n  placeholder,\n  isShowIcon = true,\n  textAlign = 'left',\n  onChangeValue,\n}: {\n  value: SelectItemT;\n  label?: string;\n  labelColor?:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'disabled'\n    | 'error'\n    | 'success'\n    | 'warning'\n    | 'info'\n    | 'interactive'\n    | 'hover'\n    | 'active'\n    | 'focus'\n    | 'brand'\n    | 'white'\n    | 'white';\n  listData: Array<SelectItemT>;\n  size?:\n    | 'xxxs'\n    | 'xxs'\n    | 'xs'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xl'\n    | 'xxl'\n    | 'xxxl'\n    | 'xxxxl';\n  variant?: 'default' | 'quite' | 'none';\n  cusHeight?: number;\n  cusWidth?: number;\n  cusFontSize?: number;\n  disabled?: boolean;\n  isWhiteDisabledBackground?: boolean;\n  placeholder?: string;\n  isShowIcon?: boolean;\n  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined;\n  onChangeValue?: (item: SelectItemT) => void;\n}) => {\n  const {height, fontSize} = useMemo(\n    () => ({\n      height: inputFieldHeight[size],\n      fontSize: inputFieldFontSize[size],\n    }),\n    [size],\n  );\n  const selectInputContainer: StyleProp<ViewStyle> = {\n    width: cusWidth || '100%',\n  };\n  const selectFieldStyle: StyleProp<ViewStyle> = {\n    backgroundColor: isWhiteDisabledBackground\n      ? colors.white[10]\n      : disabled\n        ? colors.neutral[20]\n        : colors.white[10],\n    height: cusHeight || height,\n  };\n\n  const selectFieldTextStyle: StyleProp<TextStyle> = {\n    fontSize: cusFontSize || fontSize,\n    textAlign,\n  };\n\n  const selectFieldBorderStyle: StyleProp<ViewStyle> = {\n    borderRadius: variant === 'default' ? metrics.borderRadiusBase : 0,\n    borderWidth:\n      variant === 'default'\n        ? metrics.borderWidthMedium\n        : metrics.borderWidthNone,\n    borderBottomWidth:\n      variant === 'none' ? metrics.borderWidthNone : metrics.borderWidthMedium,\n    borderColor: disabled ? colors.neutral[20] : colors.neutral[60],\n  };\n\n  const [isVisible, setIsVisible] = useState(false);\n  const [currentValue, setCurrentValue] = useState<SelectItemT | null>(\n    value || null,\n  );\n  useEffect(() => {\n    if (currentValue && onChangeValue) {\n      onChangeValue(currentValue);\n    }\n  }, [currentValue]);\n  const handleToggleModal = () => setIsVisible(!isVisible);\n  const handleSelectItem = (itemSelected: SelectItemT) => {\n    setIsVisible(false);\n    setCurrentValue(itemSelected);\n  };\n  const renderSelectItem = ({item}: ListRenderItemInfo<SelectItemT>) => {\n    return (\n      <Pressable\n        onPress={() => handleSelectItem(item)}\n        style={styles.selectItemWrapper}>\n        <View style={styles.textWrapper}>\n          <Text>{item.label}</Text>\n        </View>\n        {item.value === currentValue?.value && (\n          <Icon name=\"ic_checkmark_circle\" />\n        )}\n      </Pressable>\n    );\n  };\n  const renderItemSeparatorComponent = () => {\n    return <View style={styles.itemSeparator} />;\n  };\n  return (\n    <View style={selectInputContainer}>\n      {label && (\n        <Text color={labelColor} size={size}>\n          {label}\n        </Text>\n      )}\n      <Pressable\n        disabled={disabled}\n        onPress={handleToggleModal}\n        style={[styles.selectInput, selectFieldStyle, selectFieldBorderStyle]}>\n        <View style={styles.textWrapper}>\n          <Text color={currentValue ? \"tertiary\" : \"placeholder\"} style={selectFieldTextStyle}>\n            {currentValue\n              ? currentValue.label\n                ? currentValue.label\n                : placeholder\n                ? placeholder\n                : ''\n              : ''}\n          </Text>\n        </View>\n        {isShowIcon && <Icon name=\"ic_chevron_down\" />}\n      </Pressable>\n      <Modal\n        isVisible={isVisible}\n        animationIn=\"zoomInDown\"\n        animationOut=\"zoomOutUp\"\n        backdropColor={'rgba(0,0,0,0.3)'}\n        onBackdropPress={handleToggleModal}\n        style={styles.modal}>\n        <View style={styles.modalContainer}>\n          <FlatList<SelectItemT>\n            data={listData}\n            showsVerticalScrollIndicator={false}\n            ItemSeparatorComponent={renderItemSeparatorComponent}\n            removeClippedSubviews={false}\n            renderItem={renderSelectItem}\n          />\n        </View>\n      </Modal>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  selectInputContainer: {\n    width: '100%',\n  },\n  selectInput: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    backgroundColor: colors.white[10],\n    paddingHorizontal: Space.medium,\n  },\n  modal: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n\n  modalContainer: {\n    width: '90%',\n    maxHeight: '90%',\n    backgroundColor: colors.white[10],\n    borderRadius: metrics.borderRadiusBase,\n  },\n  selectItemWrapper: {\n    height: ph(40),\n    paddingVertical: Space.xs,\n    paddingHorizontal: Space.medium,\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  textWrapper: {\n    flex: 1,\n  },\n  itemSeparator: {\n    height: 1,\n    backgroundColor: colors.neutral[60],\n  },\n});\n"],"names":["ph"],"mappings":"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"}

package/dist/components/Text/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../components/Text/styles.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAe7C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAW3C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAU3C,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../components/Text/styles.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAgB7C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAW3C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAU3C,CAAC"}

package/dist/components/Text/styles.js

@@ -9,6 +9,7 @@ const colorsText = {
     secondary: colors.neutral[90],
     tertiary: colors.neutral[80],
     disabled: colors.neutral[60],
+    placeholder: colors.neutral[60],
     error: colors.red[90],
     success: colors.green[90],
     warning: colors.orange[90],

package/dist/components/Text/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../components/Text/styles.tsx"],"sourcesContent":["import {colors, FontFamily, FontSizes} from '@ui/themes';\n\nexport const colorsText: Record<string, string> = {\n  primary: colors.neutral[100],\n  secondary: colors.neutral[90],\n  tertiary: colors.neutral[80],\n  disabled: colors.neutral[60],\n  error: colors.red[90],\n  success: colors.green[90],\n  warning: colors.orange[90],\n  info: colors.blue[90],\n  interactive: colors.secondary[100],\n  hover: colors.teal[90],\n  focus: colors.teal[100],\n  active: colors.teal[100],\n  brand: colors.teal[60],\n  white: colors.white[10],\n};\n\nexport const textSize: Record<string, number> = {\n  xxxs: FontSizes.font3XS,\n  xxs: FontSizes.fontXXS,\n  xs: FontSizes.fontXS,\n  small: FontSizes.fontSmall,\n  medium: FontSizes.fontMedium,\n  large: FontSizes.fontLarge,\n  xl: FontSizes.fontXL,\n  xxl: FontSizes.fontXXL,\n  xxxl: FontSizes.fontXXXL,\n  xxxxl: FontSizes.fontXXXL,\n};\n\nexport const fontText: Record<string, string> = {\n  100: FontFamily.Thin,\n  200: FontFamily.ExtraLight,\n  300: FontFamily.Light,\n  400: FontFamily.Regular,\n  500: FontFamily.Medium,\n  600: FontFamily.SemiBold,\n  700: FontFamily.Bold,\n  800: FontFamily.ExtraBold,\n  900: FontFamily.Black,\n};\n"],"names":[],"mappings":";;;;;;AAEa,MAAA,UAAU,GAA2B;AAChD,IAAA,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;AAC5B,IAAA,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;AAC7B,IAAA,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;AAC5B,IAAA,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;AACrB,IAAA,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;AACzB,IAAA,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;AAC1B,IAAA,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;AACrB,IAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC;AAClC,IAAA,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;AACtB,IAAA,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACvB,IAAA,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACxB,IAAA,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;AACtB,IAAA,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;;AAGZ,MAAA,QAAQ,GAA2B;IAC9C,IAAI,EAAE,SAAS,CAAC,OAAO;IACvB,GAAG,EAAE,SAAS,CAAC,OAAO;IACtB,EAAE,EAAE,SAAS,CAAC,MAAM;IACpB,KAAK,EAAE,SAAS,CAAC,SAAS;IAC1B,MAAM,EAAE,SAAS,CAAC,UAAU;IAC5B,KAAK,EAAE,SAAS,CAAC,SAAS;IAC1B,EAAE,EAAE,SAAS,CAAC,MAAM;IACpB,GAAG,EAAE,SAAS,CAAC,OAAO;IACtB,IAAI,EAAE,SAAS,CAAC,QAAQ;IACxB,KAAK,EAAE,SAAS,CAAC,QAAQ;;CAGqB;IAC9C,GAAG,EAAE,UAAU,CAAC,IAAI;IACpB,GAAG,EAAE,UAAU,CAAC,UAAU;IAC1B,GAAG,EAAE,UAAU,CAAC,KAAK;IACrB,GAAG,EAAE,UAAU,CAAC,OAAO;IACvB,GAAG,EAAE,UAAU,CAAC,MAAM;IACtB,GAAG,EAAE,UAAU,CAAC,QAAQ;IACxB,GAAG,EAAE,UAAU,CAAC,IAAI;IACpB,GAAG,EAAE,UAAU,CAAC,SAAS;IACzB,GAAG,EAAE,UAAU,CAAC,KAAK;;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../components/Text/styles.tsx"],"sourcesContent":["import {colors, FontFamily, FontSizes} from '@ui/themes';\n\nexport const colorsText: Record<string, string> = {\n  primary: colors.neutral[100],\n  secondary: colors.neutral[90],\n  tertiary: colors.neutral[80],\n  disabled: colors.neutral[60],\n  placeholder: colors.neutral[60],\n  error: colors.red[90],\n  success: colors.green[90],\n  warning: colors.orange[90],\n  info: colors.blue[90],\n  interactive: colors.secondary[100],\n  hover: colors.teal[90],\n  focus: colors.teal[100],\n  active: colors.teal[100],\n  brand: colors.teal[60],\n  white: colors.white[10],\n};\n\nexport const textSize: Record<string, number> = {\n  xxxs: FontSizes.font3XS,\n  xxs: FontSizes.fontXXS,\n  xs: FontSizes.fontXS,\n  small: FontSizes.fontSmall,\n  medium: FontSizes.fontMedium,\n  large: FontSizes.fontLarge,\n  xl: FontSizes.fontXL,\n  xxl: FontSizes.fontXXL,\n  xxxl: FontSizes.fontXXXL,\n  xxxxl: FontSizes.fontXXXL,\n};\n\nexport const fontText: Record<string, string> = {\n  100: FontFamily.Thin,\n  200: FontFamily.ExtraLight,\n  300: FontFamily.Light,\n  400: FontFamily.Regular,\n  500: FontFamily.Medium,\n  600: FontFamily.SemiBold,\n  700: FontFamily.Bold,\n  800: FontFamily.ExtraBold,\n  900: FontFamily.Black,\n};\n"],"names":[],"mappings":";;;;;;AAEa,MAAA,UAAU,GAA2B;AAChD,IAAA,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;AAC5B,IAAA,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;AAC7B,IAAA,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;AAC5B,IAAA,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;AAC5B,IAAA,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;AAC/B,IAAA,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;AACrB,IAAA,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;AACzB,IAAA,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;AAC1B,IAAA,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;AACrB,IAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC;AAClC,IAAA,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;AACtB,IAAA,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACvB,IAAA,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACxB,IAAA,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;AACtB,IAAA,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;;AAGZ,MAAA,QAAQ,GAA2B;IAC9C,IAAI,EAAE,SAAS,CAAC,OAAO;IACvB,GAAG,EAAE,SAAS,CAAC,OAAO;IACtB,EAAE,EAAE,SAAS,CAAC,MAAM;IACpB,KAAK,EAAE,SAAS,CAAC,SAAS;IAC1B,MAAM,EAAE,SAAS,CAAC,UAAU;IAC5B,KAAK,EAAE,SAAS,CAAC,SAAS;IAC1B,EAAE,EAAE,SAAS,CAAC,MAAM;IACpB,GAAG,EAAE,SAAS,CAAC,OAAO;IACtB,IAAI,EAAE,SAAS,CAAC,QAAQ;IACxB,KAAK,EAAE,SAAS,CAAC,QAAQ;;CAGqB;IAC9C,GAAG,EAAE,UAAU,CAAC,IAAI;IACpB,GAAG,EAAE,UAAU,CAAC,UAAU;IAC1B,GAAG,EAAE,UAAU,CAAC,KAAK;IACrB,GAAG,EAAE,UAAU,CAAC,OAAO;IACvB,GAAG,EAAE,UAAU,CAAC,MAAM;IACtB,GAAG,EAAE,UAAU,CAAC,QAAQ;IACxB,GAAG,EAAE,UAAU,CAAC,IAAI;IACpB,GAAG,EAAE,UAAU,CAAC,SAAS;IACzB,GAAG,EAAE,UAAU,CAAC,KAAK;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meatech/payblend_app_ui_component",
-  "version": "1.1.38",
+  "version": "1.1.39",
   "description": "UI Component Library for Payblend App",
   "main": "./dist/components/index.js",
   "module": "./dist/components/index.js",