@telus-uds/components-web 4.19.0 → 5.0.0-alpha.0

package/src/shared/FullBleedContent/FullBleedContent.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import ResponsiveImage from '../../ResponsiveImage'
+import { ResponsiveImage } from '../../ResponsiveImage/ResponsiveImage'
 
 // Interactive overlay opacity constants
 const OVERLAY_OPACITY_PRESSED = 0.2
@@ -36,22 +36,22 @@ const selectFullBleedContentProps = ({
 
 const FullBleedContentContainer = styled.div(
   ({
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    opacity,
-    transform,
-    hasCardState
+    $borderBottomLeftRadius,
+    $borderBottomRightRadius,
+    $borderTopLeftRadius,
+    $borderTopRightRadius,
+    $opacity,
+    $transform,
+    $hasCardState
   }) => ({
-    position: hasCardState ? 'relative' : 'static',
+    position: $hasCardState ? 'relative' : 'static',
     overflow: 'hidden',
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    opacity,
-    transform,
+    borderBottomLeftRadius: $borderBottomLeftRadius,
+    borderBottomRightRadius: $borderBottomRightRadius,
+    borderTopLeftRadius: $borderTopLeftRadius,
+    borderTopRightRadius: $borderTopRightRadius,
+    opacity: $opacity,
+    transform: $transform,
     transition: 'opacity 0.2s ease, transform 0.2s ease'
   })
 )
@@ -74,7 +74,7 @@ const InteractiveOverlay = styled.div(({ overlayOpacity, overlayBackgroundColor
  * a number of sources corresponding to the `ResponsiveImage` component API,
  * or a custom component.
  */
-const FullBleedContent = ({ borderRadius, content, cardState, ...rest }) => {
+export const FullBleedContent = ({ borderRadius, content, cardState, ...rest }) => {
   let overlayOpacity = OVERLAY_OPACITY_DEFAULT
   if (cardState) {
     if (cardState.pressed) {
@@ -84,8 +84,17 @@ const FullBleedContent = ({ borderRadius, content, cardState, ...rest }) => {
     }
   }
 
+  const borderRadiusStyles = borderRadius
+    ? {
+        $borderBottomLeftRadius: borderRadius.borderBottomLeftRadius,
+        $borderBottomRightRadius: borderRadius.borderBottomRightRadius,
+        $borderTopLeftRadius: borderRadius.borderTopLeftRadius,
+        $borderTopRightRadius: borderRadius.borderTopRightRadius
+      }
+    : {}
+
   return (
-    <FullBleedContentContainer {...borderRadius} hasCardState={!!cardState}>
+    <FullBleedContentContainer {...borderRadiusStyles} $hasCardState={!!cardState}>
       {content ?? <ResponsiveImage {...selectFullBleedContentProps(rest)} />}
       {cardState && <InteractiveOverlay overlayOpacity={overlayOpacity} />}
     </FullBleedContentContainer>
@@ -130,5 +139,3 @@ FullBleedContent.propTypes = {
   smSrc: PropTypes.string,
   fallbackSrc: PropTypes.string
 }
-
-export default FullBleedContent

package/src/shared/FullBleedContent/getFullBleedBorderRadius.js

@@ -10,7 +10,7 @@
  * @param {boolean} hasFooter
  * @returns
  */
-const getFullBleedBorderRadius = (borderRadius, position, hasFooter = false) => {
+export const getFullBleedBorderRadius = (borderRadius, position, hasFooter = false) => {
   const innerBorderRadius = {
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,
@@ -51,5 +51,3 @@ const getFullBleedBorderRadius = (borderRadius, position, hasFooter = false) =>
   }
   return innerBorderRadius
 }
-
-export default getFullBleedBorderRadius

package/src/shared/FullBleedContent/index.js

@@ -1,9 +1,4 @@
-import FullBleedContent from './FullBleedContent'
+export { FullBleedContent } from './FullBleedContent'
 
-export default FullBleedContent
-
-export { default as getFullBleedBorderRadius } from './getFullBleedBorderRadius'
-export {
-  default as useFullBleedContentProps,
-  getFullBleedPaddingSides
-} from './useFullBleedContentProps'
+export { getFullBleedBorderRadius } from './getFullBleedBorderRadius'
+export { useFullBleedContentProps, getFullBleedPaddingSides } from './useFullBleedContentProps'

package/src/shared/FullBleedContent/useFullBleedContentProps.js

@@ -39,7 +39,7 @@ const getContentStackAlign = (fullBleedContentAlign) => {
  * @param {string} position - 'top' | 'bottom' | 'left' | 'right' | 'none'
  * @returns {object} Boolean flags for which sides to apply padding
  */
-const getFullBleedPaddingSides = (position) => ({
+export const getFullBleedPaddingSides = (position) => ({
   applyPaddingTop: position !== 'bottom',
   applyPaddingBottom: position !== 'top',
   applyPaddingLeft: position !== 'right',
@@ -53,7 +53,7 @@ const getFullBleedPaddingSides = (position) => ({
  * @param {object} [fullBleedContent] - a set of valid proptypes for FullBleedContent
  * @returns
  */
-const useFullBleedContentProps = (fullBleedContent) => {
+export const useFullBleedContentProps = (fullBleedContent) => {
   const {
     align: fullBleedContentAlignProp,
     position: fullBleedContentPositionProp,
@@ -85,6 +85,3 @@ const useFullBleedContentProps = (fullBleedContent) => {
     fullBleedPaddingSides
   }
 }
-
-export { getFullBleedPaddingSides }
-export default useFullBleedContentProps

package/src/shared/VideoSplash/SplashButton/SplashButton.jsx

@@ -23,15 +23,15 @@ const ButtonContent = styled.div({
   alignItems: 'center',
   width: 64,
   height: 64,
-  background: ({ buttonContentBackground }) => buttonContentBackground ?? 'none',
+  background: ({ $buttonContentBackground }) => $buttonContentBackground ?? 'none',
   borderRadius: '100%',
   transition: 'background 0.2s ease-in-out',
   [`${ButtonContainer}:hover &`]: {
-    background: ({ buttonContentChildrenBackground }) => buttonContentChildrenBackground
+    background: ({ $buttonContentChildrenBackground }) => $buttonContentChildrenBackground
   }
 })
 
-const SplashButton = ({ copy, tokens, variant, videoLength }) => {
+export const SplashButton = ({ copy, tokens, variant, videoLength }) => {
   const { buttonContentChildrenBackground } = useThemeTokens('SplashButton', tokens, variant, {
     hover: true
   })
@@ -45,8 +45,8 @@ const SplashButton = ({ copy, tokens, variant, videoLength }) => {
   return (
     <ButtonContainer aria-label={ariaLabel}>
       <ButtonContent
-        {...themeTokens}
-        buttonContentChildrenBackground={buttonContentChildrenBackground}
+        $buttonContentBackground={themeTokens.buttonContentBackground}
+        $buttonContentChildrenBackground={buttonContentChildrenBackground}
       >
         <PlayIcon size={27} color={playIconColor} />
       </ButtonContent>
@@ -60,5 +60,3 @@ SplashButton.propTypes = {
   variant: PropTypes.object,
   copy: PropTypes.oneOf(['en', 'fr'])
 }
-
-export default SplashButton

package/src/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.jsx

@@ -15,22 +15,22 @@ const ButtonContainer = styled.button({
 })
 
 const ButtonContent = styled.div({
-  background: ({ buttonBackground }) => buttonBackground,
-  border: ({ buttonBorderColor }) => `1px solid ${buttonBorderColor}`,
-  borderRadius: ({ buttonRadius }) => `${buttonRadius}px`,
+  background: ({ $buttonBackground }) => $buttonBackground,
+  border: ({ $buttonBorderColor }) => `1px solid ${$buttonBorderColor}`,
+  borderRadius: ({ $buttonRadius }) => `${$buttonRadius}px`,
   position: 'absolute',
-  left: ({ buttonLeftPosition }) => `${buttonLeftPosition}px`,
-  bottom: ({ buttonBottomPosition }) => `${buttonBottomPosition}px`,
+  left: ({ $buttonLeftPosition }) => `${$buttonLeftPosition}px`,
+  bottom: ({ $buttonBottomPosition }) => `${$buttonBottomPosition}px`,
   boxSizing: 'border-box',
   display: 'flex',
   alignItems: 'center',
-  minHeight: ({ buttonMinHeight }) => `${buttonMinHeight}px`,
-  paddingRight: ({ buttonPaddingLeft }) => `${buttonPaddingLeft}px`,
-  paddingLeft: ({ buttonPaddingRight }) => `${buttonPaddingRight}px`,
+  minHeight: ({ $buttonMinHeight }) => `${$buttonMinHeight}px`,
+  paddingRight: ({ $buttonPaddingLeft }) => `${$buttonPaddingLeft}px`,
+  paddingLeft: ({ $buttonPaddingRight }) => `${$buttonPaddingRight}px`,
   transition: 'background 0.2s ease-in-out',
 
   [`${ButtonContainer}:hover &`]: {
-    background: ({ buttonContentChildrenBackground }) => buttonContentChildrenBackground
+    background: ({ $buttonContentChildrenBackground }) => $buttonContentChildrenBackground
   }
 })
 
@@ -40,7 +40,7 @@ const PlayIconContainer = styled.div({
   alignItems: 'center',
   width: 32,
   height: 32,
-  background: ({ playIconContainerBackground }) => playIconContainerBackground ?? 'none',
+  background: ({ $playIconContainerBackground }) => $playIconContainerBackground ?? 'none',
   borderRadius: '100%',
   transition: 'background 0.2s ease-in-out'
 })
@@ -49,13 +49,15 @@ const DetailsContainer = styled.div({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',
-  paddingLeft: ({ detailsContainerPadding }) => `${detailsContainerPadding}px`
+  paddingLeft: ({ $detailsContainerPadding }) => `${$detailsContainerPadding}px`
 })
 
 const selectPlayIconContainerTokens = ({ playIconContainerBackground }) => ({
-  playIconContainerBackground
+  $playIconContainerBackground: playIconContainerBackground
+})
+const selectDetailsContainerTokens = ({ detailsContainerPadding }) => ({
+  $detailsContainerPadding: detailsContainerPadding
 })
-const selectDetailsContainerTokens = ({ detailsContainerPadding }) => ({ detailsContainerPadding })
 const selectButtonContentTokens = ({
   buttonBackground,
   buttonBorderColor,
@@ -66,14 +68,14 @@ const selectButtonContentTokens = ({
   buttonPaddingLeft,
   buttonPaddingRight
 }) => ({
-  buttonBackground,
-  buttonBorderColor,
-  buttonRadius,
-  buttonLeftPosition,
-  buttonBottomPosition,
-  buttonMinHeight,
-  buttonPaddingLeft,
-  buttonPaddingRight
+  $buttonBackground: buttonBackground,
+  $buttonBorderColor: buttonBorderColor,
+  $buttonRadius: buttonRadius,
+  $buttonLeftPosition: buttonLeftPosition,
+  $buttonBottomPosition: buttonBottomPosition,
+  $buttonMinHeight: buttonMinHeight,
+  $buttonPaddingLeft: buttonPaddingLeft,
+  $buttonPaddingRight: buttonPaddingRight
 })
 
 const getLabelTokens = ({ labelFontName: fontName, labelFontWeight: fontWeight }) => ({
@@ -81,7 +83,7 @@ const getLabelTokens = ({ labelFontName: fontName, labelFontWeight: fontWeight }
   fontWeight
 })
 
-const SplashButtonWithDetails = ({ label, tokens, variant, copy, videoLength }) => {
+export const SplashButtonWithDetails = ({ label, tokens, variant, copy, videoLength }) => {
   const { buttonContentChildrenBackground } = useThemeTokens(
     'SplashButtonWithDetails',
     tokens,
@@ -100,7 +102,7 @@ const SplashButtonWithDetails = ({ label, tokens, variant, copy, videoLength })
     <ButtonContainer aria-label={ariaLabel}>
       <ButtonContent
         {...selectButtonContentTokens(themeTokens)}
-        buttonContentChildrenBackground={buttonContentChildrenBackground}
+        $buttonContentChildrenBackground={buttonContentChildrenBackground}
       >
         <PlayIconContainer {...selectPlayIconContainerTokens(themeTokens)}>
           <PlayIcon size={13} color={playIconColor} />
@@ -130,5 +132,3 @@ SplashButtonWithDetails.propTypes = {
   videoLength: PropTypes.number,
   copy: PropTypes.oneOf(['en', 'fr'])
 }
-
-export default SplashButtonWithDetails

package/src/shared/VideoSplash/VideoSplash.jsx

@@ -3,15 +3,15 @@ import PropTypes from 'prop-types'
 import { selectSystemProps, useViewport } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import { viewports } from '@telus-uds/system-constants'
-import SplashButton from './SplashButton/SplashButton'
-import SplashButtonWithDetails from './SplashButtonWithDetails/SplashButtonWithDetails'
-import videoText from '../../Video/videoText'
+import { SplashButton } from './SplashButton/SplashButton'
+import { SplashButtonWithDetails } from './SplashButtonWithDetails/SplashButtonWithDetails'
+import { videoText } from '../../Video/videoText'
 import { htmlAttrs } from '../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const SplashBackground = styled.div(({ videoPoster }) => ({
-  backgroundImage: `url(${videoPoster})`,
+const SplashBackground = styled.div(({ $videoPoster }) => ({
+  backgroundImage: `url(${$videoPoster})`,
   backgroundSize: 'cover',
   backgroundPosition: 'center',
   position: 'absolute',
@@ -21,14 +21,14 @@ const SplashBackground = styled.div(({ videoPoster }) => ({
   cursor: 'pointer'
 }))
 
-const VideoSplash = ({ poster, videoLength, simpleMode, copy = 'en', onClick, ...rest }) => {
+export const VideoSplash = ({ poster, videoLength, simpleMode, copy = 'en', onClick, ...rest }) => {
   const viewport = useViewport()
 
   const showDetails = !simpleMode && viewport !== viewports.xs
   const label = videoText[copy].watch
 
   return (
-    <SplashBackground {...selectProps(rest)} onClick={onClick} videoPoster={poster}>
+    <SplashBackground {...selectProps(rest)} onClick={onClick} $videoPoster={poster}>
       {showDetails ? (
         <SplashButtonWithDetails videoLength={videoLength} copy={copy} label={label} />
       ) : (
@@ -46,5 +46,3 @@ VideoSplash.propTypes = {
   simpleMode: PropTypes.bool,
   copy: PropTypes.oneOf(['en', 'fr'])
 }
-
-export default VideoSplash

package/src/shared/VideoSplash/helpers.js

@@ -1,4 +1,4 @@
-import videoText from '../../Video/videoText'
+import { videoText } from '../../Video/videoText'
 
 export const getTimestamp = (videoLength, copy) => {
   const minutes = Math.floor(videoLength / 60)

package/src/utils/index.js

@@ -1,13 +1,13 @@
 import { htmlAttrs, contentfulProps } from '@telus-uds/components-base'
 import { warn, deprecate } from './logger'
 import { transformGradient } from './transforms'
-import useTypographyTheme from './useTypographyTheme'
-import media from './media'
-import ssrStyles from './ssr'
-import isElementFocusable from './isElementFocusable'
-import renderStructuredContent from './renderStructuredContent'
-import useOverlaidPosition from './useOverlaidPosition'
-import scrollToAnchor from './scrollToAnchor'
+import { useTypographyTheme } from './useTypographyTheme'
+import { media } from './media'
+import { ssrStyles } from './ssr'
+import { isElementFocusable } from './isElementFocusable'
+import { renderStructuredContent } from './renderStructuredContent'
+import { useOverlaidPosition } from './useOverlaidPosition'
+import { scrollToAnchor } from './scrollToAnchor'
 
 export {
   deprecate,

package/src/utils/isElementFocusable.js

@@ -1,7 +1,7 @@
 /**
  * Returns focusable elements inside of the Footnote
  */
-const isElementFocusable = (element) => {
+export const isElementFocusable = (element) => {
   const focusableElements = `a[href], button, textarea, input, select, form, label, audio, video, source, track, canvas, rect, polygon, iframe[data-src], [tabindex]:not([tabindex="-1"]), [contenteditable]`
   return (
     element.matches(focusableElements) &&
@@ -9,5 +9,3 @@ const isElementFocusable = (element) => {
     !element.matches('[tabindex="-1"]')
   )
 }
-
-export default isElementFocusable

package/src/utils/logger.js

@@ -13,8 +13,3 @@ export const warn = (componentName, message) => {
 
   console.warn(`[Allium] ${componentName}: ${message}`)
 }
-
-export default {
-  deprecate,
-  warn
-}

package/src/utils/media.js

@@ -1,6 +1,6 @@
 import { viewports } from '@telus-uds/system-constants'
 
-export default function media() {
+export function media() {
   return {
     query: {},
     from(breakpoint) {

package/src/utils/renderStructuredContent.jsx

@@ -62,12 +62,10 @@ const generateBreaks = (parts) => {
   return partsWithBreaks
 }
 
-const renderStructuredContent = (content) => {
+export const renderStructuredContent = (content) => {
   if (typeof content !== 'string') {
     return content
   }
 
   return generateBreaks(generateLinks(content))
 }
-
-export default renderStructuredContent

package/src/utils/scrollToAnchor.js

@@ -5,7 +5,7 @@
  * @param {Event} event - The event object associated with the click or navigation action.
  * @param {Function} onAfterScroll - A callback function to be executed after the scroll action is completed.
  */
-const scrollToAnchor = (href, event, onAfterScroll) => {
+export const scrollToAnchor = (href, event, onAfterScroll) => {
   if (href?.startsWith('#')) {
     event.preventDefault()
     const target = document.getElementById(href.slice(1))
@@ -14,5 +14,3 @@ const scrollToAnchor = (href, event, onAfterScroll) => {
     onAfterScroll(event)
   }
 }
-
-export default scrollToAnchor

package/src/utils/ssr.js

@@ -17,7 +17,7 @@ import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base'
  * @param {boolean} [options.styleGetters]
  * @param {(ReactElement) => ReactElement} [options.collectStyles]
  */
-const ssrStyles = (
+export const ssrStyles = (
   appName = 'Allium app',
   { styleGetters = [], collectStyles = (renderedApp) => renderedApp } = {},
   router = 'pages'
@@ -41,5 +41,3 @@ const ssrStyles = (
     collectStyles: (renderedApp) => collectStyles(sheet.collectStyles(renderedApp))
   })
 }
-
-export default ssrStyles

package/src/utils/theming/get-theme-from-server.js

@@ -13,7 +13,7 @@ async function importTheme(componentName) {
   }
 }
 
-export default async function getTheme(componentName) {
+export async function getTheme(componentName) {
   if (cachedTheme[componentName]) {
     return cachedTheme[componentName]
   }

package/src/utils/theming/with-client-theme.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { getTokensPropType, useThemeTokens } from '@telus-uds/components-base'
 
-const withClientTheme = (Component) => {
+export const withClientTheme = (Component) => {
   const UdsStyledComponent = ({ tokens: tokenOverrides, variant, ...props }) => {
     const theme = useThemeTokens(Component.displayName, tokenOverrides, variant)
     return <Component theme={theme} {...props} />
@@ -16,5 +16,3 @@ const withClientTheme = (Component) => {
 
   return UdsStyledComponent
 }
-
-export default withClientTheme

package/src/utils/theming/with-server-theme.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { getThemeTokens, getTokensPropType } from '@telus-uds/components-base/server'
 
-import getTheme from './get-theme-from-server'
+import { getTheme } from './get-theme-from-server'
 
-const withServerTheme = (Component, componentName) => {
+export const withServerTheme = (Component, componentName) => {
   const UdsStyledComponent = async ({ tokens: tokenOverrides, variant, ...props }) => {
     const componentTheme = await getTheme(componentName)
     const themeTokens = getThemeTokens(componentTheme, tokenOverrides, variant)
@@ -17,5 +17,3 @@ const withServerTheme = (Component, componentName) => {
 
   return UdsStyledComponent
 }
-
-export default withServerTheme

package/src/utils/transforms.js

@@ -2,5 +2,3 @@ export const transformGradient = (gradient) =>
   `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${
     gradient.stops[0].stop * 100
   }%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`
-
-export default { transformGradient }

package/src/utils/useOverlaidPosition.js

@@ -137,7 +137,7 @@ function getOverlaidPosition({
  * a small task because UDS's tooltip logic only really works for short text - it might be
  * better to use a third-party library).
  */
-const useOverlaidPosition = ({
+export const useOverlaidPosition = ({
   isShown = false,
   offsets,
   // By default, align the overlaid target's `top` to the bottom of the source, and center horizontally.
@@ -230,5 +230,3 @@ const useOverlaidPosition = ({
     isReady
   }
 }
-
-export default useOverlaidPosition

package/src/utils/useTypographyTheme.js

@@ -1,6 +1,6 @@
 import { applyTextStyles, useTheme, useThemeTokens, useViewport } from '@telus-uds/components-base'
 
-const useTypographyTheme = (variant, tokens) => {
+export const useTypographyTheme = (variant, tokens) => {
   const viewport = useViewport()
   const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
   const { themeOptions } = useTheme()
@@ -10,5 +10,3 @@ const useTypographyTheme = (variant, tokens) => {
   })
   return { ...rnStyles, fontSize: `${fontSize}px`, lineHeight: `${lineHeight}px` }
 }
-
-export default useTypographyTheme

package/types/Autocomplete.d.ts

@@ -29,6 +29,4 @@ export interface AutocompleteProps extends AutocompleteCommonProps {
   noResults?: ReactNode
 }
 
-declare const Autocomplete: ComponentType<AutocompleteProps>
-
-export default Autocomplete
+export declare const Autocomplete: ComponentType<AutocompleteProps>

package/types/Badge.d.ts

@@ -6,6 +6,4 @@ export interface BadgeProps extends HTMLAttrs {
   variant?: Variant
 }
 
-declare const Badge: ComponentType<BadgeProps>
-
-export default Badge
+export declare const Badge: ComponentType<BadgeProps>

package/types/BaseProvider.d.ts

@@ -20,6 +20,4 @@ export interface BaseProviderProps {
   children: React.ReactNode
 }
 
-declare const BaseProvider: ComponentType<BaseProviderProps>
-
-export default BaseProvider
+export declare const BaseProvider: ComponentType<BaseProviderProps>

package/types/BlockQuote.d.ts

@@ -11,6 +11,4 @@ export interface BlockQuoteProps extends HTMLAttrs {
   linkRouterProps?: Record<string, any>
 }
 
-declare const BlockQuote: ComponentType<BlockQuoteProps>
-
-export default BlockQuote
+export declare const BlockQuote: ComponentType<BlockQuoteProps>

package/types/Box.d.ts

@@ -33,6 +33,4 @@ export interface BoxProps extends A11yProps, ViewProps {
   children: ReactNode
 }
 
-declare const Box: ComponentTypeWithForwardRef<BoxProps, any>
-
-export default Box
+export declare const Box: ComponentTypeWithForwardRef<BoxProps, any>

package/types/BreadcrumbItem.d.ts

@@ -6,6 +6,4 @@ interface BreadcrumbItemProps {
   current?: boolean
 }
 
-declare const BreadcrumbItem: ComponentType<BreadcrumbItemProps>
-
-export default BreadcrumbItem
+export declare const BreadcrumbItem: ComponentType<BreadcrumbItemProps>

package/types/Breadcrumbs.d.ts

@@ -14,8 +14,6 @@ export interface BreadcrumbsProps extends HTMLAttrs {
   children?: ReactNode
 }
 
-declare const Breadcrumbs: ComponentType<BreadcrumbsProps> & {
-  Item: typeof BreadcrumbItem
+export declare const Breadcrumbs: ComponentType<BreadcrumbsProps> & {
+  BreadcrumbItem: typeof BreadcrumbItem
 }
-
-export default Breadcrumbs

package/types/Callout.d.ts

@@ -10,6 +10,4 @@ export interface CalloutProps extends HTMLAttrs {
   tokens?: Tokens
 }
 
-declare const Callout: ComponentType<CalloutProps>
-
-export default Callout
+export declare const Callout: ComponentType<CalloutProps>

package/types/Card.d.ts

@@ -40,6 +40,4 @@ export interface CardProps extends HTMLAttrs {
   fullBleedContent?: FullBleedContent
 }
 
-declare const Card: ComponentType<CardProps>
-
-export default Card
+export declare const Card: ComponentType<CardProps>

package/types/Cell.d.ts

@@ -8,6 +8,4 @@ export interface CellProps extends HTMLAttrs {
   align: 'left' | 'center' | 'right'
 }
 
-declare const Cell: ComponentType<CellProps>
-
-export default Cell
+export declare const Cell: ComponentType<CellProps>

package/types/ControlBar.d.ts

@@ -54,6 +54,4 @@ export interface ControlBarProps extends HTMLAttrs {
   videoPlayerWidth: number
 }
 
-declare const ControlBar: ComponentType<ControlBarProps>
-
-export default ControlBar
+export declare const ControlBar: ComponentType<ControlBarProps>

package/types/Countdown.d.ts

@@ -48,6 +48,4 @@ export interface CountdownProps extends HTMLAttrs {
   variant?: CountdownVariant
 }
 
-declare const Countdown: ComponentType<CountdownProps>
-
-export default Countdown
+export declare const Countdown: ComponentType<CountdownProps>

package/types/DatePicker.d.ts

@@ -18,6 +18,4 @@ export interface DatePickerProps extends HTMLAttrs {
   dateFormat?: string
 }
 
-declare const DatePicker: ComponentType<DatePickerProps>
-
-export default DatePicker
+export declare const DatePicker: ComponentType<DatePickerProps>

package/types/FileUpload.d.ts

@@ -36,6 +36,4 @@ export interface FileUploadProps {
   documentPicker?: Record<string, any>
 }
 
-declare const FileUpload: ComponentType<FileUploadProps>
-
-export default FileUpload
+export declare const FileUpload: ComponentType<FileUploadProps>

package/types/Footnote.d.ts

@@ -16,6 +16,4 @@ export interface FootnoteProps extends HTMLAttrs {
   onClose: boolean
 }
 
-declare const Footnote: ComponentType<FootnoteProps>
-
-export default Footnote
+export declare const Footnote: ComponentType<FootnoteProps>