@telus-uds/components-web 2.43.0 → 3.0.0

package/lib/QuantitySelector/QuantitySelector.js

@@ -1,26 +1,19 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _utils = require("../utils");
-var _styles = require("./styles");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _SideButton = _interopRequireDefault(require("./SideButton"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, TextInput, Spacer, Feedback, InputLabel, useInputValue, useCopy, useThemeTokensCallback, getTokensPropType, selectSystemProps, a11yProps } from '@telus-uds/components-base';
+import { htmlAttrs } from '../utils';
+import { InputField, InputWrapper } from './styles';
+import defaultDictionary from './dictionary';
+import SideButton from './SideButton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   isNaN
 } = Number;
 const isNumber = value => {
   return typeof value === 'number' && !isNaN(value);
 };
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _utils.htmlAttrs]);
-const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htmlAttrs]);
+const QuantitySelector = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     id = 'quantity-selector',
     minNumber,
@@ -32,7 +25,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     hintPosition = 'inline',
     tooltip,
     onChange,
-    dictionary = _dictionary.default,
+    dictionary = defaultDictionary,
     accessibilityLabel,
     copy = 'en',
     variant = {
@@ -45,8 +38,8 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const {
     disabled
   } = variant;
-  const [error, setError] = _react.default.useState('');
-  const getCopy = (0, _componentsBase.useCopy)({
+  const [error, setError] = React.useState('');
+  const getCopy = useCopy({
     dictionary,
     copy
   });
@@ -59,7 +52,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const {
     currentValue: number,
     setValue: setNumber
-  } = (0, _componentsBase.useInputValue)({
+  } = useInputValue({
     value: getValidatedNumber(value),
     initialValue: getValidatedNumber(defaultValue),
     onChange
@@ -85,15 +78,15 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       setError(getCopy('errors').invalidCharacters);
     }
   };
-  const renderLabel = () => label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.InputLabel, {
+  const renderLabel = () => label ? /*#__PURE__*/_jsx(InputLabel, {
     forId: id,
     label: label,
     hint: hint,
     hintPosition: hintPosition,
     tooltip: tooltip
   }) : null;
-  const getTokens = (0, _componentsBase.useThemeTokensCallback)('QuantitySelector', tokens, variant);
-  const renderTextInput = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
+  const getTokens = useThemeTokensCallback('QuantitySelector', tokens, variant);
+  const renderTextInput = () => /*#__PURE__*/_jsx(TextInput, {
     nativeID: id,
     value: inputValue,
     defaultValue: defaultValue,
@@ -134,18 +127,18 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const flexOrder = order => ({
     order
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     testID: testID,
     ref: ref,
     ...selectProps(rest),
-    children: [renderLabel(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+    children: [renderLabel(), /*#__PURE__*/_jsx(Spacer, {
       space: 2
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputWrapper, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputField, {
+    }), /*#__PURE__*/_jsxs(InputWrapper, {
+      children: [/*#__PURE__*/_jsx(InputField, {
         children: renderTextInput()
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/_jsx("div", {
         style: flexOrder(0),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
+        children: /*#__PURE__*/_jsx(SideButton, {
           isEnabled: isDecreaseEnabled,
           onPress: () => updateNumber(number - 1),
           onDoubleClick: () => updateNumber(number - 1),
@@ -157,9 +150,9 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           accessibilityLabel: getCopy('accessibility').decreaseButton,
           accessibilityDisabled: !isDecreaseEnabled
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/_jsx("div", {
         style: flexOrder(2),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
+        children: /*#__PURE__*/_jsx(SideButton, {
           isEnabled: isIncreaseEnabled,
           onPress: () => updateNumber(number + 1),
           onDoubleClick: () => updateNumber(number + 1),
@@ -172,9 +165,9 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           }
         })
       })]
-    }), error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Box, {
+    }), error ? /*#__PURE__*/_jsx(Box, {
       vertical: 2,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Feedback, {
+      children: /*#__PURE__*/_jsx(Feedback, {
         validation: "error",
         children: error
       })
@@ -183,16 +176,16 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 
 // If a language dictionary entry is provided, it must contain every key
-const dictionaryContentShape = _propTypes.default.shape({
-  accessibility: _propTypes.default.shape({
-    a11yLabel: _propTypes.default.string.isRequired,
-    increaseButton: _propTypes.default.string.isRequired,
-    decreaseButton: _propTypes.default.string.isRequired
+const dictionaryContentShape = PropTypes.shape({
+  accessibility: PropTypes.shape({
+    a11yLabel: PropTypes.string.isRequired,
+    increaseButton: PropTypes.string.isRequired,
+    decreaseButton: PropTypes.string.isRequired
   }).isRequired,
-  errors: _propTypes.default.shape({
-    numberIsTooSmall: _propTypes.default.func.isRequired,
-    numberIsTooBig: _propTypes.default.func.isRequired,
-    invalidCharacters: _propTypes.default.string.isRequired
+  errors: PropTypes.shape({
+    numberIsTooSmall: PropTypes.func.isRequired,
+    numberIsTooBig: PropTypes.func.isRequired,
+    invalidCharacters: PropTypes.string.isRequired
   }).isRequired
 });
 QuantitySelector.displayName = 'QuantitySelector';
@@ -201,68 +194,67 @@ QuantitySelector.propTypes = {
   /**
    * The id of the input field
    */
-  id: _propTypes.default.string,
+  id: PropTypes.string,
   /**
    * The minimum number allowed
    */
-  minNumber: _propTypes.default.number,
+  minNumber: PropTypes.number,
   /**
    * The maximum number allowed
    */
-  maxNumber: _propTypes.default.number,
+  maxNumber: PropTypes.number,
   /**
    * The callback function that is called when the value of the input field changes
    */
-  onChange: _propTypes.default.func,
+  onChange: PropTypes.func,
   /**
    * The default value of the input field
    */
-  defaultValue: _propTypes.default.number,
+  defaultValue: PropTypes.number,
   /**
    * If the input's state is to be controlled by a parent component, use this prop
    * together with the `onChange` to pass down and update the lifted state.
    */
-  value: _propTypes.default.number,
+  value: PropTypes.number,
   /**
    * The label of the input field
    */
-  label: _propTypes.default.string,
+  label: PropTypes.string,
   /**
    * The hint of the input field
    */
-  hint: _propTypes.default.string,
+  hint: PropTypes.string,
   /**
    * The position of the hint. Could be shown along side the label or below it
    */
-  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
   /**
    * Adds a question mark which will display a tooltip when clicked
    */
-  tooltip: _propTypes.default.string,
+  tooltip: PropTypes.string,
   /**
    * The accessibility label of the input field
    */
-  accessibilityLabel: _propTypes.default.string,
+  accessibilityLabel: PropTypes.string,
   /**
    * The dictionary object containing the content for the input field
    */
-  dictionary: _propTypes.default.shape({
+  dictionary: PropTypes.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
   /**
    * The language to use for the copy.
    */
-  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr'])]),
-  variant: _propTypes.default.exact({
-    alternative: _propTypes.default.bool,
-    disabled: _propTypes.default.bool
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr'])]),
+  variant: PropTypes.exact({
+    alternative: PropTypes.bool,
+    disabled: PropTypes.bool
   }),
-  tokens: (0, _componentsBase.getTokensPropType)('QuantitySelector'),
+  tokens: getTokensPropType('QuantitySelector'),
   /**
    * Sets `data-testid` attribute on the input field for testing purposes.
    */
-  testID: _propTypes.default.string
+  testID: PropTypes.string
 };
-var _default = QuantitySelector;
-exports.default = _default;
+export default QuantitySelector;

package/lib/QuantitySelector/SideButton.js

@@ -1,15 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _componentsBase = require("@telus-uds/components-base");
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import { IconButton, getTokensPropType, useThemeTokensCallback } from '@telus-uds/components-base';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SideButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     isEnabled = true,
     onPress = () => {},
@@ -19,7 +12,7 @@ const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens = {},
     variant = {}
   } = _ref;
-  const getTokens = (0, _componentsBase.useThemeTokensCallback)('QuantitySelectorSideButton', tokens, variant);
+  const getTokens = useThemeTokensCallback('QuantitySelectorSideButton', tokens, variant);
   const getButtonTokens = _ref2 => {
     let {
       buttonState,
@@ -52,7 +45,7 @@ const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       outerBorderWidth: 0
     };
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
+  return /*#__PURE__*/_jsx(IconButton, {
     tokens: buttonState => getButtonTokens({
       disabled: !isEnabled,
       buttonState
@@ -66,13 +59,12 @@ const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 SideButton.displayName = 'QuantitySelectorSideButton';
 SideButton.propTypes = {
-  isEnabled: _propTypes.default.bool,
-  onPress: _propTypes.default.func,
-  onDoubleClick: _propTypes.default.func,
-  accessibilityLabel: _propTypes.default.string,
-  accessibilityDisabled: _propTypes.default.bool,
-  tokens: (0, _componentsBase.getTokensPropType)('QuantitySelectorSideButton'),
-  variant: _propTypes.default.object
+  isEnabled: PropTypes.bool,
+  onPress: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  accessibilityLabel: PropTypes.string,
+  accessibilityDisabled: PropTypes.bool,
+  tokens: getTokensPropType('QuantitySelectorSideButton'),
+  variant: PropTypes.object
 };
-var _default = SideButton;
-exports.default = _default;
+export default SideButton;

package/lib/QuantitySelector/dictionary.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
+export default {
   en: {
     accessibility: {
       a11yLabel: 'Quantity selector',
@@ -29,5 +23,4 @@ var _default = {
       invalidCharacters: `Essayez d'utiliser seulement des chiffres. Les caractères alphabétiques ou les symboles ne sont pas permis.`
     }
   }
-};
-exports.default = _default;
+};

package/lib/QuantitySelector/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _QuantitySelector = _interopRequireDefault(require("./QuantitySelector"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _QuantitySelector.default;
-exports.default = _default;
+import QuantitySelector from './QuantitySelector';
+export default QuantitySelector;

package/lib/QuantitySelector/styles.js

@@ -1,18 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.InputWrapper = exports.InputField = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const InputField = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import styled from 'styled-components';
+export const InputField = /*#__PURE__*/styled.div.withConfig({
   displayName: "styles__InputField",
   componentId: "components-web__sc-1lrz1xk-0"
 })(["order:1;text-align:center;z-index:10;input{text-align:center;}"]);
-exports.InputField = InputField;
-const InputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+export const InputWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "styles__InputWrapper",
   componentId: "components-web__sc-1lrz1xk-1"
-})(["text-align:start;display:flex;flex-direction:row;flex-wrap:nowrap;"]);
-exports.InputWrapper = InputWrapper;
+})(["text-align:start;display:flex;flex-direction:row;flex-wrap:nowrap;"]);

package/lib/ResponsiveImage/ResponsiveImage.js

@@ -1,17 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _systemConstants = require("@telus-uds/system-constants");
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import { selectSystemProps } from '@telus-uds/components-base';
+import { viewports } from '@telus-uds/system-constants';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const staticStyles = {
   image: {
     display: 'block',
@@ -22,7 +15,7 @@ const staticStyles = {
 /**
  * Provide different image sources for different screen sizes.
  */
-const ResponsiveImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ResponsiveImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     xsSrc,
     smSrc,
@@ -34,25 +27,25 @@ const ResponsiveImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     loading = 'eager',
     ...rest
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("picture", {
+  return /*#__PURE__*/_jsxs("picture", {
     ...selectProps(rest),
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+    children: [/*#__PURE__*/_jsx("source", {
       srcSet: xlSrc,
-      media: `(min-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.xl)}px)`
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      media: `(min-width: ${viewports.map.get(viewports.xl)}px)`
+    }), /*#__PURE__*/_jsx("source", {
       srcSet: lgSrc,
-      media: `(min-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.lg)}px)`
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      media: `(min-width: ${viewports.map.get(viewports.lg)}px)`
+    }), /*#__PURE__*/_jsx("source", {
       srcSet: mdSrc,
-      media: `(min-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.md)}px)`
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      media: `(min-width: ${viewports.map.get(viewports.md)}px)`
+    }), /*#__PURE__*/_jsx("source", {
       srcSet: smSrc,
-      media: `(min-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.sm)}px)`
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      media: `(min-width: ${viewports.map.get(viewports.sm)}px)`
+    }), /*#__PURE__*/_jsx("source", {
       srcSet: xsSrc,
-      media: `(max-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.sm) - 1}px)`
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      media: `(max-width: ${viewports.map.get(viewports.sm) - 1}px)`
+    }), /*#__PURE__*/_jsx("img", {
       src: fallbackSrc,
       alt: alt,
       style: staticStyles.image,
@@ -66,37 +59,36 @@ ResponsiveImage.propTypes = {
   /**
    * The src attribute used for screen widths up to 575px
    */
-  xsSrc: _propTypes.default.string.isRequired,
+  xsSrc: PropTypes.string.isRequired,
   /**
    * The src attribute used for screen widths greater than 576px
    */
-  smSrc: _propTypes.default.string.isRequired,
+  smSrc: PropTypes.string.isRequired,
   /**
    * The src attribute used for screen widths greater than 768px
    */
-  mdSrc: _propTypes.default.string,
+  mdSrc: PropTypes.string,
   /**
    * The src attribute used for screen widths greater than 992px
    */
-  lgSrc: _propTypes.default.string,
+  lgSrc: PropTypes.string,
   /**
    * The src attribute used for screen widths greater than 1200px
    */
-  xlSrc: _propTypes.default.string,
+  xlSrc: PropTypes.string,
   /**
    * The src attribute used for browsers that don't support responsive images (InternetExplorer)
    */
-  fallbackSrc: _propTypes.default.string.isRequired,
+  fallbackSrc: PropTypes.string.isRequired,
   /**
    * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
    */
-  alt: _propTypes.default.string.isRequired,
+  alt: PropTypes.string.isRequired,
   /**
    * Loading strategy.
    * @default 'eager'
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
    */
-  loading: _propTypes.default.oneOf(['eager', 'lazy'])
+  loading: PropTypes.oneOf(['eager', 'lazy'])
 };
-var _default = ResponsiveImage;
-exports.default = _default;
+export default ResponsiveImage;

package/lib/ResponsiveImage/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ResponsiveImage = _interopRequireDefault(require("./ResponsiveImage"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _ResponsiveImage.default;
-exports.default = _default;
+import ResponsiveImage from './ResponsiveImage';
+export default ResponsiveImage;

package/lib/Ribbon/Ribbon.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-const RibbonWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import { selectSystemProps, Typography, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const RibbonWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "Ribbon__RibbonWrapper",
   componentId: "components-web__sc-186270k-0"
 })(["width:fit-content;position:", ";z-index:1;left:", ";top:", ";"], _ref => {
@@ -32,7 +25,7 @@ const RibbonWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref3;
   return top && `${top}px`;
 });
-const RibbonContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const RibbonContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Ribbon__RibbonContainer",
   componentId: "components-web__sc-186270k-1"
 })(["display:flex;justify-content:center;background:", ";padding:", ";border-radius:", ";width:fit-content;box-shadow:", ";border-bottom-right-radius:", ";border-bottom-left-radius:", ";"], _ref4 => {
@@ -67,7 +60,7 @@ const RibbonContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref9;
   return borderRadiusBottomRight;
 });
-const RibbonCurve = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const RibbonCurve = /*#__PURE__*/styled.div.withConfig({
   displayName: "Ribbon__RibbonCurve",
   componentId: "components-web__sc-186270k-2"
 })(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;overflow:hidden;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
@@ -111,7 +104,7 @@ const RibbonCurve = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref17;
   return curveAfterWidth;
 });
-const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref18, ref) => {
+const Ribbon = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   let {
     children,
     tokens,
@@ -149,7 +142,7 @@ const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref18, ref) => {
     fontWeight,
     fontSize,
     lineHeight
-  } = (0, _componentsBase.useThemeTokens)('Ribbon', tokens, {
+  } = useThemeTokens('Ribbon', tokens, {
     ...variant,
     wrap: shouldWrap
   });
@@ -163,13 +156,13 @@ const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref18, ref) => {
     const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`;
     background = gradientBackground;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RibbonWrapper, {
+  return /*#__PURE__*/_jsxs(RibbonWrapper, {
     left: left,
     top: top,
     "data-testid": "ribbon-wrapper",
     ref: ref,
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RibbonContainer, {
+    children: [/*#__PURE__*/_jsx(RibbonContainer, {
       shouldWrap: shouldWrap,
       backgroundColor: background,
       padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
@@ -177,7 +170,7 @@ const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref18, ref) => {
       boxShadow: `${boxShadowPaddingTop}px ${boxShadowPaddingRight}px ${boxShadowPaddingBottom}px ${boxShadowPaddingLeft}px ${boxShadowColor}`,
       borderRadiusBottomLeft: `${borderRadiusBottomLeft}px`,
       borderRadiusBottomRight: `${borderRadiusBottomRight}px`,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      children: /*#__PURE__*/_jsx(Typography, {
         variant: {
           bold: true,
           inverse: true
@@ -191,7 +184,7 @@ const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref18, ref) => {
         },
         children: children
       })
-    }), shouldWrap && /*#__PURE__*/(0, _jsxRuntime.jsx)(RibbonCurve, {
+    }), shouldWrap && /*#__PURE__*/_jsx(RibbonCurve, {
       "data-testid": "ribbon-curve",
       backgroundColor: backgroundColor,
       curveMarginTop: `${curveMarginTop}px`,
@@ -208,16 +201,15 @@ const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref18, ref) => {
 Ribbon.displayName = 'Ribbon';
 Ribbon.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _componentsBase.getTokensPropType)('Ribbon'),
-  children: _propTypes.default.node,
+  tokens: getTokensPropType('Ribbon'),
+  children: PropTypes.node,
   /** show/hide the ribbon fold
    * @deprecated please don't rely on `wrap` to turn off the wrapping (use `Badge` instead) as it will be removed in the future
    */
-  wrap: _propTypes.default.bool,
+  wrap: PropTypes.bool,
   /** sets the left offset (triggers absolute positioning) */
-  left: _propTypes.default.number,
+  left: PropTypes.number,
   /** sets the top offset (triggers absolute positioning) */
-  top: _propTypes.default.number
+  top: PropTypes.number
 };
-var _default = Ribbon;
-exports.default = _default;
+export default Ribbon;

package/lib/Ribbon/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Ribbon = _interopRequireDefault(require("./Ribbon"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Ribbon.default;
-exports.default = _default;
+import Ribbon from './Ribbon';
+export default Ribbon;