@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/{Card → esm/Card}/Card.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, useThemeTokensCallback, variantProp, a11yProps, viewProps, PressableCardBase, useResponsiveProp } from '@telus-uds/components-base';
-import { styledComponents } from '../utils';
+import styled from 'styled-components';
 import CardContent from './CardContent';
 import CardFooter from './CardFooter';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
@@ -10,9 +10,6 @@ import ConditionalWrapper from '../shared/ConditionalWrapper';
 // Passes React Native-oriented system props through UDS Card
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const {
-  styled
-} = styledComponents;
 
 /**
  * A basic card component, unstyled by default.
@@ -43,7 +40,10 @@ const {
  * ## Accessibility
  * `Card` component accepts all the standard accessibility props.
  */
-const DynamicWidthContainer = styled.div(_ref => {
+const DynamicWidthContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Card__DynamicWidthContainer",
+  componentId: "components-web__sc-1elbtwd-0"
+})(_ref => {
   let {
     width,
     display,
@@ -92,9 +92,9 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
   const {
     borderRadius
   } = useThemeTokens('Card', tokens, variant);
-  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
+  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
     interactive: true,
-    ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
+    ...(interactiveCard?.variant || {})
   });
   const hasFooter = Boolean(footer);
   const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius, fullBleedContentPosition, hasFooter);
@@ -118,7 +118,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     display: imgColCurrentViewport === 0 ? 'none' : undefined
   };
   const columnFlex = {
-    flexGrow: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? 0 : 1,
+    flexGrow: interactiveCard?.body ? 0 : 1,
     flexShrink: 1,
     justifyContent: 'space-between'
   };
@@ -140,13 +140,13 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     tokens: restOfTokens,
     backgroundImage: backgroundImage,
     ...selectProps(rest),
