fix(types): fix types for props in icon and layout

Author: chrisrzhou

lib/components/icon.js

@@ -13,7 +13,7 @@ export {Icon};
  * @typedef {import('../types.js').Styles} Styles
  *
  * @typedef IconProps
- * @property {string} [color='currentColor']
+ * @property {ResponsiveStyleValue} [color='currentColor']
  *    Sets the icon SVG container's `color`.  You can use a theme-based value.
  *    If an icon SVG is using `'currentColor'` for appropriate color attributes
  *    (e.g. `stroke`, `fill`), the `Icon will apply the specified color to the

lib/components/layout.js

@@ -16,18 +16,18 @@ export {Layout};
  * @property {string|CustomElement} [as="div"]
  *    Renders `Layout` as the specified HTML element or `CustomElement`.
  *    Renders as a `HTMLDivElement` by default.
- * @property {string} [direction]
+ * @property {ResponsiveStyleValue} [direction]
  *    Sets the `flexDirection` CSS property.
  * @property {boolean} [inline]
  *    If `true`, sets the `display` CSS property to `'inline-flex'`, otherwise
  *    sets to `'flex'` by default.
- * @property {string} [spacing]
+ * @property {ResponsiveStyleValue} [spacing]
  *    Spaces all children (except the last child) evenly by the specified
  *    margin value.  You can use a theme-based value.
  * @property {boolean} [wrap]
  *    If `true`, sets the `flexWrap` CSS property to `'wrap'`, otherwise it is
  *    set to `undefined` by default.
- * @property {string} [wrapSpacing]
+ * @property {ResponsiveStyleValue} [wrapSpacing]
  *    If `props.wrap` is set to `true`, you may space all wrapped children with
  *    the specified vertical margin value.  A negative margin is applied on the
  *    `Layout` element.  You can use a theme-based value.