@servesall/atoms 1.1.21 → 1.1.23

package/dist/bundle.cjs.js

@@ -204,60 +204,121 @@ function _nonIterableRest() {
 }
 
 var colors = {
+  // Whites & Grays
   color1: "#FFFFFF",
+  // Pure white
+  color7: "#dfe6e9",
+  // Light gray
+  color8: "#F8F9FB",
+  // Very light gray
+  color10: "#F2F3F7",
+  // Another light gray
+  color16: "#636e72",
+  // Dark gray
+  greyText: "#b2bec3",
+  // Gray for text
+  greyButton: "#94A3A9",
+  // Gray for buttons
   color2: "#2d3436",
+  // Almost black
+  // Blues
   color3: "#74b9ff",
+  // Light blue
   color3light: "#E1F0FF",
+  // Very light blue
   color4: "#0984e3",
+  // Medium blue
+  blue: "#74b9ff",
+  // Light blue (duplicate)
+  blueLight: "#E1F0FF",
+  // Very light blue (duplicate)
+  darkBlue: "#0984e3",
+  // Medium blue (duplicate)
+  darkBlueLight: "#CFEAFF",
+  // Pale blue
+  color15: "#00cec9",
+  // Cyan
+  color18: "#81ecec",
+  // Light cyan
+  // Yellows
   color5: "#ffeaa7",
+  // Light yellow
   color5light: "#FFF9E5",
+  // Very light yellow
   color5border: "#E4E0D2",
-  color6: "#ff7675",
-  color6light: "#FFDCDB",
-  color7: "#dfe6e9",
-  color8: "#F8F9FB",
+  // Yellow border
+  darkYellow: "#fdcb6e",
+  // Dark yellow
+  darkYellowLight: "#FFF7E8",
+  // Light yellow
+  darkYellowDark: "#8C6F39",
+  // Brown yellow
+  darkYellowGray: "#ECE5D8",
+  // Grayish yellow
+  // Oranges & Browns
   color9: "#FFA15F",
+  // Orange
   color9light: "#F9F0EA",
+  // Light orange
   color9dark: "#804F2D",
+  // Dark brown
   color9border: "#DDD1C9",
-  color10: "#F2F3F7",
+  // Orange border
+  color13: "#fab1a0",
+  // Peach
+  orange: "#FFA15F",
+  // Orange (duplicate)
+  orangeLight: "#FFFAF6",
+  // Light orange
+  orangeDark: "#3D1901",
+  // Very dark brown
+  orangeGray: "#EEE5DE",
+  // Grayish orange
+  // Reds
+  color6: "#ff7675",
+  // Red
+  color6light: "#FFDCDB",
+  // Light red
+  red: "#ff7675",
+  // Red (duplicate)
+  redlight: "#fff0ed",
+  // Very light red
+  redDark: "#9C4140",
+  // Dark red
+  redBorder: "#D2BBBB",
+  // Red border
+  // Greens
   color11: "#00b894",
+  // Green
   color11light: "#EEFFFC",
+  // Light green
   color11border: "#D2E3E0",
+  // Green border
+  color14: "#00b894",
+  // Green (duplicate)
+  green: "#55efc4",
+  // Light green
+  greenLight: "#F3FFFC",
+  // Very light green
+  greenDark: "#236A56",
+  // Dark green
+  // Purples
   color12: "#6c5ce7",
+  // Purple
   color12light: "#F5F4FF",
+  // Light purple
   color12border: "#DFDDEA",
+  // Purple border
   color12dark: "#584E74",
-  color13: "#fab1a0",
-  color14: "#00b894",
-  color15: "#00cec9",
-  color16: "#636e72",
+  // Dark purple
   color17: "#6c5ce7",
-  color18: "#81ecec",
-  darkYellow: "#fdcb6e",
-  darkYellowLight: "#FFF7E8",
-  darkYellowDark: "#8C6F39",
-  darkYellowGray: "#ECE5D8",
-  green: "#55efc4",
-  greenLight: "#F3FFFC",
-  greenDark: "#236A56",
-  greyText: "#b2bec3",
-  greyButton: "#94A3A9",
-  red: "#ff7675",
-  redlight: "#FFFAF9",
-  redDark: "#9C4140",
-  redBorder: "#D2BBBB",
-  blue: "#74b9ff",
-  blueLight: "#E1F0FF",
-  darkBlue: "#0984e3",
-  darkBlueLight: "#CFEAFF",
+  // Purple (duplicate)
   purple: "#6c5ce7",
+  // Purple (duplicate)
   purpleLight: "#F9F8FF",
-  purpleDark: "#372E78",
-  orange: "#FFA15F",
-  orangeLight: "#FFFAF6",
-  orangeDark: "#3D1901",
-  orangeGray: "#EEE5DE"
+  // Light purple
+  purpleDark: "#372E78" // Dark purple
+
 };
 
 var fonts = {
@@ -396,7 +457,7 @@ var P = styled__default["default"].Text(_templateObject7$1 || (_templateObject7$
   return props.style;
 });
 
-var _excluded$6 = ["children", "style", "align", "color", "fontFamily"];
+var _excluded$7 = ["children", "style", "align", "color", "fontFamily"];
 
 var H1Text = function H1Text(_ref) {
   var children = _ref.children,
@@ -405,7 +466,7 @@ var H1Text = function H1Text(_ref) {
       align = _ref$align === void 0 ? "left" : _ref$align,
       color = _ref.color,
       fontFamily = _ref.fontFamily,
-      rest = _objectWithoutProperties(_ref, _excluded$6);
+      rest = _objectWithoutProperties(_ref, _excluded$7);
 
   return /*#__PURE__*/React__default["default"].createElement(H1, _extends({}, rest, {
     style: style,
@@ -419,7 +480,7 @@ H1Text.propTypes = {
   style: PropTypes__default["default"].object
 };
 
-var _excluded$5 = ["children", "style", "align", "color", "fontFamily"];
+var _excluded$6 = ["children", "style", "align", "color", "fontFamily"];
 
 var H2Text = function H2Text(_ref) {
   var children = _ref.children,
@@ -428,7 +489,7 @@ var H2Text = function H2Text(_ref) {
       align = _ref$align === void 0 ? "left" : _ref$align,
       color = _ref.color,
       fontFamily = _ref.fontFamily,
-      rest = _objectWithoutProperties(_ref, _excluded$5);
+      rest = _objectWithoutProperties(_ref, _excluded$6);
 
   return /*#__PURE__*/React__default["default"].createElement(H2, _extends({}, rest, {
     style: style,
@@ -442,7 +503,7 @@ H2Text.propTypes = {
   style: PropTypes__default["default"].object
 };
 
-var _excluded$4 = ["children", "style", "align", "color", "fontFamily"];
+var _excluded$5 = ["children", "style", "align", "color", "fontFamily"];
 
 var H3Text = function H3Text(_ref) {
   var children = _ref.children,
@@ -451,7 +512,7 @@ var H3Text = function H3Text(_ref) {
       align = _ref$align === void 0 ? "left" : _ref$align,
       color = _ref.color,
       fontFamily = _ref.fontFamily,
-      rest = _objectWithoutProperties(_ref, _excluded$4);
+      rest = _objectWithoutProperties(_ref, _excluded$5);
 
   return /*#__PURE__*/React__default["default"].createElement(H3, _extends({}, rest, {
     style: style,
@@ -465,7 +526,7 @@ H3Text.propTypes = {
   style: PropTypes__default["default"].object
 };
 
-var _excluded$3 = ["children", "style", "align", "color", "fontFamily"];
+var _excluded$4 = ["children", "style", "align", "color", "fontFamily"];
 
 var H4Text = function H4Text(_ref) {
   var children = _ref.children,
@@ -474,7 +535,7 @@ var H4Text = function H4Text(_ref) {
       align = _ref$align === void 0 ? "left" : _ref$align,
       color = _ref.color,
       fontFamily = _ref.fontFamily,
-      rest = _objectWithoutProperties(_ref, _excluded$3);
+      rest = _objectWithoutProperties(_ref, _excluded$4);
 
   return /*#__PURE__*/React__default["default"].createElement(H4, _extends({}, rest, {
     style: style,
@@ -488,7 +549,7 @@ H4Text.propTypes = {
   style: PropTypes__default["default"].object
 };
 
-var _excluded$2 = ["children", "style", "align", "color", "fontFamily"];
+var _excluded$3 = ["children", "style", "align", "color", "fontFamily"];
 
 var H5Text = function H5Text(_ref) {
   var children = _ref.children,
@@ -497,7 +558,7 @@ var H5Text = function H5Text(_ref) {
       align = _ref$align === void 0 ? "left" : _ref$align,
       color = _ref.color,
       fontFamily = _ref.fontFamily,
-      rest = _objectWithoutProperties(_ref, _excluded$2);
+      rest = _objectWithoutProperties(_ref, _excluded$3);
 
   return /*#__PURE__*/React__default["default"].createElement(H5, _extends({}, rest, {
     style: style,
@@ -511,7 +572,7 @@ H5Text.propTypes = {
   style: PropTypes__default["default"].object
 };
 
-var _excluded$1 = ["children", "style", "align", "color", "fontFamily"];
+var _excluded$2 = ["children", "style", "align", "color", "fontFamily"];
 
 var pText = function pText(_ref) {
   var children = _ref.children,
@@ -520,7 +581,7 @@ var pText = function pText(_ref) {
       align = _ref$align === void 0 ? "left" : _ref$align,
       color = _ref.color,
       fontFamily = _ref.fontFamily,
-      rest = _objectWithoutProperties(_ref, _excluded$1);
+      rest = _objectWithoutProperties(_ref, _excluded$2);
 
   return /*#__PURE__*/React__default["default"].createElement(P, _extends({}, rest, {
     style: style,
@@ -534,7 +595,7 @@ pText.propTypes = {
   style: PropTypes__default["default"].object
 };
 
-var _excluded = ["children", "style", "align", "color", "fontFamily"];
+var _excluded$1 = ["children", "style", "align", "color", "fontFamily"];
 
 var SpanText = function SpanText(_ref) {
   var children = _ref.children,
@@ -543,7 +604,7 @@ var SpanText = function SpanText(_ref) {
       align = _ref$align === void 0 ? "left" : _ref$align,
       color = _ref.color,
       fontFamily = _ref.fontFamily,
-      rest = _objectWithoutProperties(_ref, _excluded);
+      rest = _objectWithoutProperties(_ref, _excluded$1);
 
   return /*#__PURE__*/React__default["default"].createElement(Span, _extends({}, rest, {
     style: style,
@@ -953,19 +1014,23 @@ var WebSmallWrapper = function WebSmallWrapper(_ref) {
   }, children);
 };
 
+var _excluded = ["children", "color", "style", "direction"];
+
 var Box = function Box(_ref) {
   var children = _ref.children,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? "" : _ref$color,
       style = _ref.style,
       _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? false : _ref$direction;
-  return /*#__PURE__*/React__default["default"].createElement(BoxElement, {
+      direction = _ref$direction === void 0 ? false : _ref$direction,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React__default["default"].createElement(BoxElement, _extends({
     style: _objectSpread2({
       backgroundColor: color
     }, style),
     direction: direction
-  }, children);
+  }, rest), children);
 };
 
 var RoundedTopBox = function RoundedTopBox(_ref) {
@@ -1445,7 +1510,9 @@ var Input = function Input(_ref) {
     focused();
   }, [isFocused]);
   React.useEffect(function () {
-    textChange(textValue);
+    if (textValue !== undefined) {
+      textChange(textValue);
+    }
   }, [textValue]);
   React.useEffect(function () {
     defaultValue && setTextValue(defaultValue);
@@ -1486,10 +1553,10 @@ var Input = function Input(_ref) {
     active: isFocused,
     color: !hasError ? isFocused ? borderColorActive : borderColorIdle : borderColorError
   }, /*#__PURE__*/React__default["default"].createElement(PlaceholderElement$1, {
-    active: isFocused || textValue && textValue.length > 0 || value && value.length > 0
+    active: isFocused || textValue !== null && String(textValue).trim().length > 0 || value !== null && String(value).trim().length > 0
   }, /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, !hasError ? children : /*#__PURE__*/React__default["default"].createElement(H4Text, {
     color: borderColorError
-  }, error || hasError))), /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, /*#__PURE__*/React__default["default"].createElement(Row, null, euro && (isFocused || textValue && textValue.length > 0 || value && value.length > 0) && /*#__PURE__*/React__default["default"].createElement(Row, {
+  }, error || hasError))), /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, /*#__PURE__*/React__default["default"].createElement(Row, null, euro && (isFocused || textValue !== null && String(textValue).trim().length > 0 || value !== null && String(value).trim().length > 0) && /*#__PURE__*/React__default["default"].createElement(Row, {
     style: {
       minHeight: 40,
       alignItems: "center"
@@ -1505,7 +1572,7 @@ var Input = function Input(_ref) {
     onChangeText: function onChangeText(text) {
       return setTextValue(text);
     },
-    defaultValue: defaultValue,
+    defaultValue: defaultValue && String(defaultValue),
     value: value,
     multiline: multiline,
     numberOfLines: numberOfLines,
@@ -1848,7 +1915,17 @@ var RoundedBtn$1 = function RoundedBtn(_ref) {
 
 var _templateObject$e, _templateObject2$5;
 styled__default["default"].View(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral([""])));
-var ButtonStyle$3 = styled__default["default"].Pressable(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  min-height: ", ";\n  border-radius: 50px;\n  background-color: ", ";\n  opacity: ", ";\n  ", ";\n"])), function (props) {
+var ButtonStyle$3 = styled__default["default"].Pressable(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  min-height: ", ";\n  min-width: ", ";\n  border-radius: 50px;\n  background-color: ", ";\n  opacity: ", ";\n  ", ";\n"])), function (props) {
+  if (props.size === "big") {
+    return "70px";
+  } else if (props.size === "small") {
+    return "56px";
+  } else if (props.size === "xsmall") {
+    return "40px";
+  } else {
+    return "70px";
+  }
+}, function (props) {
   if (props.size === "big") {
     return "70px";
   } else if (props.size === "small") {

package/dist/bundle.esm.js

@@ -191,60 +191,121 @@ function _nonIterableRest() {
 }
 
 var colors = {
+  // Whites & Grays
   color1: "#FFFFFF",
+  // Pure white
+  color7: "#dfe6e9",
+  // Light gray
+  color8: "#F8F9FB",
+  // Very light gray
+  color10: "#F2F3F7",
+  // Another light gray
+  color16: "#636e72",
+  // Dark gray
+  greyText: "#b2bec3",
+  // Gray for text
+  greyButton: "#94A3A9",
+  // Gray for buttons
   color2: "#2d3436",
+  // Almost black
+  // Blues
   color3: "#74b9ff",
+  // Light blue
   color3light: "#E1F0FF",
+  // Very light blue
   color4: "#0984e3",
+  // Medium blue
+  blue: "#74b9ff",
+  // Light blue (duplicate)
+  blueLight: "#E1F0FF",
+  // Very light blue (duplicate)
+  darkBlue: "#0984e3",
+  // Medium blue (duplicate)
+  darkBlueLight: "#CFEAFF",
+  // Pale blue
+  color15: "#00cec9",
+  // Cyan
+  color18: "#81ecec",
+  // Light cyan
+  // Yellows
   color5: "#ffeaa7",
+  // Light yellow
   color5light: "#FFF9E5",
+  // Very light yellow
   color5border: "#E4E0D2",
-  color6: "#ff7675",
-  color6light: "#FFDCDB",
-  color7: "#dfe6e9",
-  color8: "#F8F9FB",
+  // Yellow border
+  darkYellow: "#fdcb6e",
+  // Dark yellow
+  darkYellowLight: "#FFF7E8",
+  // Light yellow
+  darkYellowDark: "#8C6F39",
+  // Brown yellow
+  darkYellowGray: "#ECE5D8",
+  // Grayish yellow
+  // Oranges & Browns
   color9: "#FFA15F",
+  // Orange
   color9light: "#F9F0EA",
+  // Light orange
   color9dark: "#804F2D",
+  // Dark brown
   color9border: "#DDD1C9",
-  color10: "#F2F3F7",
+  // Orange border
+  color13: "#fab1a0",
+  // Peach
+  orange: "#FFA15F",
+  // Orange (duplicate)
+  orangeLight: "#FFFAF6",
+  // Light orange
+  orangeDark: "#3D1901",
+  // Very dark brown
+  orangeGray: "#EEE5DE",
+  // Grayish orange
+  // Reds
+  color6: "#ff7675",
+  // Red
+  color6light: "#FFDCDB",
+  // Light red
+  red: "#ff7675",
+  // Red (duplicate)
+  redlight: "#fff0ed",
+  // Very light red
+  redDark: "#9C4140",
+  // Dark red
+  redBorder: "#D2BBBB",
+  // Red border
+  // Greens
   color11: "#00b894",
+  // Green
   color11light: "#EEFFFC",
+  // Light green
   color11border: "#D2E3E0",
+  // Green border
+  color14: "#00b894",
+  // Green (duplicate)
+  green: "#55efc4",
+  // Light green
+  greenLight: "#F3FFFC",
+  // Very light green
+  greenDark: "#236A56",
+  // Dark green
+  // Purples
   color12: "#6c5ce7",
+  // Purple
   color12light: "#F5F4FF",
+  // Light purple
   color12border: "#DFDDEA",
+  // Purple border
   color12dark: "#584E74",
-  color13: "#fab1a0",
-  color14: "#00b894",
-  color15: "#00cec9",
-  color16: "#636e72",
+  // Dark purple
   color17: "#6c5ce7",
-  color18: "#81ecec",
-  darkYellow: "#fdcb6e",
-  darkYellowLight: "#FFF7E8",
-  darkYellowDark: "#8C6F39",
-  darkYellowGray: "#ECE5D8",
-  green: "#55efc4",
-  greenLight: "#F3FFFC",
-  greenDark: "#236A56",
-  greyText: "#b2bec3",
-  greyButton: "#94A3A9",
-  red: "#ff7675",
-  redlight: "#FFFAF9",
-  redDark: "#9C4140",
-  redBorder: "#D2BBBB",
-  blue: "#74b9ff",
-  blueLight: "#E1F0FF",
-  darkBlue: "#0984e3",
-  darkBlueLight: "#CFEAFF",
+  // Purple (duplicate)
   purple: "#6c5ce7",
+  // Purple (duplicate)
   purpleLight: "#F9F8FF",
-  purpleDark: "#372E78",
-  orange: "#FFA15F",
-  orangeLight: "#FFFAF6",
-  orangeDark: "#3D1901",
-  orangeGray: "#EEE5DE"
+  // Light purple
+  purpleDark: "#372E78" // Dark purple
+
 };
 
 var fonts = {
@@ -383,7 +444,7 @@ var P = styled.Text(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateL
   return props.style;
 });
 
-var _excluded$6 = ["children", "style", "align", "color", "fontFamily"];
+var _excluded$7 = ["children", "style", "align", "color", "fontFamily"];
 
 var H1Text = function H1Text(_ref) {
   var children = _ref.children,
@@ -392,7 +453,7 @@ var H1Text = function H1Text(_ref) {
       align = _ref$align === void 0 ? "left" : _ref$align,
       color = _ref.color,
       fontFamily = _ref.fontFamily,
-      rest = _objectWithoutProperties(_ref, _excluded$6);
+      rest = _objectWithoutProperties(_ref, _excluded$7);
 
   return /*#__PURE__*/React.createElement(H1, _extends({}, rest, {
     style: style,
@@ -406,7 +467,7 @@ H1Text.propTypes = {
   style: PropTypes.object
 };
 
-var _excluded$5 = ["children", "style", "align", "color", "fontFamily"];
+var _excluded$6 = ["children", "style", "align", "color", "fontFamily"];
 
 var H2Text = function H2Text(_ref) {
   var children = _ref.children,
@@ -415,7 +476,7 @@ var H2Text = function H2Text(_ref) {
       align = _ref$align === void 0 ? "left" : _ref$align,
       color = _ref.color,
       fontFamily = _ref.fontFamily,
-      rest = _objectWithoutProperties(_ref, _excluded$5);
+      rest = _objectWithoutProperties(_ref, _excluded$6);
 
   return /*#__PURE__*/React.createElement(H2, _extends({}, rest, {
     style: style,
@@ -429,7 +490,7 @@ H2Text.propTypes = {
   style: PropTypes.object
 };
 
-var _excluded$4 = ["children", "style", "align", "color", "fontFamily"];
+var _excluded$5 = ["children", "style", "align", "color", "fontFamily"];
 
 var H3Text = function H3Text(_ref) {
   var children = _ref.children,
@@ -438,7 +499,7 @@ var H3Text = function H3Text(_ref) {
       align = _ref$align === void 0 ? "left" : _ref$align,
       color = _ref.color,
       fontFamily = _ref.fontFamily,
-      rest = _objectWithoutProperties(_ref, _excluded$4);
+      rest = _objectWithoutProperties(_ref, _excluded$5);
 
   return /*#__PURE__*/React.createElement(H3, _extends({}, rest, {
     style: style,
@@ -452,7 +513,7 @@ H3Text.propTypes = {
   style: PropTypes.object
 };
 
-var _excluded$3 = ["children", "style", "align", "color", "fontFamily"];
+var _excluded$4 = ["children", "style", "align", "color", "fontFamily"];
 
 var H4Text = function H4Text(_ref) {
   var children = _ref.children,
@@ -461,7 +522,7 @@ var H4Text = function H4Text(_ref) {
       align = _ref$align === void 0 ? "left" : _ref$align,
       color = _ref.color,
       fontFamily = _ref.fontFamily,
-      rest = _objectWithoutProperties(_ref, _excluded$3);
+      rest = _objectWithoutProperties(_ref, _excluded$4);
 
   return /*#__PURE__*/React.createElement(H4, _extends({}, rest, {
     style: style,
@@ -475,7 +536,7 @@ H4Text.propTypes = {
   style: PropTypes.object
 };
 
-var _excluded$2 = ["children", "style", "align", "color", "fontFamily"];
+var _excluded$3 = ["children", "style", "align", "color", "fontFamily"];
 
 var H5Text = function H5Text(_ref) {
   var children = _ref.children,
@@ -484,7 +545,7 @@ var H5Text = function H5Text(_ref) {
       align = _ref$align === void 0 ? "left" : _ref$align,
       color = _ref.color,
       fontFamily = _ref.fontFamily,
-      rest = _objectWithoutProperties(_ref, _excluded$2);
+      rest = _objectWithoutProperties(_ref, _excluded$3);
 
   return /*#__PURE__*/React.createElement(H5, _extends({}, rest, {
     style: style,
@@ -498,7 +559,7 @@ H5Text.propTypes = {
   style: PropTypes.object
 };
 
-var _excluded$1 = ["children", "style", "align", "color", "fontFamily"];
+var _excluded$2 = ["children", "style", "align", "color", "fontFamily"];
 
 var pText = function pText(_ref) {
   var children = _ref.children,
@@ -507,7 +568,7 @@ var pText = function pText(_ref) {
       align = _ref$align === void 0 ? "left" : _ref$align,
       color = _ref.color,
       fontFamily = _ref.fontFamily,
-      rest = _objectWithoutProperties(_ref, _excluded$1);
+      rest = _objectWithoutProperties(_ref, _excluded$2);
 
   return /*#__PURE__*/React.createElement(P, _extends({}, rest, {
     style: style,
@@ -521,7 +582,7 @@ pText.propTypes = {
   style: PropTypes.object
 };
 
-var _excluded = ["children", "style", "align", "color", "fontFamily"];
+var _excluded$1 = ["children", "style", "align", "color", "fontFamily"];
 
 var SpanText = function SpanText(_ref) {
   var children = _ref.children,
@@ -530,7 +591,7 @@ var SpanText = function SpanText(_ref) {
       align = _ref$align === void 0 ? "left" : _ref$align,
       color = _ref.color,
       fontFamily = _ref.fontFamily,
-      rest = _objectWithoutProperties(_ref, _excluded);
+      rest = _objectWithoutProperties(_ref, _excluded$1);
 
   return /*#__PURE__*/React.createElement(Span, _extends({}, rest, {
     style: style,
@@ -940,19 +1001,23 @@ var WebSmallWrapper = function WebSmallWrapper(_ref) {
   }, children);
 };
 
+var _excluded = ["children", "color", "style", "direction"];
+
 var Box = function Box(_ref) {
   var children = _ref.children,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? "" : _ref$color,
       style = _ref.style,
       _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? false : _ref$direction;
-  return /*#__PURE__*/React.createElement(BoxElement, {
+      direction = _ref$direction === void 0 ? false : _ref$direction,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(BoxElement, _extends({
     style: _objectSpread2({
       backgroundColor: color
     }, style),
     direction: direction
-  }, children);
+  }, rest), children);
 };
 
 var RoundedTopBox = function RoundedTopBox(_ref) {
@@ -1432,7 +1497,9 @@ var Input = function Input(_ref) {
     focused();
   }, [isFocused]);
   useEffect(function () {
-    textChange(textValue);
+    if (textValue !== undefined) {
+      textChange(textValue);
+    }
   }, [textValue]);
   useEffect(function () {
     defaultValue && setTextValue(defaultValue);
@@ -1473,10 +1540,10 @@ var Input = function Input(_ref) {
     active: isFocused,
     color: !hasError ? isFocused ? borderColorActive : borderColorIdle : borderColorError
   }, /*#__PURE__*/React.createElement(PlaceholderElement$1, {
-    active: isFocused || textValue && textValue.length > 0 || value && value.length > 0
+    active: isFocused || textValue !== null && String(textValue).trim().length > 0 || value !== null && String(value).trim().length > 0
   }, /*#__PURE__*/React.createElement(MarginHorizontal, null, !hasError ? children : /*#__PURE__*/React.createElement(H4Text, {
     color: borderColorError
-  }, error || hasError))), /*#__PURE__*/React.createElement(MarginHorizontal, null, /*#__PURE__*/React.createElement(Row, null, euro && (isFocused || textValue && textValue.length > 0 || value && value.length > 0) && /*#__PURE__*/React.createElement(Row, {
+  }, error || hasError))), /*#__PURE__*/React.createElement(MarginHorizontal, null, /*#__PURE__*/React.createElement(Row, null, euro && (isFocused || textValue !== null && String(textValue).trim().length > 0 || value !== null && String(value).trim().length > 0) && /*#__PURE__*/React.createElement(Row, {
     style: {
       minHeight: 40,
       alignItems: "center"
@@ -1492,7 +1559,7 @@ var Input = function Input(_ref) {
     onChangeText: function onChangeText(text) {
       return setTextValue(text);
     },
-    defaultValue: defaultValue,
+    defaultValue: defaultValue && String(defaultValue),
     value: value,
     multiline: multiline,
     numberOfLines: numberOfLines,
@@ -1835,7 +1902,17 @@ var RoundedBtn$1 = function RoundedBtn(_ref) {
 
 var _templateObject$e, _templateObject2$5;
 styled.View(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral([""])));
-var ButtonStyle$3 = styled.Pressable(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  min-height: ", ";\n  border-radius: 50px;\n  background-color: ", ";\n  opacity: ", ";\n  ", ";\n"])), function (props) {
+var ButtonStyle$3 = styled.Pressable(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  min-height: ", ";\n  min-width: ", ";\n  border-radius: 50px;\n  background-color: ", ";\n  opacity: ", ";\n  ", ";\n"])), function (props) {
+  if (props.size === "big") {
+    return "70px";
+  } else if (props.size === "small") {
+    return "56px";
+  } else if (props.size === "xsmall") {
+    return "40px";
+  } else {
+    return "70px";
+  }
+}, function (props) {
   if (props.size === "big") {
     return "70px";
   } else if (props.size === "small") {

package/dist/bundle.umd.js

@@ -196,60 +196,121 @@
   }
 
   var colors = {
+    // Whites & Grays
     color1: "#FFFFFF",
+    // Pure white
+    color7: "#dfe6e9",
+    // Light gray
+    color8: "#F8F9FB",
+    // Very light gray
+    color10: "#F2F3F7",
+    // Another light gray
+    color16: "#636e72",
+    // Dark gray
+    greyText: "#b2bec3",
+    // Gray for text
+    greyButton: "#94A3A9",
+    // Gray for buttons
     color2: "#2d3436",
+    // Almost black
+    // Blues
     color3: "#74b9ff",
+    // Light blue
     color3light: "#E1F0FF",
+    // Very light blue
     color4: "#0984e3",
+    // Medium blue
+    blue: "#74b9ff",
+    // Light blue (duplicate)
+    blueLight: "#E1F0FF",
+    // Very light blue (duplicate)
+    darkBlue: "#0984e3",
+    // Medium blue (duplicate)
+    darkBlueLight: "#CFEAFF",
+    // Pale blue
+    color15: "#00cec9",
+    // Cyan
+    color18: "#81ecec",
+    // Light cyan
+    // Yellows
     color5: "#ffeaa7",
+    // Light yellow
     color5light: "#FFF9E5",
+    // Very light yellow
     color5border: "#E4E0D2",
-    color6: "#ff7675",
-    color6light: "#FFDCDB",
-    color7: "#dfe6e9",
-    color8: "#F8F9FB",
+    // Yellow border
+    darkYellow: "#fdcb6e",
+    // Dark yellow
+    darkYellowLight: "#FFF7E8",
+    // Light yellow
+    darkYellowDark: "#8C6F39",
+    // Brown yellow
+    darkYellowGray: "#ECE5D8",
+    // Grayish yellow
+    // Oranges & Browns
     color9: "#FFA15F",
+    // Orange
     color9light: "#F9F0EA",
+    // Light orange
     color9dark: "#804F2D",
+    // Dark brown
     color9border: "#DDD1C9",
-    color10: "#F2F3F7",
+    // Orange border
+    color13: "#fab1a0",
+    // Peach
+    orange: "#FFA15F",
+    // Orange (duplicate)
+    orangeLight: "#FFFAF6",
+    // Light orange
+    orangeDark: "#3D1901",
+    // Very dark brown
+    orangeGray: "#EEE5DE",
+    // Grayish orange
+    // Reds
+    color6: "#ff7675",
+    // Red
+    color6light: "#FFDCDB",
+    // Light red
+    red: "#ff7675",
+    // Red (duplicate)
+    redlight: "#fff0ed",
+    // Very light red
+    redDark: "#9C4140",
+    // Dark red
+    redBorder: "#D2BBBB",
+    // Red border
+    // Greens
     color11: "#00b894",
+    // Green
     color11light: "#EEFFFC",
+    // Light green
     color11border: "#D2E3E0",
+    // Green border
+    color14: "#00b894",
+    // Green (duplicate)
+    green: "#55efc4",
+    // Light green
+    greenLight: "#F3FFFC",
+    // Very light green
+    greenDark: "#236A56",
+    // Dark green
+    // Purples
     color12: "#6c5ce7",
+    // Purple
     color12light: "#F5F4FF",
+    // Light purple
     color12border: "#DFDDEA",
+    // Purple border
     color12dark: "#584E74",
-    color13: "#fab1a0",
-    color14: "#00b894",
-    color15: "#00cec9",
-    color16: "#636e72",
+    // Dark purple
     color17: "#6c5ce7",
-    color18: "#81ecec",
-    darkYellow: "#fdcb6e",
-    darkYellowLight: "#FFF7E8",
-    darkYellowDark: "#8C6F39",
-    darkYellowGray: "#ECE5D8",
-    green: "#55efc4",
-    greenLight: "#F3FFFC",
-    greenDark: "#236A56",
-    greyText: "#b2bec3",
-    greyButton: "#94A3A9",
-    red: "#ff7675",
-    redlight: "#FFFAF9",
-    redDark: "#9C4140",
-    redBorder: "#D2BBBB",
-    blue: "#74b9ff",
-    blueLight: "#E1F0FF",
-    darkBlue: "#0984e3",
-    darkBlueLight: "#CFEAFF",
+    // Purple (duplicate)
     purple: "#6c5ce7",
+    // Purple (duplicate)
     purpleLight: "#F9F8FF",
-    purpleDark: "#372E78",
-    orange: "#FFA15F",
-    orangeLight: "#FFFAF6",
-    orangeDark: "#3D1901",
-    orangeGray: "#EEE5DE"
+    // Light purple
+    purpleDark: "#372E78" // Dark purple
+
   };
 
   var fonts = {
@@ -388,7 +449,7 @@
     return props.style;
   });
 
-  var _excluded$6 = ["children", "style", "align", "color", "fontFamily"];
+  var _excluded$7 = ["children", "style", "align", "color", "fontFamily"];
 
   var H1Text = function H1Text(_ref) {
     var children = _ref.children,
@@ -397,7 +458,7 @@
         align = _ref$align === void 0 ? "left" : _ref$align,
         color = _ref.color,
         fontFamily = _ref.fontFamily,
-        rest = _objectWithoutProperties(_ref, _excluded$6);
+        rest = _objectWithoutProperties(_ref, _excluded$7);
 
     return /*#__PURE__*/React__default["default"].createElement(H1, _extends({}, rest, {
       style: style,
@@ -411,7 +472,7 @@
     style: PropTypes__default["default"].object
   };
 
-  var _excluded$5 = ["children", "style", "align", "color", "fontFamily"];
+  var _excluded$6 = ["children", "style", "align", "color", "fontFamily"];
 
   var H2Text = function H2Text(_ref) {
     var children = _ref.children,
@@ -420,7 +481,7 @@
         align = _ref$align === void 0 ? "left" : _ref$align,
         color = _ref.color,
         fontFamily = _ref.fontFamily,
-        rest = _objectWithoutProperties(_ref, _excluded$5);
+        rest = _objectWithoutProperties(_ref, _excluded$6);
 
     return /*#__PURE__*/React__default["default"].createElement(H2, _extends({}, rest, {
       style: style,
@@ -434,7 +495,7 @@
     style: PropTypes__default["default"].object
   };
 
-  var _excluded$4 = ["children", "style", "align", "color", "fontFamily"];
+  var _excluded$5 = ["children", "style", "align", "color", "fontFamily"];
 
   var H3Text = function H3Text(_ref) {
     var children = _ref.children,
@@ -443,7 +504,7 @@
         align = _ref$align === void 0 ? "left" : _ref$align,
         color = _ref.color,
         fontFamily = _ref.fontFamily,
-        rest = _objectWithoutProperties(_ref, _excluded$4);
+        rest = _objectWithoutProperties(_ref, _excluded$5);
 
     return /*#__PURE__*/React__default["default"].createElement(H3, _extends({}, rest, {
       style: style,
@@ -457,7 +518,7 @@
     style: PropTypes__default["default"].object
   };
 
-  var _excluded$3 = ["children", "style", "align", "color", "fontFamily"];
+  var _excluded$4 = ["children", "style", "align", "color", "fontFamily"];
 
   var H4Text = function H4Text(_ref) {
     var children = _ref.children,
@@ -466,7 +527,7 @@
         align = _ref$align === void 0 ? "left" : _ref$align,
         color = _ref.color,
         fontFamily = _ref.fontFamily,
-        rest = _objectWithoutProperties(_ref, _excluded$3);
+        rest = _objectWithoutProperties(_ref, _excluded$4);
 
     return /*#__PURE__*/React__default["default"].createElement(H4, _extends({}, rest, {
       style: style,
@@ -480,7 +541,7 @@
     style: PropTypes__default["default"].object
   };
 
-  var _excluded$2 = ["children", "style", "align", "color", "fontFamily"];
+  var _excluded$3 = ["children", "style", "align", "color", "fontFamily"];
 
   var H5Text = function H5Text(_ref) {
     var children = _ref.children,
@@ -489,7 +550,7 @@
         align = _ref$align === void 0 ? "left" : _ref$align,
         color = _ref.color,
         fontFamily = _ref.fontFamily,
-        rest = _objectWithoutProperties(_ref, _excluded$2);
+        rest = _objectWithoutProperties(_ref, _excluded$3);
 
     return /*#__PURE__*/React__default["default"].createElement(H5, _extends({}, rest, {
       style: style,
@@ -503,7 +564,7 @@
     style: PropTypes__default["default"].object
   };
 
-  var _excluded$1 = ["children", "style", "align", "color", "fontFamily"];
+  var _excluded$2 = ["children", "style", "align", "color", "fontFamily"];
 
   var pText = function pText(_ref) {
     var children = _ref.children,
@@ -512,7 +573,7 @@
         align = _ref$align === void 0 ? "left" : _ref$align,
         color = _ref.color,
         fontFamily = _ref.fontFamily,
-        rest = _objectWithoutProperties(_ref, _excluded$1);
+        rest = _objectWithoutProperties(_ref, _excluded$2);
 
     return /*#__PURE__*/React__default["default"].createElement(P, _extends({}, rest, {
       style: style,
@@ -526,7 +587,7 @@
     style: PropTypes__default["default"].object
   };
 
-  var _excluded = ["children", "style", "align", "color", "fontFamily"];
+  var _excluded$1 = ["children", "style", "align", "color", "fontFamily"];
 
   var SpanText = function SpanText(_ref) {
     var children = _ref.children,
@@ -535,7 +596,7 @@
         align = _ref$align === void 0 ? "left" : _ref$align,
         color = _ref.color,
         fontFamily = _ref.fontFamily,
-        rest = _objectWithoutProperties(_ref, _excluded);
+        rest = _objectWithoutProperties(_ref, _excluded$1);
 
     return /*#__PURE__*/React__default["default"].createElement(Span, _extends({}, rest, {
       style: style,
@@ -945,19 +1006,23 @@
     }, children);
   };
 
+  var _excluded = ["children", "color", "style", "direction"];
+
   var Box = function Box(_ref) {
     var children = _ref.children,
         _ref$color = _ref.color,
         color = _ref$color === void 0 ? "" : _ref$color,
         style = _ref.style,
         _ref$direction = _ref.direction,
-        direction = _ref$direction === void 0 ? false : _ref$direction;
-    return /*#__PURE__*/React__default["default"].createElement(BoxElement, {
+        direction = _ref$direction === void 0 ? false : _ref$direction,
+        rest = _objectWithoutProperties(_ref, _excluded);
+
+    return /*#__PURE__*/React__default["default"].createElement(BoxElement, _extends({
       style: _objectSpread2({
         backgroundColor: color
       }, style),
       direction: direction
-    }, children);
+    }, rest), children);
   };
 
   var RoundedTopBox = function RoundedTopBox(_ref) {
@@ -1437,7 +1502,9 @@
       focused();
     }, [isFocused]);
     React.useEffect(function () {
-      textChange(textValue);
+      if (textValue !== undefined) {
+        textChange(textValue);
+      }
     }, [textValue]);
     React.useEffect(function () {
       defaultValue && setTextValue(defaultValue);
@@ -1478,10 +1545,10 @@
       active: isFocused,
       color: !hasError ? isFocused ? borderColorActive : borderColorIdle : borderColorError
     }, /*#__PURE__*/React__default["default"].createElement(PlaceholderElement$1, {
-      active: isFocused || textValue && textValue.length > 0 || value && value.length > 0
+      active: isFocused || textValue !== null && String(textValue).trim().length > 0 || value !== null && String(value).trim().length > 0
     }, /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, !hasError ? children : /*#__PURE__*/React__default["default"].createElement(H4Text, {
       color: borderColorError
-    }, error || hasError))), /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, /*#__PURE__*/React__default["default"].createElement(Row, null, euro && (isFocused || textValue && textValue.length > 0 || value && value.length > 0) && /*#__PURE__*/React__default["default"].createElement(Row, {
+    }, error || hasError))), /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, /*#__PURE__*/React__default["default"].createElement(Row, null, euro && (isFocused || textValue !== null && String(textValue).trim().length > 0 || value !== null && String(value).trim().length > 0) && /*#__PURE__*/React__default["default"].createElement(Row, {
       style: {
         minHeight: 40,
         alignItems: "center"
@@ -1497,7 +1564,7 @@
       onChangeText: function onChangeText(text) {
         return setTextValue(text);
       },
-      defaultValue: defaultValue,
+      defaultValue: defaultValue && String(defaultValue),
       value: value,
       multiline: multiline,
       numberOfLines: numberOfLines,
@@ -1840,7 +1907,17 @@
 
   var _templateObject$e, _templateObject2$5;
   styled__default["default"].View(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral([""])));
-  var ButtonStyle$3 = styled__default["default"].Pressable(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  min-height: ", ";\n  border-radius: 50px;\n  background-color: ", ";\n  opacity: ", ";\n  ", ";\n"])), function (props) {
+  var ButtonStyle$3 = styled__default["default"].Pressable(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  min-height: ", ";\n  min-width: ", ";\n  border-radius: 50px;\n  background-color: ", ";\n  opacity: ", ";\n  ", ";\n"])), function (props) {
+    if (props.size === "big") {
+      return "70px";
+    } else if (props.size === "small") {
+      return "56px";
+    } else if (props.size === "xsmall") {
+      return "40px";
+    } else {
+      return "70px";
+    }
+  }, function (props) {
     if (props.size === "big") {
       return "70px";
     } else if (props.size === "small") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servesall/atoms",
-  "version": "1.1.21",
+  "version": "1.1.23",
   "description": "Atoms for react-native",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",

package/src/Buttons/RoundButton/RoundButton.style.js

@@ -14,6 +14,17 @@ export const ButtonStyle = styled.Pressable`
       return "70px";
     }
   }};
+  min-width: ${(props) => {
+    if (props.size === "big") {
+      return "70px";
+    } else if (props.size === "small") {
+      return "56px";
+    } else if (props.size === "xsmall") {
+      return "40px";
+    } else {
+      return "70px";
+    }
+  }};
   border-radius: 50px;
   background-color: ${(props) => props.color};
   opacity: ${(props) => (props.active ? 1 : 0.7)};

package/src/Inputs/InputNormal/index.js

@@ -38,7 +38,9 @@ const Input = ({
   }, [isFocused]);
 
   useEffect(() => {
-    textChange(textValue);
+    if (textValue !== undefined) {
+      textChange(textValue);
+    }
   }, [textValue]);
 
   useEffect(() => {
@@ -91,8 +93,8 @@ const Input = ({
           <Placeholder
             active={
               isFocused ||
-              (textValue && textValue.length > 0) ||
-              (value && value.length > 0)
+              (textValue !== null && String(textValue).trim().length > 0) ||
+              (value !== null && String(value).trim().length > 0)
             }
           >
             <MarginHorizontal>
@@ -108,18 +110,19 @@ const Input = ({
             <Row>
               {euro &&
                 (isFocused ||
-                  (textValue && textValue.length > 0) ||
-                  (value && value.length > 0)) && (
+                  (textValue !== null && String(textValue).trim().length > 0) ||
+                  (value !== null && String(value).trim().length > 0)) && (
                   <Row style={{ minHeight: 40, alignItems: "center" }}>
                     {euro}
                   </Row>
                 )}
+
               <InputElement
                 ref={inputRef}
                 onFocus={() => setIsFocused(true)}
                 onBlur={() => setIsFocused(false)}
                 onChangeText={(text) => setTextValue(text)}
-                defaultValue={defaultValue}
+                defaultValue={defaultValue && String(defaultValue)}
                 value={value}
                 multiline={multiline}
                 numberOfLines={numberOfLines}

package/src/Layout/Box.js

@@ -1,11 +1,12 @@
 import React from "react";
 import { BoxElement } from "./Layout.style";
 
-const Box = ({ children, color = "", style, direction = false }) => {
+const Box = ({ children, color = "", style, direction = false, ...rest }) => {
   return (
     <BoxElement
       style={{ backgroundColor: color, ...style }}
       direction={direction}
+      {...rest}
     >
       {children}
     </BoxElement>

package/src/Theme/definitions/colors.js

@@ -1,57 +1,70 @@
 const colors = {
-  color1: "#FFFFFF",
-  color2: "#2d3436",
-  color3: "#74b9ff",
-  color3light: "#E1F0FF",
-  color4: "#0984e3",
-  color5: "#ffeaa7",
-  color5light: "#FFF9E5",
-  color5border: "#E4E0D2",
-  color6: "#ff7675",
-  color6light: "#FFDCDB",
-  color7: "#dfe6e9",
-  color8: "#F8F9FB",
-  color9: "#FFA15F",
-  color9light: "#F9F0EA",
-  color9dark: "#804F2D",
-  color9border: "#DDD1C9",
-  color10: "#F2F3F7",
-  color11: "#00b894",
-  color11light: "#EEFFFC",
-  color11border: "#D2E3E0",
-  color12: "#6c5ce7",
-  color12light: "#F5F4FF",
-  color12border: "#DFDDEA",
-  color12dark: "#584E74",
-  color13: "#fab1a0",
-  color14: "#00b894",
-  color15: "#00cec9",
-  color16: "#636e72",
-  color17: "#6c5ce7",
-  color18: "#81ecec",
-  darkYellow: "#fdcb6e",
-  darkYellowLight: "#FFF7E8",
-  darkYellowDark: "#8C6F39",
-  darkYellowGray: "#ECE5D8",
-  green: "#55efc4",
-  greenLight: "#F3FFFC",
-  greenDark: "#236A56",
-  greyText: "#b2bec3",
-  greyButton: "#94A3A9",
-  red: "#ff7675",
-  redlight: "#FFFAF9",
-  redDark: "#9C4140",
-  redBorder: "#D2BBBB",
-  blue: "#74b9ff",
-  blueLight: "#E1F0FF",
-  darkBlue: "#0984e3",
-  darkBlueLight: "#CFEAFF",
-  purple: "#6c5ce7",
-  purpleLight: "#F9F8FF",
-  purpleDark: "#372E78",
-  orange: "#FFA15F",
-  orangeLight: "#FFFAF6",
-  orangeDark: "#3D1901",
-  orangeGray: "#EEE5DE",
+  // Whites & Grays
+  color1: "#FFFFFF", // Pure white
+  color7: "#dfe6e9", // Light gray
+  color8: "#F8F9FB", // Very light gray
+  color10: "#F2F3F7", // Another light gray
+  color16: "#636e72", // Dark gray
+  greyText: "#b2bec3", // Gray for text
+  greyButton: "#94A3A9", // Gray for buttons
+  color2: "#2d3436", // Almost black
+
+  // Blues
+  color3: "#74b9ff", // Light blue
+  color3light: "#E1F0FF", // Very light blue
+  color4: "#0984e3", // Medium blue
+  blue: "#74b9ff", // Light blue (duplicate)
+  blueLight: "#E1F0FF", // Very light blue (duplicate)
+  darkBlue: "#0984e3", // Medium blue (duplicate)
+  darkBlueLight: "#CFEAFF", // Pale blue
+  color15: "#00cec9", // Cyan
+  color18: "#81ecec", // Light cyan
+
+  // Yellows
+  color5: "#ffeaa7", // Light yellow
+  color5light: "#FFF9E5", // Very light yellow
+  color5border: "#E4E0D2", // Yellow border
+  darkYellow: "#fdcb6e", // Dark yellow
+  darkYellowLight: "#FFF7E8", // Light yellow
+  darkYellowDark: "#8C6F39", // Brown yellow
+  darkYellowGray: "#ECE5D8", // Grayish yellow
+
+  // Oranges & Browns
+  color9: "#FFA15F", // Orange
+  color9light: "#F9F0EA", // Light orange
+  color9dark: "#804F2D", // Dark brown
+  color9border: "#DDD1C9", // Orange border
+  color13: "#fab1a0", // Peach
+  orange: "#FFA15F", // Orange (duplicate)
+  orangeLight: "#FFFAF6", // Light orange
+  orangeDark: "#3D1901", // Very dark brown
+  orangeGray: "#EEE5DE", // Grayish orange
+
+  // Reds
+  color6: "#ff7675", // Red
+  color6light: "#FFDCDB", // Light red
+  red: "#ff7675", // Red (duplicate)
+  redlight: "#fff0ed", // Very light red
+  redDark: "#9C4140", // Dark red
+  redBorder: "#D2BBBB", // Red border
+
+  // Greens
+  color11: "#00b894", // Green
+  color11light: "#EEFFFC", // Light green
+  color11border: "#D2E3E0", // Green border
+  color14: "#00b894", // Green (duplicate)
+  green: "#55efc4", // Light green
+  greenLight: "#F3FFFC", // Very light green
+  greenDark: "#236A56", // Dark green
+
+  // Purples
+  color12: "#6c5ce7", // Purple
+  color12light: "#F5F4FF", // Light purple
+  color12border: "#DFDDEA", // Purple border
+  color12dark: "#584E74", // Dark purple
+  color17: "#6c5ce7", // Purple (duplicate)
+  purple: "#6c5ce7", // Purple (duplicate)
+  purpleLight: "#F9F8FF", // Light purple
+  purpleDark: "#372E78", // Dark purple
 };
 export default colors;