@instructure/ui-billboard 8.14.0 → 8.14.1-snapshot.7

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 Instructure, Inc.
+
+**Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions.**
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/es/Billboard/index.js

@@ -38,6 +38,7 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Billboard extends Component {
   constructor() {
@@ -68,19 +69,23 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props2;
+
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props3;
+
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
 
   renderHeading() {
-    const _this$props2 = this.props,
-          headingLevel = _this$props2.headingLevel,
-          headingAs = _this$props2.headingAs,
-          heading = _this$props2.heading,
-          styles = _this$props2.styles;
+    const _this$props4 = this.props,
+          headingLevel = _this$props4.headingLevel,
+          headingAs = _this$props4.headingAs,
+          heading = _this$props4.heading,
+          styles = _this$props4.styles;
     return jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.heading
     }, jsx(Heading, {
@@ -90,10 +95,6 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
     }, heading));
   }
 
-  get heroIsFunction() {
-    return typeof this.props.hero === 'function';
-  }
-
   get SVGIconSize() {
     const size = this.props.size; // serve up appropriate SVGIcon size for each Billboard size
 
@@ -107,7 +108,7 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
   }
 
   renderHero() {
-    if (this.heroIsFunction) {
+    if (typeof this.props.hero === 'function') {
       return this.props.hero(this.SVGIconSize);
     } else {
       return this.props.hero;
@@ -115,11 +116,11 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
   }
 
   renderContent() {
-    const _this$props3 = this.props,
-          heading = _this$props3.heading,
-          message = _this$props3.message,
-          hero = _this$props3.hero,
-          styles = _this$props3.styles;
+    const _this$props5 = this.props,
+          heading = _this$props5.heading,
+          message = _this$props5.message,
+          hero = _this$props5.hero,
+          styles = _this$props5.styles;
     return jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.content
     }, hero && jsx("span", {
@@ -130,12 +131,12 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
   }
 
   render() {
-    const _this$props4 = this.props,
-          href = _this$props4.href,
-          disabled = _this$props4.disabled,
-          readOnly = _this$props4.readOnly,
-          margin = _this$props4.margin,
-          styles = _this$props4.styles;
+    const _this$props6 = this.props,
+          href = _this$props6.href,
+          disabled = _this$props6.disabled,
+          readOnly = _this$props6.readOnly,
+          margin = _this$props6.margin,
+          styles = _this$props6.styles;
     const Element = getElementType(Billboard, this.props);
     return jsx(View, {
       as: "div",

package/es/Billboard/props.js

@@ -24,75 +24,18 @@
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
-  /**
-   * Provide an <Img> component or Instructure Icon for the hero image
-   */
   hero: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-
-  /**
-   * If you're using an icon, this prop will size it. Also sets the font-size
-   * of the headline and message.
-   */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * the element type to render as
-   */
   as: PropTypes.elementType,
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func,
-
-  /**
-   * The headline for the Billboard. Is styled as an h1 element by default
-   */
   heading: PropTypes.string,
-
-  /**
-   * Choose the appropriately semantic tag for the heading
-   */
   headingAs: PropTypes.oneOf(['h1', 'h2', 'h3', 'span']),
-
-  /**
-   * Choose the font-size for the heading (see the Heading component)
-   */
   headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4']),
-
-  /**
-   * Instructions or information for the Billboard. Note: you should not pass
-   * interactive content to this prop if you are also providing an `href` or
-   * `onClick`. That would cause the Billboard to render as a button or link
-   * and would result in nested interactive content.
-   */
   message: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * If you add an onClick prop, the Billboard renders as a clickable button
-   */
   onClick: PropTypes.func,
-
-  /**
-   * If `href` is provided, Billboard will render as a link
-   */
   href: PropTypes.string,
-
-  /**
-   * Whether or not to disable the billboard
-   */
   disabled: PropTypes.bool,
-
-  /**
-   * Works just like disabled but keeps the same styles as if it were active
-   */
   readOnly: PropTypes.bool,
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing
 };
 const allowedProps = ['hero', 'size', 'as', 'elementRef', 'heading', 'headingAs', 'headingLevel', 'message', 'onClick', 'href', 'disabled', 'readOnly', 'margin'];

package/lib/Billboard/index.js

@@ -33,6 +33,7 @@ var _dec, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let Billboard = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Billboard extends _react.Component {
   constructor() {
@@ -63,19 +64,23 @@ let Billboard = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props2;
+
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props3;
+
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
 
   renderHeading() {
-    const _this$props2 = this.props,
-          headingLevel = _this$props2.headingLevel,
-          headingAs = _this$props2.headingAs,
-          heading = _this$props2.heading,
-          styles = _this$props2.styles;
+    const _this$props4 = this.props,
+          headingLevel = _this$props4.headingLevel,
+          headingAs = _this$props4.headingAs,
+          heading = _this$props4.heading,
+          styles = _this$props4.styles;
     return (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.heading
     }, (0, _emotion.jsx)(_Heading.Heading, {
@@ -85,10 +90,6 @@ let Billboard = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
     }, heading));
   }
 
-  get heroIsFunction() {
-    return typeof this.props.hero === 'function';
-  }
-
   get SVGIconSize() {
     const size = this.props.size; // serve up appropriate SVGIcon size for each Billboard size
 
@@ -102,7 +103,7 @@ let Billboard = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   }
 
   renderHero() {
-    if (this.heroIsFunction) {
+    if (typeof this.props.hero === 'function') {
       return this.props.hero(this.SVGIconSize);
     } else {
       return this.props.hero;
@@ -110,11 +111,11 @@ let Billboard = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   }
 
   renderContent() {
-    const _this$props3 = this.props,
-          heading = _this$props3.heading,
-          message = _this$props3.message,
-          hero = _this$props3.hero,
-          styles = _this$props3.styles;
+    const _this$props5 = this.props,
+          heading = _this$props5.heading,
+          message = _this$props5.message,
+          hero = _this$props5.hero,
+          styles = _this$props5.styles;
     return (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.content
     }, hero && (0, _emotion.jsx)("span", {
@@ -125,12 +126,12 @@ let Billboard = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   }
 
   render() {
-    const _this$props4 = this.props,
-          href = _this$props4.href,
-          disabled = _this$props4.disabled,
-          readOnly = _this$props4.readOnly,
-          margin = _this$props4.margin,
-          styles = _this$props4.styles;
+    const _this$props6 = this.props,
+          href = _this$props6.href,
+          disabled = _this$props6.disabled,
+          readOnly = _this$props6.readOnly,
+          margin = _this$props6.margin,
+          styles = _this$props6.styles;
     const Element = (0, _getElementType.getElementType)(Billboard, this.props);
     return (0, _emotion.jsx)(_View.View, {
       as: "div",

package/lib/Billboard/props.js

@@ -35,75 +35,18 @@ var _emotion = require("@instructure/emotion");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * Provide an <Img> component or Instructure Icon for the hero image
-   */
   hero: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
-
-  /**
-   * If you're using an icon, this prop will size it. Also sets the font-size
-   * of the headline and message.
-   */
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * the element type to render as
-   */
   as: _propTypes.default.elementType,
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: _propTypes.default.func,
-
-  /**
-   * The headline for the Billboard. Is styled as an h1 element by default
-   */
   heading: _propTypes.default.string,
-
-  /**
-   * Choose the appropriately semantic tag for the heading
-   */
   headingAs: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'span']),
-
-  /**
-   * Choose the font-size for the heading (see the Heading component)
-   */
   headingLevel: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4']),
-
-  /**
-   * Instructions or information for the Billboard. Note: you should not pass
-   * interactive content to this prop if you are also providing an `href` or
-   * `onClick`. That would cause the Billboard to render as a button or link
-   * and would result in nested interactive content.
-   */
   message: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * If you add an onClick prop, the Billboard renders as a clickable button
-   */
   onClick: _propTypes.default.func,
-
-  /**
-   * If `href` is provided, Billboard will render as a link
-   */
   href: _propTypes.default.string,
-
-  /**
-   * Whether or not to disable the billboard
-   */
   disabled: _propTypes.default.bool,
-
-  /**
-   * Works just like disabled but keeps the same styles as if it were active
-   */
   readOnly: _propTypes.default.bool,
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: _emotion.ThemeablePropTypes.spacing
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-billboard",
-  "version": "8.14.0",
+  "version": "8.14.1-snapshot.7+845d7ec6c",
   "description": "A UI component to display empty states, 404 pages, redirects, etc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,20 +24,20 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.14.0",
-    "@instructure/ui-color-utils": "8.14.0",
-    "@instructure/ui-icons": "8.14.0",
-    "@instructure/ui-test-utils": "8.14.0",
-    "@instructure/ui-themes": "8.14.0"
+    "@instructure/ui-babel-preset": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-color-utils": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-icons": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-test-utils": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-themes": "8.14.1-snapshot.7+845d7ec6c"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.14.0",
-    "@instructure/shared-types": "8.14.0",
-    "@instructure/ui-heading": "8.14.0",
-    "@instructure/ui-img": "8.14.0",
-    "@instructure/ui-react-utils": "8.14.0",
-    "@instructure/ui-view": "8.14.0",
+    "@instructure/emotion": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/shared-types": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-heading": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-img": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-react-utils": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-view": "8.14.1-snapshot.7+845d7ec6c",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -46,5 +46,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "845d7ec6c159d8946b22caa9d8fb3d0175167a6f"
 }

package/src/Billboard/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component } from 'react'
+import { Component, MouseEvent } from 'react'
 
 import { Heading } from '@instructure/ui-heading'
 import { View } from '@instructure/ui-view'
@@ -39,12 +39,14 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
 import { propTypes, allowedProps } from './props'
-import type { BillboardProps } from './props'
+import type { BillboardProps, HeroIconSize } from './props'
+import type { ViewProps } from '@instructure/ui-view'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class Billboard extends Component<BillboardProps> {
@@ -75,14 +77,11 @@ class Billboard extends Component<BillboardProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   renderHeading() {
@@ -97,11 +96,7 @@ class Billboard extends Component<BillboardProps> {
     )
   }
 
-  get heroIsFunction() {
-    return typeof this.props.hero === 'function'
-  }
-
-  get SVGIconSize() {
+  get SVGIconSize(): HeroIconSize {
     const size = this.props.size
 
     // serve up appropriate SVGIcon size for each Billboard size
@@ -115,8 +110,7 @@ class Billboard extends Component<BillboardProps> {
   }
 
   renderHero() {
-    if (this.heroIsFunction) {
-      // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
+    if (typeof this.props.hero === 'function') {
       return this.props.hero(this.SVGIconSize)
     } else {
       return this.props.hero
@@ -137,8 +131,7 @@ class Billboard extends Component<BillboardProps> {
     )
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleClick = (e) => {
+  handleClick = (e: MouseEvent<ViewProps>): void => {
     const { readOnly, onClick } = this.props
 
     if (readOnly) {

package/src/Billboard/props.ts

@@ -37,93 +37,95 @@ import type {
   OtherHTMLAttributes,
   PropValidators
 } from '@instructure/shared-types'
-
+import type { ViewProps } from '@instructure/ui-view'
+import React, { MouseEvent } from 'react'
+type HeroIconSize = 'medium' | 'x-large' | 'large'
 type BillboardOwnProps = {
-  hero?: React.ReactElement | ((...args: any[]) => any)
-  size?: 'small' | 'medium' | 'large'
-  as?: AsElementType
-  elementRef?: (element: Element | null) => void
-  heading?: string
-  headingAs?: 'h1' | 'h2' | 'h3' | 'span'
-  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4'
-  message?: React.ReactNode | ((...args: any[]) => any)
-  onClick?: (...args: any[]) => any
-  href?: string
-  disabled?: boolean
-  readOnly?: boolean
-  margin?: Spacing
-}
-
-type PropKeys = keyof BillboardOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type BillboardProps = BillboardOwnProps &
-  WithStyleProps<BillboardTheme, BillboardStyle> &
-  OtherHTMLAttributes<BillboardOwnProps>
-
-type BillboardStyle = ComponentStyle<
-  'billboard' | 'content' | 'hero' | 'heading' | 'message'
->
-
-const propTypes: PropValidators<PropKeys> = {
   /**
    * Provide an <Img> component or Instructure Icon for the hero image
    */
-  hero: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  hero?: React.ReactElement | ((iconSize: HeroIconSize) => React.ReactElement)
   /**
    * If you're using an icon, this prop will size it. Also sets the font-size
    * of the headline and message.
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size?: 'small' | 'medium' | 'large'
   /**
    * the element type to render as
    */
-  as: PropTypes.elementType,
+  as?: AsElementType
   /**
    * provides a reference to the underlying html root element
    */
-  elementRef: PropTypes.func,
+  elementRef?: (element: Element | null) => void
   /**
    * The headline for the Billboard. Is styled as an h1 element by default
    */
-  heading: PropTypes.string,
+  heading?: string
   /**
    * Choose the appropriately semantic tag for the heading
    */
-  headingAs: PropTypes.oneOf(['h1', 'h2', 'h3', 'span']),
+  headingAs?: 'h1' | 'h2' | 'h3' | 'span'
   /**
    * Choose the font-size for the heading (see the Heading component)
    */
-  headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4']),
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4'
   /**
    * Instructions or information for the Billboard. Note: you should not pass
    * interactive content to this prop if you are also providing an `href` or
    * `onClick`. That would cause the Billboard to render as a button or link
    * and would result in nested interactive content.
    */
-  message: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  message?: React.ReactNode | (() => React.ReactNode)
   /**
    * If you add an onClick prop, the Billboard renders as a clickable button
    */
-  onClick: PropTypes.func,
+  onClick?: (e: MouseEvent<ViewProps>) => void
   /**
    * If `href` is provided, Billboard will render as a link
    */
-  href: PropTypes.string,
+  href?: string
   /**
    * Whether or not to disable the billboard
    */
-  disabled: PropTypes.bool,
+  disabled?: boolean
   /**
    * Works just like disabled but keeps the same styles as if it were active
    */
-  readOnly: PropTypes.bool,
+  readOnly?: boolean
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `margin="small auto large"`.
    */
+  margin?: Spacing
+}
+
+type PropKeys = keyof BillboardOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type BillboardProps = BillboardOwnProps &
+  WithStyleProps<BillboardTheme, BillboardStyle> &
+  OtherHTMLAttributes<BillboardOwnProps>
+
+type BillboardStyle = ComponentStyle<
+  'billboard' | 'content' | 'hero' | 'heading' | 'message'
+>
+
+const propTypes: PropValidators<PropKeys> = {
+  hero: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  as: PropTypes.elementType,
+  elementRef: PropTypes.func,
+  heading: PropTypes.string,
+  headingAs: PropTypes.oneOf(['h1', 'h2', 'h3', 'span']),
+  headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4']),
+  message: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  onClick: PropTypes.func,
+  href: PropTypes.string,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
   margin: ThemeablePropTypes.spacing
 }
 
@@ -143,5 +145,5 @@ const allowedProps: AllowedPropKeys = [
   'margin'
 ]
 
-export type { BillboardProps, BillboardStyle }
+export type { BillboardProps, BillboardStyle, HeroIconSize }
 export { propTypes, allowedProps }