-    children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsx(PressableCardBase, {
+    children: [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
+      children: typeof interactiveCard?.body === 'function' ? interactiveCard.body() : interactiveCard.body
     }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/_jsxs(StackView, {
       direction: contentStackDirection,
       tokens: {

package/lib/{Card → esm/Card}/CardContent.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType, selectSystemProps, useThemeTokens, useViewport, variantProp } from '@telus-uds/components-base';
-import { htmlAttrs, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const {
-  styled
-} = styledComponents;
-const CardContentContainer = styled.div(_ref => {
+const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CardContent__CardContentContainer",
+  componentId: "components-web__sc-1k2501q-0"
+})(_ref => {
   let {
     borderRadius,
     paddingBottom,

package/lib/{Card → esm/Card}/CardFooter.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType, paddingProp, selectSystemProps, useThemeTokens, useViewport, variantProp } from '@telus-uds/components-base';
-import { htmlAttrs, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const {
-  styled
-} = styledComponents;
-const CardFooterContainer = styled.div(_ref => {
+const CardFooterContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CardFooter__CardFooterContainer",
+  componentId: "components-web__sc-pm6vns-0"
+})(_ref => {
   let {
     backgroundColor,
     borderRadius,

package/lib/{Countdown → esm/Countdown}/Countdown.js

@@ -2,18 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Spacer, StackView, Typography, selectSystemProps, useViewport, useTheme, useThemeTokens, useResponsiveThemeTokens, createMediaQueryStyles, applyTextStyles, getTokensPropType, StyleSheet } 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, styledComponents } from '../utils';
+import { htmlAttrs, transformGradient } from '../utils';
 import Segment from './Segment';
 import useCountdown from './useCountdown';
 import { countdownVariantPropType, dictionaryContentShape } from './types';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DAYS = 'days';
+const HOURS = 'hours';
+const MINUTES = 'minutes';
+const SECONDS = 'seconds';
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const {
-  styled
-} = styledComponents;
-const Container = styled.div(_ref => {
+const Container = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Countdown__Container",
+  componentId: "components-web__sc-18tqcb2-0"
+})(_ref => {
   let {
     variant: {
       feature,
@@ -73,6 +78,7 @@ const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     targetTime,
     tokens,
     variant = {},
+    units = [DAYS, HOURS, MINUTES, SECONDS],
     ...rest
   } = _ref3;
   const [days, hours, minutes, seconds] = useCountdown(targetTime);
@@ -80,12 +86,8 @@ const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const {
     feature,
     large,
-    label,
     noDivider
   } = variant;
-  if (noDivider && !label) {
-    throw new Error('`noDivider` variant can only be used with `label` enabled!');
-  }
   const {
     themeOptions
   } = useTheme();
@@ -192,30 +194,44 @@ const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       themeTokens: containerStyles,
       gradient: semanticGradient,
       media: containerMediaIds,
-      children: /*#__PURE__*/_jsxs(StackView, {
+      children: /*#__PURE__*/_jsx(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)
-        })]
+        children: units.map((unit, index) => {
+          let number;
+          let labelKey;
+          switch (unit) {
+            case DAYS:
+              number = days;
+              labelKey = 'day';
+              break;
+            case HOURS:
+              number = hours;
+              labelKey = 'hour';
+              break;
+            case MINUTES:
+              number = minutes;
+              labelKey = 'minute';
+              break;
+            case SECONDS:
+              number = seconds;
+              labelKey = 'second';
+              break;
+            default:
+              return null;
+          }
+          return /*#__PURE__*/_jsxs(React.Fragment, {
+            children: [/*#__PURE__*/_jsx(Segment, {
+              labelKey: labelKey,
+              number: number,
+              ...(unit === DAYS && {
+                segmentWidth: String(number).length
+              }),
+              ...segmentProps,
+              ...applyTextStyles(themeTokens)
+            }), index < units.length - 1 && divider]
+          }, unit);
+        })
       })
     })
   );
@@ -234,6 +250,11 @@ Countdown.propTypes = {
    * representing a point in the future to count down to.
    */
   targetTime: PropTypes.instanceOf(Date),
-  variant: countdownVariantPropType
+  variant: countdownVariantPropType,
+  /**
+   * An array of strings representing the units to display in the countdown.
+   * Possible values: `'days'`, `'hours'`, `'minutes'`, `'seconds'`
+   */
+  units: PropTypes.arrayOf(PropTypes.oneOf([DAYS, HOURS, MINUTES, SECONDS]))
 };
 export default Countdown;

package/lib/{Countdown → esm/Countdown}/Segment.js

@@ -1,22 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StackView, Typography, useCopy } from '@telus-uds/components-base';
-import { styledComponents } from '../utils';
+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';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 
 // Pads with zeros on the left if it's a single digit number
+import { jsx as _jsx, 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 = styled.div(_ref => {
+const Container = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Segment__Container",
+  componentId: "components-web__sc-yrh35y-0"
+})(_ref => {
   let {
     segmentFontSize,
     segmentWidth = 2,

package/lib/{DatePicker → esm/DatePicker}/CalendarContainer.js

@@ -1,13 +1,13 @@
-import { styledComponents } from '../utils';
+import styled from 'styled-components';
 import defaultReactDatesCss from './reactDatesCss';
 
 // calendarDayDefaultHeight and calendarDayDefaultWidth
 // refer to circle size when selected, focused, or hovered and is passed  with getResponsiveCircleSize in DatePicker
 
-const {
-  styled
-} = styledComponents;
-const CalendarContainer = styled.div(_ref => {
+const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CalendarContainer",
+  componentId: "components-web__sc-qdc1tg-0"
+})(_ref => {
   let {
     daySize,
     remainingTokens,

package/lib/{DatePicker → esm/DatePicker}/DatePicker.js

@@ -4,15 +4,13 @@ import momentPropTypes from 'react-moment-proptypes';
 import 'react-dates/initialize';
 import { SingleDatePicker, DayPickerSingleDateController } from 'react-dates';
 import { IconButton, TextInput, Portal, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles, getTokensPropType, useSafeLayoutEffect } from '@telus-uds/components-base';
+import styled from 'styled-components';
 import moment from 'moment';
 import { isUndefined, throttle } from 'lodash';
 import CalendarContainer from './CalendarContainer';
 import dictionary from './dictionary';
-import { htmlAttrs, styledComponents } from '../utils';
+import { htmlAttrs } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const getResponsiveDaySize = function () {
   let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -30,15 +28,24 @@ const getResponsiveCircleSize = function () {
   }
   return inline ? 44 : 26;
 };
-const MonthCenterContainer = styled.div({
+const MonthCenterContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DatePicker__MonthCenterContainer",
+  componentId: "components-web__sc-mz8fi3-0"
+})({
   display: 'flex',
   justifyContent: 'center'
 });
-const DateInputWrapper = styled.div({
+const DateInputWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DatePicker__DateInputWrapper",
+  componentId: "components-web__sc-mz8fi3-1"
+})({
   display: 'flex',
   flexDirection: 'column'
 });
-const PortalPositionedContainer = styled.div({
+const PortalPositionedContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DatePicker__PortalPositionedContainer",
+  componentId: "components-web__sc-mz8fi3-2"
+})({
   position: 'absolute',
   left: _ref => {
     let {
@@ -82,7 +89,6 @@ const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
  * - Recommended for viewports greater than or equal to 576px
  */
 const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  var _dictionary$copy;
   let {
     copy = 'en',
     id,
@@ -118,7 +124,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const datePickerRef = React.useRef(null);
   useSafeLayoutEffect(() => {
     const updateDatePickerPosition = () => {
-      if (inline || !(textInputRef !== null && textInputRef !== void 0 && textInputRef.current)) return;
+      if (inline || !textInputRef?.current) return;
       const {
         left,
         top
@@ -174,8 +180,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   }, [isFocused]);
   React.useEffect(() => {
     if (inputText !== '' && inputDate !== undefined) {
-      var _textInputRef$current;
-      textInputRef === null || textInputRef === void 0 || (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 || _textInputRef$current.focus();
+      textInputRef?.current?.focus();
     }
   }, [inputDate, inputText]);
   const onFocusChange = _ref4 => {
@@ -216,10 +221,10 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     if (value === '' || moment(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
       if (value === '') {
         setInputDate(undefined); // Set inputDate to undefined if input is empty
-        onDateChange === null || onDateChange === void 0 || onDateChange(undefined);
+        onDateChange?.(undefined);
       } else {
         setInputDate(moment(value, dateFormat));
-        onDateChange === null || onDateChange === void 0 || onDateChange(moment(value, dateFormat));
+        onDateChange?.(moment(value, dateFormat));
       }
       setInputText(value === '' ? '' : moment(value, dateFormatWithoutSpaces).format(dateFormat));
     } else {
@@ -229,7 +234,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const handleOnKeyPress = event => {
     if (event.key === 'Backspace' && inputText === '') {
       setInputDate(undefined);
-      onDateChange === null || onDateChange === void 0 || onDateChange(undefined);
+      onDateChange?.(undefined);
     }
   };
   const handleValidation = inputValidation => {
@@ -246,11 +251,10 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const viewport = useViewport();
   const daySize = getResponsiveDaySize(inline, viewport);
   const circleSize = getResponsiveCircleSize(inline, viewport);
-  const HiddenInputFieldContainer = styled.div`
-      height: ${props => props.height};
-      width: ${props => props.width};
-      overflow: hidden;
-    `;
+  const HiddenInputFieldContainer = /*#__PURE__*/styled.div.withConfig({
+    displayName: "DatePicker__HiddenInputFieldContainer",
+    componentId: "components-web__sc-mz8fi3-3"
+  })(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
   const {
     hiddenInputFieldContainerHeight,
     hiddenInputFieldContainerWidth,
@@ -369,7 +373,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         onKeyPress: handleOnKeyPress,
         tooltip: tooltip,
         hintPosition: hintPosition,
-        label: label ?? ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription),
+        label: label ?? dictionary[copy]?.roleDescription,
         value: inputText,
         validation: handleValidation(validation),
         inactive: disabled,

package/lib/esm/DatePicker/reactDatesCss.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+const defaultReactDatesCss = /*#__PURE__*/css([".PresetDateRangePicker_panel{padding:0 22px 11px;}.PresetDateRangePicker_button{position:relative;height:100%;text-align:center;background:0 0;border:2px solid #00a699;color:#00a699;padding:4px 12px;margin-right:8px;font:inherit;font-weight:700;line-height:normal;overflow:visible;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;}.PresetDateRangePicker_button:active{outline:0;}.PresetDateRangePicker_button__selected{color:#fff;background:#00a699;}.SingleDatePickerInput{display:inline-block;background-color:#fff;position:absolute;top:-55px;}.SingleDatePickerInput__disabled{background-color:#f2f2f2;}.SingleDatePickerInput__block{display:block;}.SingleDatePickerInput__showClearDate{padding-right:30px;}.SingleDatePickerInput_clearDate{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;padding:10px;margin:0 10px 0 5px;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}.SingleDatePickerInput_clearDate__default:focus,.SingleDatePickerInput_clearDate__default:hover{background:#dbdbdb;border-radius:50%;}.SingleDatePickerInput_clearDate__small{padding:6px;}.SingleDatePickerInput_clearDate__hide{visibility:hidden;}.SingleDatePickerInput_clearDate_svg{fill:#82888a;height:12px;width:15px;vertical-align:middle;}.SingleDatePickerInput_clearDate_svg__small{height:9px;}.SingleDatePickerInput_calendarIcon{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;display:inline-block;vertical-align:middle;padding:10px;margin:0 5px 0 10px;}.SingleDatePickerInput_calendarIcon_svg{fill:#82888a;height:15px;width:14px;vertical-align:middle;}.SingleDatePicker{position:relative;display:inline-block;}.SingleDatePicker__block{display:block;}.SingleDatePicker_picker{z-index:1;background-color:#fff;position:absolute;}.SingleDatePicker_picker__rtl{direction:rtl;}.SingleDatePicker_picker__directionLeft{left:0;}.SingleDatePicker_picker__directionRight{right:0;}.SingleDatePicker_picker__portal{background-color:rgba(0,0,0,0.3);position:fixed;top:0;left:0;height:100%;width:100%;}.SingleDatePicker_picker__fullScreenPortal{background-color:#fff;}.SingleDatePicker_closeButton{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;position:absolute;top:0;right:0;padding:15px;z-index:2;}.SingleDatePicker_closeButton:focus,.SingleDatePicker_closeButton:hover{color:darken(#cacccd,10%);text-decoration:none;}.SingleDatePicker_closeButton_svg{height:15px;width:15px;fill:#cacccd;}.DayPickerKeyboardShortcuts_buttonReset{background:0 0;border:0;border-radius:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;cursor:pointer;font-size:14px;}.DayPickerKeyboardShortcuts_buttonReset:active{outline:0;}.DayPickerKeyboardShortcuts_show{width:33px;height:26px;position:absolute;z-index:2;}.DayPickerKeyboardShortcuts_show::before{content:'';display:block;position:absolute;}.DayPickerKeyboardShortcuts_show__bottomRight{bottom:0;right:0;}.DayPickerKeyboardShortcuts_show__bottomRight::before{border-top:26px solid transparent;border-right:33px solid #00a699;bottom:0;right:0;}.DayPickerKeyboardShortcuts_show__bottomRight:hover::before{border-right:33px solid #008489;}.DayPickerKeyboardShortcuts_show__topRight{top:0;right:0;}.DayPickerKeyboardShortcuts_show__topRight::before{border-bottom:26px solid transparent;border-right:33px solid #00a699;top:0;right:0;}.DayPickerKeyboardShortcuts_show__topRight:hover::before{border-right:33px solid #008489;}.DayPickerKeyboardShortcuts_show__topLeft{top:0;left:0;}.DayPickerKeyboardShortcuts_show__topLeft::before{border-bottom:26px solid transparent;border-left:33px solid #00a699;top:0;left:0;}.DayPickerKeyboardShortcuts_show__topLeft:hover::before{border-left:33px solid #008489;}.DayPickerKeyboardShortcuts_showSpan{color:#fff;position:absolute;}.DayPickerKeyboardShortcuts_showSpan__bottomRight{bottom:0;right:5px;}.DayPickerKeyboardShortcuts_showSpan__topRight{top:1px;right:5px;}.DayPickerKeyboardShortcuts_showSpan__topLeft{top:1px;left:5px;}.DayPickerKeyboardShortcuts_panel{overflow:auto;background:#fff;border:1px solid #dbdbdb;border-radius:2px;position:absolute;top:0;bottom:0;right:0;left:0;z-index:2;padding:22px;margin:33px;text-align:left;}.DayPickerKeyboardShortcuts_title{font-size:16px;font-weight:700;margin:0;}.DayPickerKeyboardShortcuts_list{list-style:none;padding:0;font-size:14px;}.DayPickerKeyboardShortcuts_close{position:absolute;right:22px;top:22px;z-index:2;}.DayPickerKeyboardShortcuts_close:active{outline:0;}.DayPickerKeyboardShortcuts_closeSvg{height:15px;width:15px;fill:#cacccd;}.DayPickerKeyboardShortcuts_closeSvg:focus,.DayPickerKeyboardShortcuts_closeSvg:hover{fill:#82888a;}.CalendarDay{-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:center;}.CalendarDay:active{outline:0;}.CalendarDay__defaultCursor{cursor:default;}.CalendarDay__default{border:1px solid #e4e7e7;color:#484848;background:#fff;}.CalendarDay__default:hover{background:#e4e7e7;border:1px solid #e4e7e7;color:inherit;}.CalendarDay__hovered_offset{background:#f4f5f5;border:1px double #e4e7e7;color:inherit;}.CalendarDay__outside{border:0;background:#fff;color:#484848;}.CalendarDay__outside:hover{border:0;}.CalendarDay__blocked_minimum_nights{background:#fff;border:1px solid #eceeee;color:#cacccd;}.CalendarDay__blocked_minimum_nights:active,.CalendarDay__blocked_minimum_nights:hover{background:#fff;color:#cacccd;}.CalendarDay__highlighted_calendar{background:#ffe8bc;color:#484848;}.CalendarDay__highlighted_calendar:active,.CalendarDay__highlighted_calendar:hover{background:#ffce71;color:#484848;}.CalendarDay__selected_span{background:#66e2da;border:1px double #33dacd;color:#fff;}.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover{background:#33dacd;border:1px double #33dacd;color:#fff;}.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover{background:#00a699;border:1px double #00a699;color:#fff;}.CalendarDay__hovered_span,.CalendarDay__hovered_span:hover{background:#b2f1ec;border:1px double #80e8e0;color:#007a87;}.CalendarDay__hovered_span:active{background:#80e8e0;border:1px double #80e8e0;color:#007a87;}.CalendarDay__blocked_calendar,.CalendarDay__blocked_calendar:active,.CalendarDay__blocked_calendar:hover{background:#cacccd;border:1px solid #cacccd;color:#82888a;}.CalendarDay__blocked_out_of_range,.CalendarDay__blocked_out_of_range:active,.CalendarDay__blocked_out_of_range:hover{background:#fff;border:1px solid #e4e7e7;color:#cacccd;}.CalendarDay__hovered_start_first_possible_end{background:#eceeee;border:1px double #eceeee;}.CalendarDay__hovered_start_blocked_min_nights{background:#eceeee;border:1px double #e4e7e7;}.CalendarMonth{background:#fff;text-align:center;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.CalendarMonth_table{border-collapse:collapse;border-spacing:0;}.CalendarMonth_verticalSpacing{border-collapse:separate;}.CalendarMonth_caption{color:#484848;font-size:18px;text-align:center;padding-top:22px;padding-bottom:37px;caption-side:initial;}.CalendarMonth_caption__verticalScrollable{padding-top:12px;padding-bottom:7px;}.CalendarMonthGrid{background:#fff;text-align:left;z-index:0;}.CalendarMonthGrid__animating{z-index:1;}.CalendarMonthGrid__horizontal{position:absolute;left:9px;}.CalendarMonthGrid__vertical,.CalendarMonthGrid__vertical_scrollable{margin:0 auto;}.CalendarMonthGrid_month__horizontal{display:inline-block;vertical-align:top;min-height:100%;}.CalendarMonthGrid_month__hideForAnimation{position:absolute;z-index:-1;opacity:0;pointer-events:none;}.CalendarMonthGrid_month__hidden{visibility:hidden;}.DayPickerNavigation{position:relative;z-index:2;}.DayPickerNavigation__horizontal{height:0;}.DayPickerNavigation__verticalScrollable_prevNav{z-index:1;}.DayPickerNavigation__verticalDefault{position:absolute;width:100%;height:52px;bottom:0;left:0;}.DayPickerNavigation__verticalScrollableDefault{position:relative;}.DayPickerNavigation__bottom{height:auto;}.DayPickerNavigation__bottomDefault{-webkit-box-pack:justify;-ms-flex-pack:justify;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;}.DayPickerNavigation_button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;padding:0;margin:0;}.DayPickerNavigation_button__default{border:1px solid #e4e7e7;background-color:#fff;color:#757575;}.DayPickerNavigation_button__default:focus,.DayPickerNavigation_button__default:hover{border:1px solid #c4c4c4;}.DayPickerNavigation_button__default:active{background:#f2f2f2;}.DayPickerNavigation_button__disabled{cursor:default;border:1px solid #f2f2f2;}.DayPickerNavigation_button__disabled:focus,.DayPickerNavigation_button__disabled:hover{border:1px solid #f2f2f2;}.DayPickerNavigation_button__disabled:active{background:0 0;}.DayPickerNavigation_button__horizontalDefault{position:absolute;top:18px;line-height:0.78;border-radius:3px;padding:6px 9px;}.DayPickerNavigation_bottomButton__horizontalDefault{position:static;margin:-10px 22px 30px;}.DayPickerNavigation_leftButton__horizontalDefault{left:22px;}.DayPickerNavigation_rightButton__horizontalDefault{right:22px;}.DayPickerNavigation_button__verticalDefault{padding:5px;background:#fff;box-shadow:0 0 5px 2px rgba(0,0,0,0.1);position:relative;display:inline-block;text-align:center;height:100%;width:50%;}.DayPickerNavigation_nextButton__verticalDefault{border-left:0;}.DayPickerNavigation_nextButton__verticalScrollableDefault,.DayPickerNavigation_prevButton__verticalScrollableDefault{width:100%;}.DayPickerNavigation_svg__horizontal{height:19px;width:19px;fill:#82888a;display:block;}.DayPickerNavigation_svg__vertical{height:42px;width:42px;fill:#484848;}.DayPickerNavigation_svg__disabled{fill:#f2f2f2;}.DayPicker{background:#fff;position:relative;text-align:left;}.DayPicker__horizontal{background:#fff;}.DayPicker__verticalScrollable{height:100%;}.DayPicker__hidden{visibility:hidden;}.DayPicker__withBorder{box-shadow:0 2px 6px rgba(0,0,0,0.05),0 0 0 1px rgba(0,0,0,0.07);border-radius:3px;}.DayPicker_portal__horizontal{box-shadow:none;position:absolute;left:50%;top:50%;}.DayPicker_portal__vertical{position:initial;}.DayPicker_focusRegion{outline:0;}.DayPicker_calendarInfo__horizontal,.DayPicker_wrapper__horizontal{display:inline-block;vertical-align:top;}.DayPicker_weekHeaders{position:relative;}.DayPicker_weekHeaders__horizontal{margin-left:9px;}.DayPicker_weekHeader{color:#757575;position:absolute;top:62px;z-index:2;text-align:left;}.DayPicker_weekHeader__vertical{left:50%;}.DayPicker_weekHeader__verticalScrollable{top:0;display:table-row;border-bottom:1px solid #dbdbdb;background:#fff;margin-left:0;left:0;width:100%;text-align:center;}.DayPicker_weekHeader_ul{list-style:none;margin:1px 0;padding-left:0;padding-right:0;font-size:14px;}.DayPicker_weekHeader_li{display:inline-block;text-align:center;}.DayPicker_transitionContainer{position:relative;overflow:hidden;border-radius:3px;}.DayPicker_transitionContainer__horizontal{-webkit-transition:height 0.2s ease-in-out;-moz-transition:height 0.2s ease-in-out;transition:height 0.2s ease-in-out;}.DayPicker_transitionContainer__vertical{width:100%;}.DayPicker_transitionContainer__verticalScrollable{padding-top:20px;height:100%;position:absolute;top:0;bottom:0;right:0;left:0;overflow-y:scroll;}.DateInput_input{display:none;}.DateInput_screenReaderMessage{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}.DateInput_fang{position:absolute;top:55px;width:20px;height:10px;left:22px;z-index:2;}.DateInput_fangShape{fill:#fff;}.DateInput_fangStroke{stroke:#dbdbdb;fill:transparent;}.DateRangePickerInput{background-color:#fff;display:inline-block;}.DateRangePickerInput__disabled{background:#f2f2f2;}.DateRangePickerInput__withBorder{border-radius:2px;border:1px solid #dbdbdb;}.DateRangePickerInput__rtl{direction:rtl;}.DateRangePickerInput__block{display:block;}.DateRangePickerInput__showClearDates{padding-right:30px;}.DateRangePickerInput_arrow{display:inline-block;vertical-align:middle;color:#484848;}.DateRangePickerInput_arrow_svg{vertical-align:middle;fill:#484848;height:24px;width:24px;}.DateRangePickerInput_clearDates{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;padding:10px;margin:0 10px 0 5px;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}.DateRangePickerInput_clearDates__small{padding:6px;}.DateRangePickerInput_clearDates_default:focus,.DateRangePickerInput_clearDates_default:hover{background:#dbdbdb;border-radius:50%;}.DateRangePickerInput_clearDates__hide{visibility:hidden;}.DateRangePickerInput_clearDates_svg{fill:#82888a;height:12px;width:15px;vertical-align:middle;}.DateRangePickerInput_clearDates_svg__small{height:9px;}.DateRangePickerInput_calendarIcon{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;display:inline-block;vertical-align:middle;padding:10px;margin:0 5px 0 10px;}.DateRangePickerInput_calendarIcon_svg{fill:#82888a;height:15px;width:14px;vertical-align:middle;}.DateRangePicker{position:relative;display:inline-block;}.DateRangePicker__block{display:block;}.DateRangePicker_picker{z-index:1;background-color:#fff;position:absolute;}.DateRangePicker_picker__rtl{direction:rtl;}.DateRangePicker_picker__directionLeft{left:0;}.DateRangePicker_picker__directionRight{right:0;}.DateRangePicker_picker__portal{background-color:rgba(0,0,0,0.3);position:fixed;top:0;left:0;height:100%;width:100%;}.DateRangePicker_picker__fullScreenPortal{background-color:#fff;}.DateRangePicker_closeButton{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;position:absolute;top:0;right:0;padding:15px;z-index:2;}.DateRangePicker_closeButton:focus,.DateRangePicker_closeButton:hover{color:darken(#cacccd,10%);text-decoration:none;}.DateRangePicker_closeButton_svg{height:15px;width:15px;fill:#cacccd;}"]);
+export default defaultReactDatesCss;

package/lib/{Disclaimer → esm/Disclaimer}/Disclaimer.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { applyTextStyles, selectSystemProps, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
-import { htmlAttrs, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledDisclaimer = styled.p(_ref => {
+const StyledDisclaimer = /*#__PURE__*/styled.p.withConfig({
+  displayName: "Disclaimer__StyledDisclaimer",
+  componentId: "components-web__sc-1l4xf7u-0"
+})(_ref => {
   let {
     fontName,
     fontWeight,

package/lib/{Footnote → esm/Footnote}/Footnote.js

@@ -1,22 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon, Portal, selectSystemProps, Typography, useCopy, useTheme, useResponsiveProp, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import styled, { createGlobalStyle } from 'styled-components';
 import OrderedListBase from '../OrderedList/OrderedListBase';
-import { htmlAttrs, media, renderStructuredContent, isElementFocusable, styledComponents } from '../utils';
+import { htmlAttrs, media, renderStructuredContent, isElementFocusable } from '../utils';
 import defaultDictionary from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const viewportBreakpoint = 1440;
-const {
-  styled,
-  createGlobalStyle
-} = styledComponents;
-const GlobalBodyScrollLock = createGlobalStyle({
+const GlobalBodyScrollLock = /*#__PURE__*/createGlobalStyle({
   'html, body': media().until('md').css({
     overflow: 'hidden'
   })
 });
-const StyledFootnote = styled.div(_ref => {
+const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Footnote__StyledFootnote",
+  componentId: "components-web__sc-1563bo5-0"
+})(_ref => {
   let {
     footnoteBackground,
     isVisible,
@@ -60,11 +60,17 @@ const StyledFootnote = styled.div(_ref => {
   }
   return {};
 });
-const StyledFootnoteHeader = styled.div(() => ({
+const StyledFootnoteHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Footnote__StyledFootnoteHeader",
+  componentId: "components-web__sc-1563bo5-1"
+})(() => ({
   position: 'relative',
   width: '100%'
 }));
-const StyledHeader = styled.div(_ref3 => {
+const StyledHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Footnote__StyledHeader",
+  componentId: "components-web__sc-1563bo5-2"
+})(_ref3 => {
   let {
     footnoteHeaderPaddingLeft,
     footnoteHeaderPaddingRight,
@@ -82,7 +88,10 @@ const StyledHeader = styled.div(_ref3 => {
     paddingLeft: footnoteHeaderPaddingLeft
   };
 });
-const StyledFootnoteBody = styled.div(_ref4 => {
+const StyledFootnoteBody = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Footnote__StyledFootnoteBody",
+  componentId: "components-web__sc-1563bo5-3"
+})(_ref4 => {
   let {
     footnoteBodyBackground,
     footnoteBodyPadding,
@@ -107,7 +116,10 @@ const StyledFootnoteBody = styled.div(_ref4 => {
     opacity: isTextVisible ? 1 : 0
   };
 });
-const List = styled(OrderedListBase)(_ref5 => {
+const List = /*#__PURE__*/styled(OrderedListBase).withConfig({
+  displayName: "Footnote__List",
+  componentId: "components-web__sc-1563bo5-4"
+})(_ref5 => {
   let {
     listPaddingLeft
   } = _ref5;
@@ -116,7 +128,10 @@ const List = styled(OrderedListBase)(_ref5 => {
     paddingLeft: listPaddingLeft
   };
 });
-const ListItem = styled(OrderedListBase.Item)(_ref6 => {
+const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
+  displayName: "Footnote__ListItem",
+  componentId: "components-web__sc-1563bo5-5"
+})(_ref6 => {
   let {
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -140,7 +155,10 @@ const ListItem = styled(OrderedListBase.Item)(_ref6 => {
     paddingLeft: listItemPaddingLeft
   };
 });
-const CloseButton = styled.button(_ref7 => {
+const CloseButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "Footnote__CloseButton",
+  componentId: "components-web__sc-1563bo5-6"
+})(_ref7 => {
   let {
     closeButtonBorder,
     closeButtonHeight,
@@ -161,7 +179,10 @@ const CloseButton = styled.button(_ref7 => {
     width: closeButtonWidth
   };
 });
-const ContentContainer = styled.div({
+const ContentContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Footnote__ContentContainer",
+  componentId: "components-web__sc-1563bo5-7"
+})({
   'margin-left': 'auto',
   'margin-right': 'auto',
   left: 0,
@@ -175,7 +196,10 @@ const ContentContainer = styled.div({
     width: maxWidth
   };
 });
-const StyledCustomContentContainer = styled.div(_ref9 => {
+const StyledCustomContentContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Footnote__StyledCustomContentContainer",
+  componentId: "components-web__sc-1563bo5-8"
+})(_ref9 => {
   let {
     listItemColor,
     listItemFontSize,
@@ -220,7 +244,6 @@ const usePrevious = value => {
  * - When `Footnote` is closed, focus must return to the initiating element
  */
 const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _theme$themeOptions;
   const {
     copy = 'en',
     number,
@@ -290,7 +313,7 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
   const prevProps = usePrevious(props);
   const theme = useTheme();
-  const maxWidth = useResponsiveProp((_theme$themeOptions = theme.themeOptions) === null || _theme$themeOptions === void 0 ? void 0 : _theme$themeOptions.contentMaxWidth);
+  const maxWidth = useResponsiveProp(theme.themeOptions?.contentMaxWidth);
   const [isScrollable, setIsScrollable] = React.useState(false);
   const closeFootnote = React.useCallback((event, options) => {
     onClose(event, options);
@@ -304,7 +327,6 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
    * if there are no interactive elements the focus will remain inside the close button.
    */
   const manageFootnoteFocusAndClose = React.useCallback(event => {
-    var _footnoteRef$current, _footnoteRef$current2;
     if (!isVisible) {
       return;
     }
@@ -325,11 +347,11 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
           firstElement.focus();
         }
       }
-    } else if ((event.type === 'click' || event.type === 'mousedown') && footnoteRef !== null && footnoteRef !== void 0 && footnoteRef.current && event.target && !(footnoteRef !== null && footnoteRef !== void 0 && (_footnoteRef$current = footnoteRef.current) !== null && _footnoteRef$current !== void 0 && _footnoteRef$current.contains(event.target)) && event.target.getAttribute('data-tds-id') !== 'footnote-link') {
+    } else if ((event.type === 'click' || event.type === 'mousedown') && footnoteRef?.current && event.target && !footnoteRef?.current?.contains(event.target) && event.target.getAttribute('data-tds-id') !== 'footnote-link') {
       closeFootnote(event, {
         returnFocus: false
       });
-    } else if (event.type === 'touchstart' && footnoteRef !== null && footnoteRef !== void 0 && footnoteRef.current && event.touches[0].target && !(footnoteRef !== null && footnoteRef !== void 0 && (_footnoteRef$current2 = footnoteRef.current) !== null && _footnoteRef$current2 !== void 0 && _footnoteRef$current2.contains(event.touches[0].target)) && event.touches[0].target.getAttribute('data-tds-id') !== 'footnote-link') {
+    } else if (event.type === 'touchstart' && footnoteRef?.current && event.touches[0].target && !footnoteRef?.current?.contains(event.touches[0].target) && event.touches[0].target.getAttribute('data-tds-id') !== 'footnote-link') {
       closeFootnote(event, {
         returnFocus: false
       });
@@ -381,8 +403,7 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Set height of header on mount
   React.useEffect(() => {
-    var _headerRef$current;
-    setHeaderHeight((_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.offsetHeight);
+    setHeaderHeight(headerRef.current?.offsetHeight);
   }, []);
   const preventDefault = event => {
     if (!bodyRef.current.contains(event.touches[0].target)) {

package/lib/{Footnote → esm/Footnote}/FootnoteLink.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { applyTextStyles, selectSystemProps, useCopy, useThemeTokens, variantProp } from '@telus-uds/components-base';
+import styled from 'styled-components';
 import dictionary from './dictionary';
-import { htmlAttrs, styledComponents } from '../utils';
+import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledSup = styled.sup(_ref => {
+const StyledSup = /*#__PURE__*/styled.sup.withConfig({
+  displayName: "FootnoteLink__StyledSup",
+  componentId: "components-web__sc-17nd7xo-0"
+})(_ref => {
   let {
     fontSize,
     lineHeight,