@telus-uds/components-web 2.43.0 → 3.0.0

package/lib-module/Card/Card.js

@@ -1,251 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, useThemeTokensCallback, variantProp, a11yProps, viewProps, PressableCardBase } from '@telus-uds/components-base';
-import { useResponsiveProp } from '@telus-uds/components-web';
-import styled from 'styled-components';
-import CardContent from './CardContent';
-import CardFooter from './CardFooter';
-import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
-import ConditionalWrapper from '../shared/ConditionalWrapper';
-
-// Passes React Native-oriented system props through UDS Card
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-/**
- * A basic card component, unstyled by default.
- *
- * ## Component API
- *
- * ### With Footer
- *
- * Pass any component or simply a string in the `footer` prop in order to render
- * a card with a footer (which uses the `alternative` background).
- *
- * ### With Full Bleed Content
- *
- * Use `fullBleedContent` prop to add a full bleed style image, video or other content to the
- * card. This prop accepts an object with the following properties:
- * - `alt`: alt tag for an image,
- * - `src`: default image source,
- * - `position`: `none`, `bottom`, `left`, `right` or `top`, depending on where you would like your full bleed image to be placed,
- * - `imgCol`: set the span of the image per viewport (based on 12 column value for width of card) when `position` of image is on `left` or `right`
- * - all the props from the `ResponsiveImage` component in case you want that full bleed image to be responsive,
- * - `content`: pass a custom JSX to be used for rendering of the full bleed content (defaults to `ResponsiveImage`
- *   receiving the other props).
- *
- * Note that `position` can be responsive, i.e. different for different viewports. A full bleed content with position
- * {xs: 'none', md: 'left'} for example, will have a full bleed content to the left of card content when viewed on desktops
- * viewports, and no content when viewed on mobile viewports.
- *
- * ## Accessibility
- * `Card` component accepts all the standard accessibility props.
- */
-const DynamicWidthContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Card__DynamicWidthContainer",
-  componentId: "components-web__sc-1elbtwd-0"
-})(_ref => {
-  let {
-    width,
-    display,
-    borderRadius,
-    overflow
-  } = _ref;
-  return {
-    width,
-    display,
-    borderRadius,
-    overflow
-  };
-});
-const Card = /*#__PURE__*/React.forwardRef(function () {
-  let {
-    children,
-    footer,
-    footerPadding,
-    fullBleedImage,
-    fullBleedContent = fullBleedImage,
-    tokens = {},
-    variant,
-    interactiveCard,
-    onPress,
-    dataSet,
-    backgroundImage,
-    ...rest
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-    fullBleedContent: {
-      position: null
-    }
-  };
-  let ref = arguments.length > 1 ? arguments[1] : undefined;
-  const {
-    contentStackAlign,
-    contentStackDirection,
-    fullBleedContentPosition,
-    fullBleedContentProps
-  } = useFullBleedContentProps(fullBleedContent);
-  const {
-    imgCol
-  } = fullBleedContentProps;
-
-  // If the card has rounded corners and a full bleed image, we need to apply
-  // those corners on the image as well, but partially
-  const {
-    borderRadius
-  } = useThemeTokens('Card', tokens, variant);
-  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
-    interactive: true,
-    ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
-  });
-  const hasFooter = Boolean(footer);
-  const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius, fullBleedContentPosition, hasFooter);
-
-  // takes imgCol from fullBleedContent if present, to dynamically set width of image
-  // card content will adapt to the size of image to add up to 100% width of card width
-  // pass as props to ConditionalWrapper
-  const imgColCurrentViewport = useResponsiveProp(imgCol);
-  const maxCol = 12;
-  const fullBleedImageWidth = `${imgColCurrentViewport / maxCol * 100}%`;
-  const adaptiveContentWidth = `${(maxCol - imgColCurrentViewport) / maxCol * 100}%`;
-  const isImageWidthAdjustable = imgCol && (fullBleedContentPosition === 'left' || fullBleedContentPosition === 'right');
-  const contentWrapperStyleProps = {
-    width: adaptiveContentWidth,
-    display: imgColCurrentViewport >= maxCol ? 'none' : undefined
-  };
-  const imageWrapperStyleProps = {
-    width: fullBleedImageWidth,
-    borderRadius: imgColCurrentViewport >= maxCol ? borderRadius : undefined,
-    overflow: imgColCurrentViewport >= maxCol ? 'hidden' : undefined,
-    display: imgColCurrentViewport === 0 ? 'none' : undefined
-  };
-  const columnFlex = {
-    flexGrow: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? 0 : 1,
-    flexShrink: 1,
-    justifyContent: 'space-between'
-  };
-  // When interactive area is present, spacing tokens should only be applied
-  // to individual Card sections, not Card as a whole
-  const {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    ...restOfTokens
-  } = tokens;
-  return /*#__PURE__*/_jsxs(CardBase, {
-    ref: ref,
-    variant: {
-      ...variant,
-      padding: 'custom'
-    },
-    tokens: restOfTokens,
-    backgroundImage: backgroundImage,
-    ...selectProps(rest),
-    children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsx(PressableCardBase, {
-      ref: ref,
-      tokens: getThemeTokens,
-      dataSet: dataSet,
-      onPress: onPress,
-      ...selectProps(rest),
-      children: typeof (interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body) === 'function' ? interactiveCard.body() : interactiveCard.body
-    }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/_jsxs(StackView, {
-      direction: contentStackDirection,
-      tokens: {
-        ...columnFlex,
-        alignItems: contentStackAlign
-      },
-      space: 0,
-      children: [children ? /*#__PURE__*/_jsx(ConditionalWrapper, {
-        WrapperComponent: DynamicWidthContainer,
-        wrapperProps: contentWrapperStyleProps,
-        condition: isImageWidthAdjustable,
-        children: /*#__PURE__*/_jsx(CardContent, {
-          tokens: tokens,
-          variant: variant,
-          withFooter: hasFooter,
-          children: children
-        })
-      }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/_jsx(ConditionalWrapper, {
-        WrapperComponent: DynamicWidthContainer,
-        wrapperProps: imageWrapperStyleProps,
-        condition: isImageWidthAdjustable,
-        children: /*#__PURE__*/_jsx(FullBleedContent, {
-          borderRadius: fullBleedBorderRadius,
-          ...fullBleedContentProps,
-          position: fullBleedContentPosition
-        })
-      })]
-    }) : null, footer && /*#__PURE__*/_jsx(CardFooter, {
-      padding: footerPadding,
-      tokens: tokens,
-      variant: variant,
-      children: footer
-    })]
-  });
-});
-const positionValues = ['none', 'bottom', 'left', 'right', 'top'];
-const alignValues = ['start', 'end', 'center', 'stretch'];
-const PositionedFullBleedContentPropType = PropTypes.shape({
-  position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(positionValues)).isRequired,
-  align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(alignValues)),
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  ...FullBleedContent.propTypes
-});
-Card.displayName = 'Card';
-Card.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Card content.
-   */
-  children: PropTypes.node,
-  /**
-   * Card footer.
-   */
-  footer: PropTypes.node,
-  /**
-   * Custom card footer padding.
-   */
-  footerPadding: paddingProp.propType,
-  /**
-   * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
-   *
-   * @deprecated
-   */
-  fullBleedImage: PositionedFullBleedContentPropType,
-  /**
-   * Full bleed content to be placed on the card.
-   */
-  fullBleedContent: PositionedFullBleedContentPropType,
-  /**
-   * Card tokens.
-   */
-  tokens: getTokensPropType('Card'),
-  /**
-   * Card variant.
-   */
-  variant: variantProp.propType,
-  /**
-   * Function to call on pressing the card.
-   * Note: This is only available when `interactive` variant is used.
-   */
-  onPress: PropTypes.func,
-  /**
-   * Object to set interactive card's properties
-   */
-  interactiveCard: PropTypes.shape({
-    body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    tokens: getTokensPropType('Card'),
-    variant: variantProp.propType
-  }),
-  /**
-   * Apply background image to the card.
-   */
-  backgroundImage: PropTypes.shape({
-    // src is either a URI string or an object when used responsively to provide different image sources for different screen sizes
-    src: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-    alt: PropTypes.string,
-    resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
-  })
-};
-export default Card;

