@hero-design/rn 8.106.1-alpha.0 → 8.107.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:4180) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3307) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -15,9 +15,9 @@ node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/sr
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 1m 11s
+created lib/index.js, es/index.js in 1m 10.5s
 
 /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_AU.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_CA.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/index.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/types.ts → ., ....
 (!) Generated empty chunks
 "locales/types" and "locales/types"
-created ., . in 20.9s
+created ., . in 20.4s

package/CHANGELOG.md

@@ -1,17 +1,25 @@
 # @hero-design/rn
 
-## 8.106.1-alpha.0
+## 8.107.0
+
+### Minor Changes
+
+- [#4197](https://github.com/Thinkei/hero-design/pull/4197) [`d706fb127368ac597b0c8b1517650e64e39734ba`](https://github.com/Thinkei/hero-design/commit/d706fb127368ac597b0c8b1517650e64e39734ba) Thanks [@ttkien](https://github.com/ttkien)! - [Card.Data] add DataCardContent and update examples
+
+- [#4200](https://github.com/Thinkei/hero-design/pull/4200) [`a2f2b9db429029f263278100365417e9b300d219`](https://github.com/Thinkei/hero-design/commit/a2f2b9db429029f263278100365417e9b300d219) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Illustration] Add component
 
 ### Patch Changes
 
-- [#3497](https://github.com/Thinkei/hero-design/pull/3497) [`e92d1dab57316441e7b5054debe823328e1a1083`](https://github.com/Thinkei/hero-design/commit/e92d1dab57316441e7b5054debe823328e1a1083) Thanks [@luanlai2201](https://github.com/luanlai2201)! - [Font] replace playful font to Saiga
+- [#4193](https://github.com/Thinkei/hero-design/pull/4193) [`84aabf6b98f5753616a8376ad5e5be4667d6dcb0`](https://github.com/Thinkei/hero-design/commit/84aabf6b98f5753616a8376ad5e5be4667d6dcb0) Thanks [@ttkien](https://github.com/ttkien)! - [TextInput] Update colors support dark mode
 
-- [#4185](https://github.com/Thinkei/hero-design/pull/4185) [`353896c59f62ba7230365d8ba59e07edefc0ded2`](https://github.com/Thinkei/hero-design/commit/353896c59f62ba7230365d8ba59e07edefc0ded2) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Avatar] Use mobileAvatarPalette for avatar hook
+## 8.106.1
+
+### Patch Changes
 
-- [#4123](https://github.com/Thinkei/hero-design/pull/4123) [`ecc5905dec81783858f57595a0af4306ff3b0b89`](https://github.com/Thinkei/hero-design/commit/ecc5905dec81783858f57595a0af4306ff3b0b89) Thanks [@truongnguyen-eh](https://github.com/truongnguyen-eh)! - [ANG-3740] Resolve conflict between alpha and master-react-18
+- [#4185](https://github.com/Thinkei/hero-design/pull/4185) [`353896c59f62ba7230365d8ba59e07edefc0ded2`](https://github.com/Thinkei/hero-design/commit/353896c59f62ba7230365d8ba59e07edefc0ded2) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Avatar] Use mobileAvatarPalette for avatar hook
 
 - Updated dependencies [[`353896c59f62ba7230365d8ba59e07edefc0ded2`](https://github.com/Thinkei/hero-design/commit/353896c59f62ba7230365d8ba59e07edefc0ded2)]:
-  - @hero-design/colors@8.46.2-alpha.0
+  - @hero-design/colors@8.46.2
 
 ## 8.106.0
 

package/es/index.js

@@ -5921,10 +5921,14 @@ var getCardTheme = function getCardTheme(theme) {
     "default": theme.radii.large,
     superRound: theme.radii.xxxlarge
   };
+  var space = {
+    dataCardContentPadding: theme.space.medium
+  };
   return {
     colors: colors,
     sizes: sizes,
-    radii: radii
+    radii: radii,
+    space: space
   };
 };
 
@@ -6947,7 +6951,7 @@ var getTextInputTheme = function getTextInputTheme(theme) {
       "default": theme.colors.onDefaultGlobalSurface,
       error: theme.colors.onDefaultGlobalSurface,
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
-      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      readonly: theme.colors.mutedOnDefaultGlobalSurface,
       filled: theme.colors.onDefaultGlobalSurface
     },
     labelsInsideTextInput: {
@@ -6964,7 +6968,13 @@ var getTextInputTheme = function getTextInputTheme(theme) {
       readonly: theme.colors.inactiveOnDefaultGlobalSurface,
       filled: theme.colors.onDefaultGlobalSurface
     },
-    placeholder: theme.colors.mutedOnDefaultGlobalSurface
+    placeholder: {
+      "default": theme.colors.onDefaultGlobalSurface,
+      error: theme.colors.onDefaultGlobalSurface,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.onDefaultGlobalSurface,
+      filled: theme.colors.onDefaultGlobalSurface
+    }
   };
   var space = {
     containerPadding: theme.space.medium,
@@ -6974,6 +6984,7 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,
     errorContainerMarginRight: theme.space.xsmall,
+    errorAndHelpTextContainerMarginTop: theme.space.xxsmall,
     errorMarginLeft: theme.space.xsmall,
     errorAndHelpTextContainerHorizontalPadding: theme.space.medium,
     containerMarginTop: theme.space.small,
@@ -14172,9 +14183,16 @@ var StyledDataCard = index$c(View)(function (_ref) {
     backgroundColor: theme.__hd__.card.colors.dataCardBackground
   };
 });
-var Indicator = index$c(View)(function (_ref2) {
-  var theme = _ref2.theme,
-    themeIntent = _ref2.themeIntent;
+var StyledDataCardContent = index$c(View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    backgroundColor: 'transparent',
+    padding: theme.__hd__.card.space.dataCardContentPadding
+  };
+});
+var Indicator = index$c(View)(function (_ref3) {
+  var theme = _ref3.theme,
+    themeIntent = _ref3.themeIntent;
   return {
     backgroundColor: theme.__hd__.card.colors[themeIntent],
     width: theme.__hd__.card.sizes.indicatorWidth,
@@ -14219,7 +14237,8 @@ var Card = function Card(_ref) {
   }), children);
 };
 var Card$1 = Object.assign(Card, {
-  Data: DataCard
+  Data: DataCard,
+  DataContent: StyledDataCardContent
 });
 
 var StyledPageControl$2 = index$c(View)(function () {
@@ -20297,11 +20316,13 @@ var StyledErrorAndHelpTextContainer = index$c(View)(function (_ref11) {
     paddingTop: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingTop
   };
 });
-var StyledErrorAndMaxLengthContainer = index$c(View)(function () {
+var StyledErrorAndMaxLengthContainer = index$c(View)(function (_ref12) {
+  var theme = _ref12.theme;
   return {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'flex-start'
+    alignItems: 'flex-start',
+    marginTop: theme.__hd__.textInput.space.errorAndHelpTextContainerMarginTop
   };
 });
 
@@ -20347,7 +20368,8 @@ var renderInput$1 = function renderInput(_ref3) {
     nativeInputProps = _ref3.nativeInputProps,
     renderInputValue = _ref3.renderInputValue,
     ref = _ref3.ref,
-    theme = _ref3.theme;
+    theme = _ref3.theme,
+    state = _ref3.state;
   var multiline = variant === 'textarea' || nativeInputProps.multiline;
   // `numberOfLines` must be `1` for single-line inputs to render properly on Android.
   var numberOfLines = multiline ? nativeInputProps.numberOfLines : 1;
@@ -20356,7 +20378,7 @@ var renderInput$1 = function renderInput(_ref3) {
     multiline: multiline,
     numberOfLines: numberOfLines,
     ref: ref,
-    placeholderTextColor: theme.__hd__.textInput.colors.placeholder
+    placeholderTextColor: theme.__hd__.textInput.colors.placeholder[state]
   }));
 };
 var renderSuffix$1 = function renderSuffix(_ref4) {
@@ -20618,7 +20640,8 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;
     },
-    theme: theme
+    theme: theme,
+    state: state
   })), renderSuffix$1({
     state: state,
     loading: loading,
@@ -21527,14 +21550,34 @@ var index$7 = Object.assign(Drawer, {
   Dragable: DragableDrawer
 });
 
+var DEFAULT_ILLUSTRATION_SIZE = scale(72);
+
+var BaseSvg = function BaseSvg(_ref) {
+  var children = _ref.children,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? DEFAULT_ILLUSTRATION_SIZE : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? DEFAULT_ILLUSTRATION_SIZE : _ref$height,
+    viewBox = _ref.viewBox,
+    testID = _ref.testID;
+  var defaultViewBox = viewBox || "0 0 ".concat(DEFAULT_ILLUSTRATION_SIZE, " ").concat(DEFAULT_ILLUSTRATION_SIZE);
+  return /*#__PURE__*/React__default.createElement(Svg, {
+    width: width,
+    height: height,
+    viewBox: defaultViewBox,
+    testID: testID
+  }, children);
+};
+
 var Add = function Add(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "73",
-    height: "72",
-    viewBox: "0 0 73 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Rect, {
     x: "0.100098",
@@ -21575,11 +21618,12 @@ var Add = function Add(_ref) {
 var Boom = function Boom(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: 74,
-    height: 79,
-    viewBox: "0 0 74 79",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Path$1, {
     d: "M17.762 51.247v12.16L2.996 41.693v-3.91l2.172-2.17h3.474l-.868-2.172-1.738-6.515 2.606-2.605 2.606-2.172-.434-6.514 4.343-1.303 3.908 1.303 3.475-2.606h4.343l6.514 9.989h-5.646c-3.33 9.265-9.989 27.882-9.989 28.229z",
@@ -21631,11 +21675,12 @@ var Boom = function Boom(_ref) {
 var Build = function Build(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "73",
-    height: "72",
-    viewBox: "0 0 73 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Rect, {
     x: "0.615723",
@@ -21672,11 +21717,12 @@ var Build = function Build(_ref) {
 var Clock = function Clock(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "73",
-    height: "73",
-    viewBox: "0 0 73 73",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Rect, {
     x: "0.384277",
@@ -21706,17 +21752,18 @@ var Clock = function Clock(_ref) {
 var Confetti = function Confetti(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "73",
-    height: "72",
-    viewBox: "0 0 73 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Defs, null, /*#__PURE__*/React__default.createElement(ClipPath, {
     id: "clip0_19647_1699"
   }, /*#__PURE__*/React__default.createElement(Rect, {
-    width: "72",
-    height: "72",
+    width: width,
+    height: height,
     fill: "white",
     transform: "translate(0.100098)"
   }))), /*#__PURE__*/React__default.createElement(G, {
@@ -21773,11 +21820,12 @@ var Confetti = function Confetti(_ref) {
 var Connections = function Connections(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "72",
-    height: "73",
-    viewBox: "0 0 72 73",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Rect, {
     y: "12.2122",
@@ -21820,17 +21868,18 @@ var Connections = function Connections(_ref) {
 var ErrorIcon = function ErrorIcon(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "72",
-    height: "72",
-    viewBox: "0 0 72 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Defs, null, /*#__PURE__*/React__default.createElement(ClipPath, {
     id: "clip0_19647_1720"
   }, /*#__PURE__*/React__default.createElement(Rect, {
-    width: "71.6316",
-    height: "72",
+    width: width,
+    height: height,
     fill: "white"
   }))), /*#__PURE__*/React__default.createElement(Rect, {
     y: "11.3684",
@@ -21872,11 +21921,12 @@ var ErrorIcon = function ErrorIcon(_ref) {
 var Info = function Info(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "73",
-    height: "72",
-    viewBox: "0 0 73 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Rect, {
     x: "0.799805",
@@ -21904,11 +21954,12 @@ var Info = function Info(_ref) {
 var List = function List(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "73",
-    height: "72",
-    viewBox: "0 0 73 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Rect, {
     x: "0.199951",
@@ -21938,11 +21989,12 @@ var List = function List(_ref) {
 var Location = function Location(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "73",
-    height: "73",
-    viewBox: "0 0 73 73",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Rect, {
     x: "0.615723",
@@ -21972,11 +22024,12 @@ var Location = function Location(_ref) {
 var Merge = function Merge(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "73",
-    height: "73",
-    viewBox: "0 0 73 73",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Rect, {
     x: "0.100098",
@@ -22026,11 +22079,12 @@ var Merge = function Merge(_ref) {
 var Notifications = function Notifications(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "72",
-    height: "73",
-    viewBox: "0 0 72 73",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Rect, {
     y: "12.3684",
@@ -22050,11 +22104,12 @@ var Notifications = function Notifications(_ref) {
 var Search$1 = function Search(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "72",
-    height: "72",
-    viewBox: "0 0 72 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Rect, {
     y: "11.3684",
@@ -22083,11 +22138,12 @@ var Search$1 = function Search(_ref) {
 var Star = function Star(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "73",
-    height: "73",
-    viewBox: "0 0 73 73",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Rect, {
     x: "0.199951",
@@ -22117,11 +22173,12 @@ var Star = function Star(_ref) {
 var User = function User(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "73",
-    height: "72",
-    viewBox: "0 0 73 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Rect, {
     x: "0.799805",
@@ -22156,17 +22213,18 @@ var User = function User(_ref) {
 var Success$1 = function Success(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "72",
-    height: "72",
-    viewBox: "0 0 72 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(Defs, null, /*#__PURE__*/React__default.createElement(ClipPath, {
     id: "clip0_19647_1726"
   }, /*#__PURE__*/React__default.createElement(Rect, {
-    width: "71.6316",
-    height: "72",
+    width: width,
+    height: height,
     fill: "white"
   }))), /*#__PURE__*/React__default.createElement(Rect, {
     y: "11.3684",
@@ -22195,11 +22253,12 @@ var Success$1 = function Success(_ref) {
 var Lock = function Lock(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "72",
-    height: "72",
-    viewBox: "0 0 72 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(G, {
     clipPath: "url(#clip0_21932_5671)"
@@ -22223,11 +22282,12 @@ var Lock = function Lock(_ref) {
 var Unlock = function Unlock(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "72",
-    height: "72",
-    viewBox: "0 0 72 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(G, {
     clipPath: "url(#clip0_21932_5714)"
@@ -22251,11 +22311,12 @@ var Unlock = function Unlock(_ref) {
 var NoResult = function NoResult(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(Svg, {
-    width: "72",
-    height: "72",
-    viewBox: "0 0 72 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(G, {
     clipPath: "url(#clip0_21888_4920)"
@@ -22279,7 +22340,7 @@ var NoResult = function NoResult(_ref) {
   }))));
 };
 
-var StatusIcons = {
+var Illustrations = {
   add: Add,
   boom: Boom,
   build: Build,
@@ -22300,16 +22361,32 @@ var StatusIcons = {
   unlock: Unlock,
   'no-result': NoResult
 };
-var StatusIcon = function StatusIcon(_ref) {
-  var icon = _ref.icon,
-    testID = _ref.testID;
-  var Icon = StatusIcons[icon];
+var IllustrationList = Object.keys(Illustrations);
+
+var Illustration = function Illustration(_ref) {
+  var name = _ref.name,
+    testID = _ref.testID,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? DEFAULT_ILLUSTRATION_SIZE : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? DEFAULT_ILLUSTRATION_SIZE : _ref$height,
+    style = _ref.style;
+  var IllustrationComponent = Illustrations[name];
   var theme = useTheme();
-  return Icon && /*#__PURE__*/React__default.createElement(Icon, {
-    stroke: theme.colors.primary,
-    fill: theme.colors.decorativeSecondarySurface,
+  var defaultStroke = theme.colors.primary;
+  var defaultFill = theme.colors.decorativeSecondarySurface;
+  if (!IllustrationComponent) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(Box, {
+    style: style
+  }, /*#__PURE__*/React__default.createElement(IllustrationComponent, {
+    stroke: defaultStroke,
+    fill: defaultFill,
+    width: width,
+    height: height,
     testID: testID
-  });
+  }));
 };
 
 var StyledWrapper$7 = index$c(View)(function (_ref) {
@@ -22351,8 +22428,8 @@ var renderImageOrIcon$2 = function renderImageOrIcon(_ref) {
   var image = _ref.image,
     icon = _ref.icon;
   if (icon) {
-    return /*#__PURE__*/React__default.createElement(StyledEmptyImageContainer, null, /*#__PURE__*/React__default.createElement(StatusIcon, {
-      icon: icon,
+    return /*#__PURE__*/React__default.createElement(StyledEmptyImageContainer, null, /*#__PURE__*/React__default.createElement(Illustration, {
+      name: icon,
       testID: "empty-icon"
     }));
   }
@@ -22825,8 +22902,8 @@ var renderImageOrIcon$1 = function renderImageOrIcon(_ref) {
   var image = _ref.image,
     icon = _ref.icon;
   if (icon) {
-    return /*#__PURE__*/React__default.createElement(StyledErrorIconContainer, null, /*#__PURE__*/React__default.createElement(StatusIcon, {
-      icon: icon,
+    return /*#__PURE__*/React__default.createElement(StyledErrorIconContainer, null, /*#__PURE__*/React__default.createElement(Illustration, {
+      name: icon,
       testID: "error-icon"
     }));
   }
@@ -26139,8 +26216,8 @@ var renderImageOrIcon = function renderImageOrIcon(_ref) {
   var image = _ref.image,
     icon = _ref.icon;
   if (icon) {
-    return /*#__PURE__*/React__default.createElement(StyledSuccessIconContainer, null, /*#__PURE__*/React__default.createElement(StatusIcon, {
-      icon: icon,
+    return /*#__PURE__*/React__default.createElement(StyledSuccessIconContainer, null, /*#__PURE__*/React__default.createElement(Illustration, {
+      name: icon,
       testID: "success-icon"
     }));
   }
@@ -47456,7 +47533,7 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
       value: value,
       defaultValue: defaultValue,
       placeholder: placeholder,
-      placeholderTextColor: theme.__hd__.textInput.colors.placeholder
+      placeholderTextColor: theme.__hd__.textInput.colors.placeholder[state]
     }),
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;
@@ -47880,4 +47957,4 @@ var FilterTrigger = function FilterTrigger(_ref) {
   })));
 };
 
-export { Accordion, Alert, AppCue, Attachment, index$b as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar$1 as Calendar, Card$1 as Card, index$a as Carousel, Chart, index$9 as Checkbox, Chip, Collapse, ContentNavigator, index$8 as DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FilterTrigger, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List$1 as List, LocaleProvider, index$6 as MapPin, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, SegmentedControl, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, PublicTimePicker as TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, ehJobsSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, getTheme, jobsSystemPalette, scale, index$c as styled, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette$1 as swagLightSystemPalette, swagSystemPalette$2 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+export { Accordion, Alert, AppCue, Attachment, index$b as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar$1 as Calendar, Card$1 as Card, index$a as Carousel, Chart, index$9 as Checkbox, Chip, Collapse, ContentNavigator, index$8 as DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FilterTrigger, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Illustration, IllustrationList, Image, List$1 as List, LocaleProvider, index$6 as MapPin, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, SegmentedControl, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, PublicTimePicker as TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, ehJobsSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, getTheme, jobsSystemPalette, scale, index$c as styled, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette$1 as swagLightSystemPalette, swagSystemPalette$2 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };