@telus-uds/components-community.sticky 1.7.1 → 2.0.1

package/.eslintrc.cjs

@@ -0,0 +1,21 @@
+const path = require('path')
+const base = require('../../../../eslintrc.base.cjs')
+
+base.rules['import/no-extraneous-dependencies'] = [
+  'error',
+  { packageDir: [__dirname, path.join(__dirname, '../..')] }
+]
+base.settings = {
+  ...base.settings,
+  'import/resolver': {
+    node: {
+      ...base.settings?.['import/resolver']?.node,
+      moduleDirectory: [
+        path.join(__dirname, '../../node_modules'),
+        path.join(__dirname, '../../../../node_modules')
+      ]
+    }
+  }
+}
+
+module.exports = base

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @telus-uds/components-community.sticky
 
-This log was last generated on Wed, 13 Nov 2024 17:18:39 GMT and should not be manually modified.
+<!-- This log was last generated on Sat, 23 Nov 2024 01:38:59 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 2.0.1
+
+Sat, 23 Nov 2024 01:38:59 GMT
+
+### Patches
+
+- Upgrade dependencies (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v2.0.2
+- Bump @telus-uds/components-web to v3.0.1
+
+## 2.0.0
+
+Fri, 22 Nov 2024 23:43:49 GMT
+
+### Major changes
+
+- Upgrade `react-native` and many other dependencies and refactor to ESM-only builds (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v1.97.1
+- Bump @telus-uds/system-constants to v2.0.0
+- Bump @telus-uds/system-theme-tokens to v3.0.0
+- Bump @telus-uds/components-web to v3.0.0
+
 ## 1.7.1
 
-Wed, 13 Nov 2024 17:18:39 GMT
+Wed, 13 Nov 2024 17:23:43 GMT
 
 ### Patches
 

package/babel.config.cjs

@@ -0,0 +1,4 @@
+const baseConfig = require('../../../../babel.config.base.cjs')
+const name = require('./package.json').name.split('@telus-uds/').pop()
+
+module.exports = baseConfig({ name })

package/jest.config.cjs

@@ -0,0 +1,22 @@
+module.exports = () => ({
+  displayName: {
+    name: require('./package.json').name.split('@telus-uds/').pop(),
+    color: 'magenta'
+  },
+  testEnvironment: 'jsdom',
+  // __dirname here tells babel to look in ds-allium/ for babel root when running from monorepo root
+  transform: { '\\.(js|jsx)$': ['babel-jest', { cwd: __dirname }] },
+  moduleNameMapper: {
+    '.+\\.(otf|png|jpg)$': 'identity-obj-proxy',
+    // mock icon imports as in https://jestjs.io/docs/webpack#mocking-css-modules
+    '\\.icon.svg': '<rootDir>/__mocks__/iconMock.jsx',
+    '\\.css': '<rootDir>/__mocks__/styleMock.js',
+    '^@telus-uds/components-base/server$': '<rootDir>/../../../components-base/lib/server.js'
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|react-native-web|@react-native-picker)'
+  ],
+  // Count everything in src when calculating coverage
+  collectCoverageFrom: ['src/*.{js,jsx}']
+})

package/lib/Sticky.js

@@ -1,16 +1,9 @@
-"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 _lodash = _interopRequireDefault(require("lodash.throttle"));
-var _styles = _interopRequireDefault(require("./styles"));
-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 { spacingProps, Box } from '@telus-uds/components-base';
+import throttle from 'lodash.throttle';
+import StickyWrapper from './styles';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function createObserver(ref, callback) {
   let workWithViewport = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   const observer = new IntersectionObserver(_ref => {
@@ -58,24 +51,24 @@ const Sticky = _ref2 => {
     // eslint-disable-next-line no-param-reassign
     variant = 'default';
   }
-  const sentinelTopRef = _react.default.useRef();
-  const sentinelBottomRef = _react.default.useRef();
-  const stickyWrapperRef = _react.default.useRef();
-  const [observer, setObserver] = _react.default.useState();
-  const onStickThrottled = (0, _lodash.default)(onStick, throttleTime, throttleConfig);
+  const sentinelTopRef = React.useRef();
+  const sentinelBottomRef = React.useRef();
+  const stickyWrapperRef = React.useRef();
+  const [observer, setObserver] = React.useState();
+  const onStickThrottled = throttle(onStick, throttleTime, throttleConfig);
   const sentinelPositionRef = position === 'top' ? sentinelTopRef : sentinelBottomRef;
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     if (observer) {
       observer.disconnect();
     }
     if (variant === 'default' || variant === 'hidden') {
       setObserver(createObserver(sentinelPositionRef, intersected => {
         var _stickyWrapperRef$cur, _stickyWrapperRef$cur2;
-        (_stickyWrapperRef$cur = stickyWrapperRef.current) === null || _stickyWrapperRef$cur === void 0 ? void 0 : _stickyWrapperRef$cur.classList.toggle('sticky-mode', intersected);
-        (_stickyWrapperRef$cur2 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur2 === void 0 ? void 0 : _stickyWrapperRef$cur2.classList.toggle(position, intersected);
+        (_stickyWrapperRef$cur = stickyWrapperRef.current) === null || _stickyWrapperRef$cur === void 0 || _stickyWrapperRef$cur.classList.toggle('sticky-mode', intersected);
+        (_stickyWrapperRef$cur2 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur2 === void 0 || _stickyWrapperRef$cur2.classList.toggle(position, intersected);
         if (intersected) {
           var _stickyWrapperRef$cur3;
-          (_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.remove('pristine');
+          (_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 || _stickyWrapperRef$cur3.classList.remove('pristine');
         }
         onStickThrottled(intersected);
       }, workWithViewport));
@@ -83,31 +76,31 @@ const Sticky = _ref2 => {
     if (variant === 'alternate') {
       setObserver(createObserver(sentinelBottomRef, intersected => {
         var _stickyWrapperRef$cur4, _stickyWrapperRef$cur5;
-        (_stickyWrapperRef$cur4 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur4 === void 0 ? void 0 : _stickyWrapperRef$cur4.classList.toggle('sticky-mode', intersected);
-        (_stickyWrapperRef$cur5 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur5 === void 0 ? void 0 : _stickyWrapperRef$cur5.classList.toggle('bottom', intersected);
+        (_stickyWrapperRef$cur4 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur4 === void 0 || _stickyWrapperRef$cur4.classList.toggle('sticky-mode', intersected);
+        (_stickyWrapperRef$cur5 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur5 === void 0 || _stickyWrapperRef$cur5.classList.toggle('bottom', intersected);
         onStickThrottled(intersected);
       }, workWithViewport));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [variant]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
       className: "sentinelTop",
       ref: sentinelTopRef
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.default, {
+    }), /*#__PURE__*/_jsx(StickyWrapper, {
       className: `${variant} ${variant === 'hidden' ? 'pristine' : ''}`,
       ref: stickyWrapperRef,
       shadow: shadow,
       position: position,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/_jsx("div", {
         className: "sticky-element",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Box, {
+        children: /*#__PURE__*/_jsx(Box, {
           vertical: vertical,
           horizontal: horizontal,
           children: children
         })
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       className: "sentinelBottom",
       ref: sentinelBottomRef
     })]
@@ -118,43 +111,42 @@ Sticky.propTypes = {
    * Sets top and bottom padding using the theme's spacing scale.
    *
    */
-  vertical: _componentsBase.spacingProps.types.spacingValue,
+  vertical: spacingProps.types.spacingValue,
   /**
    * Sets left and right padding using the theme's spacing scale.
    *
    */
-  horizontal: _componentsBase.spacingProps.types.spacingValue,
+  horizontal: spacingProps.types.spacingValue,
   /**
    * Whether the sticky should wait to cross the viewport to stick or not
    * Defaults to true. Set to false for nested container (using overflow)
    */
-  workWithViewport: _propTypes.default.bool,
+  workWithViewport: PropTypes.bool,
   /**
    * Sticky accepts any content as children.
    */
-  children: _propTypes.default.node.isRequired,
-  variant: _propTypes.default.oneOf(['default', 'alternate', 'hidden']),
+  children: PropTypes.node.isRequired,
+  variant: PropTypes.oneOf(['default', 'alternate', 'hidden']),
   /**
    * Sets whether sticky component is stuck to top or bottom of page.
    * Note: Position "bottom" does not support the "hidden" variant.
    */
-  position: _propTypes.default.oneOf(['top', 'bottom']),
+  position: PropTypes.oneOf(['top', 'bottom']),
   /**
    * Adds shadow to sticky component.
    */
-  shadow: _propTypes.default.bool,
+  shadow: PropTypes.bool,
   /**
    * Callback when sticky is stuck to top or bottom of page.
    */
-  onStick: _propTypes.default.func,
+  onStick: PropTypes.func,
   /**
    * Time in milliseconds to throttle the onStick callback.
    */
-  throttleTime: _propTypes.default.number,
+  throttleTime: PropTypes.number,
   /**
    * Throttle configuration.
    */
-  throttleConfig: _propTypes.default.object
+  throttleConfig: PropTypes.object
 };
-var _default = Sticky;
-exports.default = _default;
+export default Sticky;

package/lib/index.js

@@ -1,16 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Sticky", {
-  enumerable: true,
-  get: function () {
-    return _Sticky.default;
-  }
-});
-exports.default = void 0;
-var _Sticky = _interopRequireDefault(require("./Sticky"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Sticky.default;
-exports.default = _default;
+import Sticky from './Sticky';
+export { default as Sticky } from './Sticky';
+export default Sticky;

package/lib/styles.js

@@ -1,15 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const StickyWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import styled, { css } from 'styled-components';
+const StickyWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "styles__StickyWrapper",
   componentId: "[object Object]__sc-160gk65-0"
-})(["", " &.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;z-index:1;", " ", " ", "}&.hidden{animation:0.3s animateIn forwards;", "}}&.alternate{}&.hidden{position:sticky;pointer-events:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;&.pristine{display:none;}.sticky-element{background:white;", "}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}}@keyframes shadowIn{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}}@keyframes shadowOut{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}}"], props => props.position === 'top' ? (0, _styledComponents.css)(["top:0;"]) : (0, _styledComponents.css)(["bottom:0;"]), props => props.position === 'top' && (0, _styledComponents.css)(["top:0px;"]), props => props.position === 'bottom' && (0, _styledComponents.css)(["bottom:0px;"]), props => props.shadow && (0, _styledComponents.css)(["box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);"]), props => props.shadow && (0, _styledComponents.css)([".sticky-element{animation:0.3s shadowIn forwards;}"]), props => props.shadow && (0, _styledComponents.css)(["animation:0.6s shadowOut forwards;"]));
-var _default = StickyWrapper;
-exports.default = _default;
+})(["", " &.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;z-index:1;", " ", " ", "}&.hidden{animation:0.3s animateIn forwards;", "}}&.alternate{}&.hidden{position:sticky;pointer-events:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;&.pristine{display:none;}.sticky-element{background:white;", "}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}}@keyframes shadowIn{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}}@keyframes shadowOut{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}}"], props => props.position === 'top' ? css(["top:0;"]) : css(["bottom:0;"]), props => props.position === 'top' && css(["top:0px;"]), props => props.position === 'bottom' && css(["bottom:0px;"]), props => props.shadow && css(["box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);"]), props => props.shadow && css([".sticky-element{animation:0.3s shadowIn forwards;}"]), props => props.shadow && css(["animation:0.6s shadowOut forwards;"]));
+export default StickyWrapper;

package/package.json

@@ -1,18 +1,19 @@
 {
   "author": "TELUS Digital",
+  "type": "module",
   "browserslist": [
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
-    "@telus-uds/components-base": "1.97.0",
-    "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.66.0",
+    "@telus-uds/components-base": "^2.0.2",
+    "@telus-uds/system-constants": "^2.0.0",
+    "@telus-uds/system-theme-tokens": "^3.0.0",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
     "styled-components": "^5.3.10"
   },
   "devDependencies": {
-    "@telus-uds/components-web": "^2.44.0",
+    "@telus-uds/components-web": "^3.0.1",
     "@telus-uds/browserslist-config": "^1.0.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^13.3.0",
@@ -24,11 +25,17 @@
   "license": "UNLICENSED",
   "name": "@telus-uds/components-community.sticky",
   "peerDependencies": {
-    "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "main": "lib/index.js",
-  "module": "lib-module/index.js",
+  "module": "lib/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/telus/universal-design-system.git"
@@ -38,13 +45,11 @@
     "lint": "telus-standard",
     "lint:fix": "telus-standard --fix",
     "test": "jest",
-    "build:main": "babel src -d lib",
-    "build:module": "babel src -d lib-module --env-name module",
-    "build": "npm run build:main && npm run build:module"
+    "build": "babel src -d lib --env-name module"
   },
   "sideEffects": false,
   "standard-engine": {
     "skip": true
   },
-  "version": "1.7.1"
+  "version": "2.0.1"
 }

package/lib-module/Sticky.js

@@ -1,154 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { spacingProps, Box } from '@telus-uds/components-base';
-import throttle from 'lodash.throttle';
-import StickyWrapper from './styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function createObserver(ref, callback) {
-  let workWithViewport = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  const observer = new IntersectionObserver(_ref => {
-    let [e] = _ref;
-    const isNotVisibleInViewport = e.intersectionRatio < 1;
-    let correctYPosition = true;
-    if (workWithViewport) {
-      const {
-        y
-      } = e.boundingClientRect;
-      correctYPosition = y < 0;
-    }
-    callback(isNotVisibleInViewport && correctYPosition);
-  });
-  observer.observe(ref.current);
-  return observer;
-}
-const Sticky = _ref2 => {
-  let {
-    children,
-    variant = 'default',
-    vertical = {
-      xs: 0,
-      sm: 0,
-      lg: 0,
-      xl: 0
-    },
-    horizontal = {
-      xs: 0,
-      sm: 0,
-      lg: 0,
-      xl: 0
-    },
-    workWithViewport = true,
-    position = 'top',
-    shadow = true,
-    onStick = () => {},
-    throttleTime = 100,
-    throttleConfig = {
-      trailing: true
-    }
-  } = _ref2;
-  // Position "bottom" does not support the "hidden" variant.
-  if (variant === 'hidden' && position === 'bottom') {
-    // eslint-disable-next-line no-param-reassign
-    variant = 'default';
-  }
-  const sentinelTopRef = React.useRef();
-  const sentinelBottomRef = React.useRef();
-  const stickyWrapperRef = React.useRef();
-  const [observer, setObserver] = React.useState();
-  const onStickThrottled = throttle(onStick, throttleTime, throttleConfig);
-  const sentinelPositionRef = position === 'top' ? sentinelTopRef : sentinelBottomRef;
-  React.useEffect(() => {
-    if (observer) {
-      observer.disconnect();
-    }
-    if (variant === 'default' || variant === 'hidden') {
-      setObserver(createObserver(sentinelPositionRef, intersected => {
-        var _stickyWrapperRef$cur, _stickyWrapperRef$cur2;
-        (_stickyWrapperRef$cur = stickyWrapperRef.current) === null || _stickyWrapperRef$cur === void 0 ? void 0 : _stickyWrapperRef$cur.classList.toggle('sticky-mode', intersected);
-        (_stickyWrapperRef$cur2 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur2 === void 0 ? void 0 : _stickyWrapperRef$cur2.classList.toggle(position, intersected);
-        if (intersected) {
-          var _stickyWrapperRef$cur3;
-          (_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.remove('pristine');
-        }
-        onStickThrottled(intersected);
-      }, workWithViewport));
-    }
-    if (variant === 'alternate') {
-      setObserver(createObserver(sentinelBottomRef, intersected => {
-        var _stickyWrapperRef$cur4, _stickyWrapperRef$cur5;
-        (_stickyWrapperRef$cur4 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur4 === void 0 ? void 0 : _stickyWrapperRef$cur4.classList.toggle('sticky-mode', intersected);
-        (_stickyWrapperRef$cur5 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur5 === void 0 ? void 0 : _stickyWrapperRef$cur5.classList.toggle('bottom', intersected);
-        onStickThrottled(intersected);
-      }, workWithViewport));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [variant]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
-      className: "sentinelTop",
-      ref: sentinelTopRef
-    }), /*#__PURE__*/_jsx(StickyWrapper, {
-      className: `${variant} ${variant === 'hidden' ? 'pristine' : ''}`,
-      ref: stickyWrapperRef,
-      shadow: shadow,
-      position: position,
-      children: /*#__PURE__*/_jsx("div", {
-        className: "sticky-element",
-        children: /*#__PURE__*/_jsx(Box, {
-          vertical: vertical,
-          horizontal: horizontal,
-          children: children
-        })
-      })
-    }), /*#__PURE__*/_jsx("div", {
-      className: "sentinelBottom",
-      ref: sentinelBottomRef
-    })]
-  });
-};
-Sticky.propTypes = {
-  /**
-   * Sets top and bottom padding using the theme's spacing scale.
-   *
-   */
-  vertical: spacingProps.types.spacingValue,
-  /**
-   * Sets left and right padding using the theme's spacing scale.
-   *
-   */
-  horizontal: spacingProps.types.spacingValue,
-  /**
-   * Whether the sticky should wait to cross the viewport to stick or not
-   * Defaults to true. Set to false for nested container (using overflow)
-   */
-  workWithViewport: PropTypes.bool,
-  /**
-   * Sticky accepts any content as children.
-   */
-  children: PropTypes.node.isRequired,
-  variant: PropTypes.oneOf(['default', 'alternate', 'hidden']),
-  /**
-   * Sets whether sticky component is stuck to top or bottom of page.
-   * Note: Position "bottom" does not support the "hidden" variant.
-   */
-  position: PropTypes.oneOf(['top', 'bottom']),
-  /**
-   * Adds shadow to sticky component.
-   */
-  shadow: PropTypes.bool,
-  /**
-   * Callback when sticky is stuck to top or bottom of page.
-   */
-  onStick: PropTypes.func,
-  /**
-   * Time in milliseconds to throttle the onStick callback.
-   */
-  throttleTime: PropTypes.number,
-  /**
-   * Throttle configuration.
-   */
-  throttleConfig: PropTypes.object
-};
-export default Sticky;

package/lib-module/index.js

@@ -1,3 +0,0 @@
-import Sticky from './Sticky';
-export { default as Sticky } from './Sticky';
-export default Sticky;

package/lib-module/styles.js

@@ -1,6 +0,0 @@
-import styled, { css } from 'styled-components';
-const StickyWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "styles__StickyWrapper",
-  componentId: "[object Object]__sc-160gk65-0"
-})(["", " &.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;z-index:1;", " ", " ", "}&.hidden{animation:0.3s animateIn forwards;", "}}&.alternate{}&.hidden{position:sticky;pointer-events:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;&.pristine{display:none;}.sticky-element{background:white;", "}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}}@keyframes shadowIn{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}}@keyframes shadowOut{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}}"], props => props.position === 'top' ? css(["top:0;"]) : css(["bottom:0;"]), props => props.position === 'top' && css(["top:0px;"]), props => props.position === 'bottom' && css(["bottom:0px;"]), props => props.shadow && css(["box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);"]), props => props.shadow && css([".sticky-element{animation:0.3s shadowIn forwards;}"]), props => props.shadow && css(["animation:0.6s shadowOut forwards;"]));
-export default StickyWrapper;