package/lib-module/Card/CardContent.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { getTokensPropType, selectSystemProps, useThemeTokens, useViewport, variantProp } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import { htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CardContent__CardContentContainer",
-  componentId: "components-web__sc-1k2501q-0"
-})(_ref => {
-  let {
-    borderRadius,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    withFooter,
-    contentAlignItems: alignItems,
-    contentFlexGrow: flexGrow,
-    contentFlexShrink: flexShrink,
-    contentJustifyContent: justifyContent,
-    borderWidth
-  } = _ref;
-  return {
-    // We need to make sure to have sharp corners on the bottom
-    // if the card has a footer
-    borderBottomLeftRadius: withFooter ? 0 : borderRadius,
-    borderBottomRightRadius: withFooter ? 0 : borderRadius,
-    borderTopLeftRadius: borderRadius,
-    borderTopRightRadius: borderRadius,
-    paddingBottom: paddingBottom - borderWidth,
-    paddingLeft: paddingLeft - borderWidth,
-    paddingRight: paddingRight - borderWidth,
-    paddingTop: paddingTop - borderWidth,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems,
-    flexGrow,
-    flexShrink,
-    justifyContent
-  };
-});
-
-/**
- * Card content, applying the card tokens as per the theme used.
- */
-const CardContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    children,
-    flexContent,
-    tokens,
-    variant,
-    withFooter = false,
-    ...rest
-  } = _ref2;
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Card', tokens, variant, {
-    viewport
-  });
-  return /*#__PURE__*/_jsx(CardContentContainer, {
-    ...themeTokens,
-    flexContent: flexContent,
-    withFooter: withFooter,
-    ref: ref,
-    ...selectProps(rest),
-    children: children
-  });
-});
-CardContent.displayName = 'CardContent';
-CardContent.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Card section content.
-   */
-  children: PropTypes.node,
-  /**
-   * Card tokens.
-   */
-  tokens: getTokensPropType('Card'),
-  /**
-   * Card variant.
-   */
-  variant: variantProp.propType,
-  /**
-   * Whether the card has a footer.
-   */
-  withFooter: PropTypes.bool
-};
-export default CardContent;

package/lib-module/Card/CardFooter.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { getTokensPropType, paddingProp, selectSystemProps, useThemeTokens, useViewport, variantProp } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import { htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const CardFooterContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CardFooter__CardFooterContainer",
-  componentId: "components-web__sc-pm6vns-0"
-})(_ref => {
-  let {
-    backgroundColor,
-    borderRadius,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop
-  } = _ref;
-  return {
-    backgroundColor,
-    borderBottomLeftRadius: borderRadius,
-    borderBottomRightRadius: borderRadius,
-    // @todo circle back to the following non-standard value to
-    // see if it can be integrated into the palette
-    boxShadow: 'inset 0px 1px 3px rgba(0, 0, 0, 0.05)',
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop
-  };
-});
-
-/**
- * Card footer, applying the tokens as per the theme used.
- */
-const CardFooter = _ref2 => {
-  let {
-    children,
-    padding,
-    tokens,
-    variant,
-    ...rest
-  } = _ref2;
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Card', tokens, {
-    ...variant,
-    background: 'alternative'
-  }, {
-    viewport
-  });
-  return /*#__PURE__*/_jsx(CardFooterContainer, {
-    ...themeTokens,
-    ...padding,
-    ...selectProps(rest),
-    children: children
-  });
-};
-CardFooter.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Card footer content.
-   */
-  children: PropTypes.node,
-  /**
-   * Card footer padding.
-   */
-  padding: paddingProp.propType,
-  /**
-   * Card tokens.
-   */
-  tokens: getTokensPropType('Card'),
-  /**
-   * Card variant.
-   */
-  variant: variantProp.propType
-};
-export default CardFooter;

package/lib-module/Card/index.js

@@ -1,2 +0,0 @@
-import Card from './Card';
-export default Card;

package/lib-module/Countdown/Countdown.js

@@ -1,169 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Spacer, StackView, Typography, selectSystemProps, useViewport, useThemeTokens, applyTextStyles, getTokensPropType } from '@telus-uds/components-base';
-import { viewports } from '@telus-uds/system-constants';
-import styled from 'styled-components';
-// Reading these from the RN palette since they will be used to generate
-// the `Typography` tokens
-import { htmlAttrs, transformGradient } from '../utils';
-import Segment from './Segment';
-import useCountdown from './useCountdown';
-import { countdownVariantPropType, dictionaryContentShape } from './types';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const Container = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Countdown__Container",
-  componentId: "components-web__sc-18tqcb2-0"
-})(_ref => {
-  let {
-    variant: {
-      feature,
-      inverse,
-      large
-    },
-    themeTokens,
-    gradient
-  } = _ref;
-  return {
-    ...(large || feature ? {
-      display: 'flex',
-      flex: 0
-    } : {}),
-    ...(feature && {
-      borderRadius: themeTokens.containerBorderRadius,
-      borderColor: themeTokens.containerBorderColor,
-      borderStyle: 'solid',
-      borderWidth: `${themeTokens.containerBorderWidth}px`,
-      justifyContent: 'center',
-      paddingBottom: `${themeTokens.containerPaddingBottomTop}px`,
-      paddingLeft: `${themeTokens.containerPaddingLeftRight}px`,
-      paddingRight: `${themeTokens.containerPaddingLeftRight}px`,
-      paddingTop: `${themeTokens.containerPaddingBottomTop}px`,
-      width: 'fit-content'
-    }),
-    ...(feature && !inverse && gradient && {
-      background: `linear-gradient(#fff 0 0) padding-box, ${gradient} border-box`
-    })
-  };
-});
-const getLabelTokens = themeTokens => ({
-  color: themeTokens.labelBorderColor,
-  fontSize: themeTokens.labelFontSize,
-  fontWeight: themeTokens.labelFontWeight,
-  lineHeight: themeTokens.labelLineHeight
-});
-const getMainTextTokens = _ref2 => {
-  let {
-    labelBorderColor,
-    textTimerFontWeight,
-    textFontSize,
-    textLineHeight,
-    textTimerFontName
-  } = _ref2;
-  return {
-    color: labelBorderColor,
-    lineHeight: textLineHeight,
-    fontWeight: textTimerFontWeight,
-    fontSize: textFontSize,
-    fontName: textTimerFontName
-  };
-};
-const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    copy = 'en',
-    targetTime,
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref3;
-  const [days, hours, minutes, seconds] = useCountdown(targetTime);
-  const viewport = useViewport();
-  const {
-    feature,
-    large,
-    label,
-    noDivider
-  } = variant;
-  if (noDivider && !label) {
-    throw new Error('`noDivider` variant can only be used with `label` enabled!');
-  }
-  const themeTokens = useThemeTokens('Countdown', tokens, variant, {
-    viewport
-  });
-  const segmentFontSize = themeTokens.textFontSize;
-  const semanticGradient = themeTokens.containerGradient && transformGradient(themeTokens.containerGradient);
-  const mainTextTokens = getMainTextTokens(themeTokens);
-  const divider = noDivider === true ?
-  /*#__PURE__*/
-  // StackView-based subcontainer adds a 1-step space on the each side of the divider
-  _jsx(Spacer, {
-    direction: "row",
-    space: (feature || large) && viewport !== viewports.xs ? 4 : 1
-  }) : /*#__PURE__*/_jsx(Typography, {
-    tokens: mainTextTokens,
-    children: ":"
-  });
-  const labelTokens = getLabelTokens(themeTokens);
-  const segmentProps = {
-    copy,
-    labelTokens,
-    numberTokens: mainTextTokens,
-    segmentFontSize,
-    variant
-  };
-  return (
-    /*#__PURE__*/
-    // Making it focusable for accessibility purposes
-    _jsx(Container, {
-      ref: ref,
-      variant: variant,
-      ...selectProps(rest),
-      tabIndex: 0,
-      themeTokens: themeTokens,
-      gradient: semanticGradient,
-      children: /*#__PURE__*/_jsxs(StackView, {
-        direction: "row",
-        space: 1,
-        children: [/*#__PURE__*/_jsx(Segment, {
-          labelKey: "day",
-          number: days,
-          segmentWidth: String(days).length,
-          ...segmentProps
-        }), divider, /*#__PURE__*/_jsx(Segment, {
-          labelKey: "hour",
-          number: hours,
-          ...segmentProps,
-          ...applyTextStyles(themeTokens)
-        }), divider, /*#__PURE__*/_jsx(Segment, {
-          labelKey: "minute",
-          number: minutes,
-          ...segmentProps,
-          ...applyTextStyles(themeTokens)
-        }), divider, /*#__PURE__*/_jsx(Segment, {
-          labelKey: "second",
-          number: seconds,
-          ...segmentProps,
-          ...applyTextStyles(themeTokens)
-        })]
-      })
-    })
-  );
-});
-Countdown.displayName = 'Countdown';
-Countdown.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Countdown'),
-  /**
-   * Copy language identifier (`'en'` or `'fr'`) or a dictionary instance (an object with
-   * the following keys: days, day, hours, hour, minutes, minute, seconds, second)
-   */
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
-  /**
-   * An instance of JavaScript `Date` object or a string parseable via `Date.parse()`
-   * representing a point in the future to count down to.
-   */
-  targetTime: PropTypes.instanceOf(Date),
-  variant: countdownVariantPropType
-};
-export default Countdown;

package/lib-module/Countdown/Segment.js

@@ -1,96 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { StackView, Typography, useCopy } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import dictionary from './dictionary';
-import { countdownVariantPropType, dictionaryContentShape } from './types';
-// !TODO: put this back
-import { SEGMENT_WIDTH_TO_FONT_SIZE_RATIO } from './constants';
-
-// Pads with zeros on the left if it's a single digit number
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const pad = function (number) {
-  let segmentWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-  return String(number).padStart(segmentWidth, '0');
-};
-const Container = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Segment__Container",
-  componentId: "components-web__sc-yrh35y-0"
-})(_ref => {
-  let {
-    segmentFontSize,
-    segmentWidth = 2,
-    variant: {
-      feature
-    }
-  } = _ref;
-  return {
-    justifyContent: 'space-evenly',
-    display: 'inline-flex',
-    ...(feature && {
-      // This is required because when the numbers for Countdown change, the character widths will change and thereby effecting the container demensions.
-      width: `${segmentFontSize * SEGMENT_WIDTH_TO_FONT_SIZE_RATIO * segmentWidth}px`,
-      display: 'flex'
-    })
-  };
-});
-// A segment of the countdown string: we need to make sure it
-// keeps its width constant to prevent the whole component from
-// being automatically resized while using variable size fonts
-const Segment = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    copy = 'en',
-    segmentFontSize,
-    labelKey,
-    labelTokens,
-    number,
-    numberTokens,
-    segmentWidth = 2,
-    variant = {}
-  } = _ref2;
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const {
-    label,
-    large,
-    feature
-  } = variant;
-  return /*#__PURE__*/_jsx(Container, {
-    segmentFontSize: segmentFontSize,
-    segmentWidth: segmentWidth,
-    variant: variant,
-    ref: ref,
-    children: /*#__PURE__*/_jsxs(StackView, {
-      direction: large || feature ? 'column' : 'row',
-      space: large || feature ? 0 : 1,
-      tokens: {
-        alignItems: 'center'
-      },
-      children: [/*#__PURE__*/_jsx(Typography, {
-        tokens: numberTokens,
-        children: pad(number, segmentWidth)
-      }), label && /*#__PURE__*/_jsx(Typography, {
-        tokens: labelTokens,
-        children: getCopy(number === 1 ? labelKey : `${labelKey}s`)
-      })]
-    })
-  });
-});
-Segment.displayName = 'Segment';
-Segment.propTypes = {
-  /**
-   * Copy language identifier or a dictionary instance.
-   */
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
-  segmentFontSize: PropTypes.number,
-  labelKey: PropTypes.oneOf(['day', 'hour', 'minute', 'second']),
-  labelTokens: PropTypes.object,
-  number: PropTypes.number,
-  numberTokens: PropTypes.object,
-  segmentWidth: PropTypes.number,
-  variant: countdownVariantPropType
-};
-export default Segment;

package/lib-module/Countdown/constants.js

@@ -1,4 +0,0 @@
-export const DEFAULT_FONT_SIZE = 16;
-export const LARGE_FONT_SIZE = 64;
-export const XS_FONT_SIZE = 28;
-export const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8;