@zebra-fed/zds-react-desktop - npm Package Compare versions

Comparing version 0.6.66 to 0.6.67

baseTheme.d.ts

@@ -1,3 +0,4 @@
-import { ColorTheme } from "@src/ColorTheme";
-import { SpacingTheme } from "@src/SpacingTheme";
+import { ColorTheme } from "./interfaces/ColorTheme";
+import { SpacingTheme } from "./interfaces/SpacingTheme";
+export declare const Colors: ColorTheme;
 export interface ThemeInterface {
@@ -10,1 +11,2 @@ palette?: ColorTheme;
 }
+export declare const Theme: ThemeInterface;

components/Accordion/Accordion.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import PropTypes from 'prop-types';
@@ -2,0 +3,0 @@ import '@zebra-fed/icons/Navigation/index.css';

components/Accordion/AccordionColorTheme.d.ts

@@ -1,2 +0,2 @@
-import { ThemeMode } from "@src/ThemeMode";
+import { ThemeMode } from "../../interfaces/ThemeMode";
 export interface AccordionColorTheme {
@@ -3,0 +3,0 @@ textColor: string;

components/Accordion/AccordionSpacingTheme.d.ts

@@ -1,2 +0,2 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "../../interfaces/SpacingTheme";
 export interface AccordionSpacingTheme extends BaseSpacingTheme {
@@ -3,0 +3,0 @@ mediumLabelFontSize: string;

components/Avatar/Avatar.d.ts

@@ -0,3 +1,4 @@
+/// <reference types="react" />
 import PropTypes from 'prop-types';
-import { SizeType } from "../SizeType";
+import { SizeType } from "../../interfaces/SizeType";
 export interface AvatarProps {
@@ -4,0 +5,0 @@ onClick: () => void;

components/Avatar/AvatarColorTheme.d.ts

@@ -1,2 +0,2 @@
-import { ThemeMode } from "@src/ThemeMode";
+import { ThemeMode } from "@src/interfaces/ThemeMode";
 export interface AvatarColorTheme {
@@ -3,0 +3,0 @@ border: string;

components/Avatar/AvatarSpacingTheme.d.ts

@@ -1,2 +0,2 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "../../interfaces/SpacingTheme";
 export interface AvatarSpacingTheme extends BaseSpacingTheme {
@@ -3,0 +3,0 @@ circumferenceThickness: number;

components/Banner/Banner.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import PropTypes from 'prop-types';
@@ -2,0 +3,0 @@ export interface SystemBannerProps {

components/Banner/PageBanner.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import PropTypes from 'prop-types';
@@ -2,0 +3,0 @@ export interface PageBannerProps {

components/Banner/PageBannerSpacingTheme.d.ts

@@ -1,2 +0,2 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "@src/interfaces/SpacingTheme";
 export interface PageBannerSpacingTheme extends BaseSpacingTheme {
@@ -3,0 +3,0 @@ iconSize: number;

components/Breadcrumb/Breadcrumb.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -17,0 +17,0 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));

components/Breadcrumb/BreadcrumbSpacingTheme.d.ts

@@ -1,4 +0,4 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "@src/interfaces/SpacingTheme";
 export interface BreadcrumbSpacingTheme extends BaseSpacingTheme {
     fontSize: number;
 }

components/Button/Button.d.ts

 import { CSSProperties } from 'react';
 import PropTypes from 'prop-types';
 import '@zebra-fed/icons/Navigation/index.css';
-import { ShapeType } from "../ShapeType";
+import { ShapeType } from "../../interfaces/ShapeType";
+import { SizeType } from '../../interfaces/SizeType';
 interface FABProps {
@@ -10,4 +11,3 @@ type: string;
     style?: object;
-    small?: boolean;
-    large?: boolean;
+    size?: SizeType;
     condensed?: boolean;
@@ -18,3 +18,3 @@ disabled?: boolean;
 export declare const FAB: {
-    ({ type, shape, children, style, small, large, condensed, disabled, iconid }: FABProps): JSX.Element;
+    ({ type, shape, children, style, size, condensed, disabled, iconid }: FABProps): JSX.Element;
     propTypes: {
@@ -56,5 +56,3 @@ /**
     condensed?: boolean;
-    large?: boolean;
-    medium?: boolean;
-    small?: boolean;
+    size?: SizeType;
     disabled?: boolean;
@@ -61,0 +59,0 @@ style?: CSSProperties;

components/Button/ButtonSpacingTheme.d.ts

@@ -1,2 +0,2 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "@src/interfaces/SpacingTheme";
 export interface ButtonSpacingTheme extends BaseSpacingTheme {
@@ -3,0 +3,0 @@ mediumLabelFontSize: string;

components/Card/Card.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import PropTypes from 'prop-types';
@@ -2,0 +3,0 @@ import { CardLoaderTheme } from './CardColorTheme';

components/Card/CardSpacingTheme.d.ts

@@ -1,2 +0,2 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "@src/interfaces/SpacingTheme";
 export interface CardSpacingTheme extends BaseSpacingTheme {
@@ -19,5 +19,6 @@ iconSize: number;
     labelWeight: number;
-    borderRadius: any;
-    padding: any;
-    margin: any;
+    padding: number;
+    margin: number;
+    borderRadius?: number;
+    baseUnit?: number;
 };

components/Checkbox/Checkbox.js

@@ -15,3 +15,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -18,0 +18,0 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));

components/Chip/Chip.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import PropTypes from 'prop-types';
@@ -2,0 +3,0 @@ import '@zebra-fed/icons/Navigation/index.css';

components/Chip/ChipColorTheme.d.ts

@@ -1,2 +0,2 @@
-import { ThemeMode } from "@src/ThemeMode";
+import { ThemeMode } from "@src/interfaces/ThemeMode";
 export interface ChipItemColorTheme {
@@ -3,0 +3,0 @@ backgroundColor: string;

components/Chip/ChipSpacingTheme.d.ts

@@ -1,2 +0,2 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "@src/interfaces/SpacingTheme";
 export interface ChipSpacingTheme extends BaseSpacingTheme {
@@ -3,0 +3,0 @@ fontSize: string;

components/Common/index.js

@@ -1,39 +0,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Box", {
-  enumerable: true,
-  get: function get() {
-    return _Box["default"];
-  }
-});
-Object.defineProperty(exports, "Icon", {
-  enumerable: true,
-  get: function get() {
-    return _Icon["default"];
-  }
-});
-Object.defineProperty(exports, "Item", {
-  enumerable: true,
-  get: function get() {
-    return _Item["default"];
-  }
-});
-Object.defineProperty(exports, "MultipleColumns", {
-  enumerable: true,
-  get: function get() {
-    return _MultipleColumns["default"];
-  }
-});
-
-var _Box = _interopRequireDefault(require("./Box"));
-
-var _Icon = _interopRequireDefault(require("./Icon"));
-
-var _Item = _interopRequireDefault(require("./Item"));
-
-var _MultipleColumns = _interopRequireDefault(require("./MultipleColumns"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+import Box from './Box';
+import Icon from './Icon';
+import Item from './Item';
+import MultipleColumns from './MultipleColumns';
+export { Box, Icon, Item, MultipleColumns };

components/Common/Item.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 export interface ItemProps {
@@ -12,2 +13,3 @@ id?: string;
     postfix?: string | string;
+    onClick?: () => void;
 }
@@ -23,4 +25,5 @@ declare function Item(props: ItemProps): JSX.Element;
         className: any;
+        onClick: () => void;
     };
 }
 export default Item;

components/Common/MultipleColumns.js

@@ -12,3 +12,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -15,0 +15,0 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));

components/Dialog/DialogColorTheme.d.ts

@@ -1,2 +0,2 @@
-import { ThemeMode } from "@src/ThemeMode";
+import { ThemeMode } from "@src/interfaces/ThemeMode";
 export interface DialogColorTheme {
@@ -3,0 +3,0 @@ iconColor: string;

components/Dialog/DialogSpacingTheme.d.ts

@@ -1,2 +0,2 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "@src/interfaces/SpacingTheme";
 export interface DialogSpacingTheme extends BaseSpacingTheme {
@@ -3,0 +3,0 @@ menuZIndex: number;

components/Dropdown/Dropdown.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -17,0 +17,0 @@ var _react2 = require("../..");

components/Dropdown/DropdownColorTheme.d.ts

@@ -1,2 +0,2 @@
-import { ThemeMode } from "@src/ThemeMode";
+import { ThemeMode } from "@src/interfaces/ThemeMode";
 export interface DropdownColorTheme {
@@ -3,0 +3,0 @@ textColor: string;

components/Dropdown/DropdownMenu.d.ts

 import PropTypes from 'prop-types';
 import React from 'react';
 import '@zebra-fed/icons/Navigation/index.css';
-import { ShapeType } from '../ShapeType';
+import { ShapeType } from '../../interfaces/ShapeType';
 import { ItemProps } from '../Common/Item';
@@ -23,2 +23,3 @@ export interface DropdownMenuItemInterface {
     children: React.ReactElement<ItemProps>[];
+    callback?: () => void;
 }
@@ -31,3 +32,3 @@ export declare enum DropDownMenuItem {
 export declare const DropdownMenu: {
-    ({ style, width, dropDownStyle, condensed, enableMultiSelect, children, shape, }: DropdownMenuProps): JSX.Element;
+    ({ style, width, dropDownStyle, condensed, enableMultiSelect, children, shape, callback, }: DropdownMenuProps): JSX.Element;
     propTypes: {
@@ -34,0 +35,0 @@ /**

components/Dropdown/DropdownSpacingTheme.d.ts

@@ -1,2 +0,2 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "@src/interfaces/SpacingTheme";
 export interface DropdownItemSpacingTheme extends BaseSpacingTheme {
@@ -3,0 +3,0 @@ lineHeight: number;

components/Footer/Footer.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -17,0 +17,0 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));

components/Footer/FooterSpacingTheme.d.ts

@@ -1,3 +0,3 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "@src/interfaces/SpacingTheme";
 export interface FooterSpacingTheme extends BaseSpacingTheme {
 }

components/Header/Header.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -27,4 +27,2 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -75,6 +73,6 @@
 
-  var topHeader = /*#__PURE__*/_react["default"].createElement(HeaderWrapper, _defineProperty({
-    key: "primary header",
-    spacingObj: spacing
-  }, "key", "primary-header"), /*#__PURE__*/_react["default"].createElement(InnerHeaderWrapper, {
+  var topHeader = /*#__PURE__*/_react["default"].createElement(HeaderWrapper, {
+    spacingObj: spacing,
+    key: "primary-header"
+  }, /*#__PURE__*/_react["default"].createElement(InnerHeaderWrapper, {
     fitToGrid: props.fitToGrid,
@@ -81,0 +79,0 @@ spacingObj: spacing,

components/Header/HeaderSpacingTheme.d.ts

@@ -1,2 +0,2 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "@src/interfaces/SpacingTheme";
 export interface HeaderSpacingTheme extends BaseSpacingTheme {
@@ -3,0 +3,0 @@ minHeight: number;

components/index.js

@@ -128,2 +128,14 @@ "use strict";
 });
+Object.defineProperty(exports, "NavigationItem", {
+  enumerable: true,
+  get: function get() {
+    return _Navigation.NavigationItem;
+  }
+});
+Object.defineProperty(exports, "NavigationRail", {
+  enumerable: true,
+  get: function get() {
+    return _Navigation.NavigationRail;
+  }
+});
 Object.defineProperty(exports, "PageBanner", {
@@ -144,5 +156,11 @@ enumerable: true,
   get: function get() {
-    return _ProgressIndicator["default"];
+    return _ProgressIndicator.ProgressIndicator;
   }
 });
+Object.defineProperty(exports, "ProgressStepper", {
+  enumerable: true,
+  get: function get() {
+    return _ProgressIndicator.ProgressStepper;
+  }
+});
 Object.defineProperty(exports, "RadioButtonGroup", {
@@ -214,6 +232,6 @@ enumerable: true,
 });
-Object.defineProperty(exports, "Tooltip", {
+Object.defineProperty(exports, "ToolTip", {
   enumerable: true,
   get: function get() {
-    return _Tooltip["default"];
+    return _ToolTip["default"];
   }
@@ -280,3 +298,3 @@ });
 
-var _ProgressIndicator = _interopRequireDefault(require("./ProgressIndicator"));
+var _ProgressIndicator = require("./ProgressIndicator");
 
@@ -295,4 +313,6 @@ var _Radio = _interopRequireDefault(require("./Radio"));
 
-var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+var _ToolTip = _interopRequireDefault(require("./ToolTip"));
 
+var _Navigation = require("./Navigation");
+
 var _Pagination = _interopRequireDefault(require("./Pagination"));
@@ -304,3 +324,3 @@
 
-var _SVGIcon = require("./SVGIcon/SVGIcon");
+var _SVGIcon = require("./SVGIcon");
 
@@ -307,0 +327,0 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

components/Loader/Loader.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -17,0 +17,0 @@ var _propTypes = _interopRequireDefault(require("prop-types"));

components/NavDrawer/NavDrawer.js

@@ -16,3 +16,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -19,0 +19,0 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));

components/Pagination/Pagination.js

@@ -1,63 +0,37 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Pagination = Pagination;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _StripesTheme = require("../../StripesTheme");
-
-var _react2 = require("../..");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-require("@zebra-fed/icons/Keyboard/index.css");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject, _templateObject2, _templateObject3;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var PaginationWrapper = _styledComponents["default"].ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-top: ", "px;\n    display:flex;\n    justify-content: flex-end;\n    overflow-wrap: break-word;\n    flex-wrap: wrap;\n    list-style-type: none; \n    font-family: ", ";\n"])), function (props) {
-  return props.spacingObj.basePadding;
-}, function (props) {
-  return props.fontFamilyObj;
-});
-
-var PageItem = _styledComponents["default"].li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    cursor: pointer;\n    margin: ", ";\n    border: 1px solid ", ";\n    color: ", ";\n    background-color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    padding: 0px ", "px 0px ", "px;\n    min-width: ", "px;\n    height: ", "px;\n    line-height: ", "px;\n    text-align: center;\n    outline: none;\n"])), function (props) {
-  return props.spacingObj.basePadding / 2;
-}, function (props) {
-  return props.colorObj.border;
-}, function (props) {
-  return props.selected ? 'white' : props.colorObj.border;
-}, function (props) {
-  return props.selected ? '#007CB0' : 'white';
-}, function (props) {
-  return props.spacingObj.fontFamily;
-}, function (props) {
-  return props.spacingObj.fontSize;
-}, function (props) {
-  return props.spacingObj.basePadding / 4;
-}, function (props) {
-  return props.spacingObj.basePadding / 4;
-}, function (props) {
-  return props.spacingObj.basePadding * 3;
-}, function (props) {
-  return props.spacingObj.basePadding * 3;
-}, function (props) {
-  return props.spacingObj.basePadding * 3;
-});
-
-var ArrowContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n"])));
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React, { useContext } from 'react';
+import { StripesThemeContext } from '@src/StripesTheme';
+import PropTypes from 'prop-types';
+import '@zebra-fed/icons/Keyboard/index.css';
+import styled from 'styled-components';
+import { SizeType } from '../../interfaces/SizeType';
+import { DropdownWidth } from '../../interfaces/DropdownWidth';
+import { ShapeType } from '../../interfaces/ShapeType';
+import Item from '../Common/Item';
+import { SVGIcon } from '../SVGIcon/SVGIcon';
+import { NavigationItem } from '../index';
+var PaginationWrapper = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding-top: ", "px;\n    display:flex;\n    justify-content: ", ";\n    overflow-wrap: break-word;\n    flex-wrap: wrap;\n    list-style-type: none; \n    font-family: ", ";\n"], ["\n    padding-top: ", "px;\n    display:flex;\n    justify-content: ", ";\n    overflow-wrap: break-word;\n    flex-wrap: wrap;\n    list-style-type: none; \n    font-family: ", ";\n"])), function (props) { return props.spacingObj.basePadding; }, function (props) { return props.direction; }, function (props) { return props.fontFamilyObj; });
+var PageItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    border-radius: ", "px;\n    justify-content: center;\n    align-items: center;\n    font-size: ", ";\n    font-weight: ", ";\n    margin-left  ", "px;\n    margin-right: ", "px;\n    &:first-child {\n        margin-left: 0px;\n    }\n    &:last-child {\n        margin-right: 0px;\n    }\n    cursor: ", ";\n    color: ", ";\n    background-color: ", ";\n    font-size: ", ";\n    min-width: ", "px;\n    height: ", "px;\n    outline: none;\n\n    &:hover {\n        background-color: ", "\n    }\n\n    &:active {\n        background-color: ", "\n    }\n"], ["\n    display: flex;\n    border-radius: ", "px;\n    justify-content: center;\n    align-items: center;\n    font-size: ", ";\n    font-weight: ", ";\n    margin-left  ", "px;\n    margin-right: ", "px;\n    &:first-child {\n        margin-left: 0px;\n    }\n    &:last-child {\n        margin-right: 0px;\n    }\n    cursor: ", ";\n    color: ", ";\n    background-color: ", ";\n    font-size: ", ";\n    min-width: ", "px;\n    height: ", "px;\n    outline: none;\n\n    &:hover {\n        background-color: ", "\n    }\n\n    &:active {\n        background-color: ", "\n    }\n"])), function (props) { return props.shape !== ShapeType.Sharp ? props.spacingObj.basePadding / 2 : 0; }, function (props) { return props.spacingObj.bodyFontSize; }, function (props) { return props.spacingObj.bodyFontWeight; }, function (props) { return props.spacingObj.basePadding / 2; }, function (props) { return props.spacingObj.basePadding / 2; }, function (props) { return props.noHover ? 'cursor' : 'pointer'; }, function (props) { return props.disabled ? props.colorObj.textDisabledColor
+    : props.selected
+        ? props.colorObj.textSelectedColor
+        : props.colorObj.textColor; }, function (props) { return props.disabled
+    ? props.colorObj.backgroundDisabledColor
+    : props.selected
+        ? props.colorObj.backgroundSelectedColor
+        : props.colorObj.backgroundColor; }, function (props) { return props.spacingObj.bodyFontSize; }, function (props) { return props.spacingObj.basePadding * 4; }, function (props) { return props.spacingObj.basePadding * 4; }, function (props) { return props.noHover
+    ? props.colorObj.backgroundColor
+    : props.disabled
+        ? props.colorObj.backgroundDisabledColor
+        : props.selected
+            ? props.colorObj.backgroundSelectedColor
+            : props.colorObj.backgroundHoverColor; }, function (props) { return props.noHover
+    ? props.colorObj.backgroundColor
+    : props.disabled
+        ? props.colorObj.textDisabledColor
+        : props.selected
+            ? props.colorObj.backgroundSelectedColor
+            : props.colorObj.backgroundActiveColor; });
 /**
@@ -67,154 +41,84 @@ * Pagination is used to switch between pages of content.
  */
-
-
-function Pagination(_ref) {
-  var callback = _ref.callback,
-      pageSize = _ref.pageSize,
-      dataSize = _ref.dataSize,
-      numClicked = _ref.numClicked,
-      type = _ref.type;
-  var context = (0, _react.useContext)(_StripesTheme.StripesThemeContext);
-  var spacing = context.getSpacing()[type];
-  var colors = context.getColors()[type];
-  var midpt = 3; // the amount of pages to show at one time divided by 2.
-
-  var lowerbound = 0; // initial value of the most left page
-
-  if (numClicked - midpt > 0) {
-    // if (true) then shift the pages visible. 
-    lowerbound = numClicked - midpt;
-  }
-
-  var count = Math.ceil(dataSize / pageSize);
-  var pages = [];
-  var modifiedBound = lowerbound; // this ensures that if there are not enough page count elements
-  // to match what is expected, then more are added. i.e. if at the highest page count, we dont want to remove pages because nothing new is showing.
-
-  while (count - (modifiedBound + 1) < midpt * 2 - 1) {
-    if (modifiedBound <= 1) break; // prevent sub 0 pages.
-
-    modifiedBound--;
-  }
-
-  var _loop = function _loop(i) {
-    var selected = numClicked === i - 1;
-    var styles = i === (lowerbound + midpt * 2 > count ? count : lowerbound + midpt * 2) ? {} : {
-      borderRight: 'none'
-    };
-    pages.push( /*#__PURE__*/_react["default"].createElement(PageItem, {
-      style: styles,
-      id: 'Page' + i + 'Button' + (numClicked === i - 1 ? 'Clicked' : ''),
-      colorObj: colors,
-      spacingObj: spacing,
-      selected: selected,
-      key: i - 1,
-      onClick: function onClick() {
-        return callback(i - 1);
-      }
-    }, i));
-  };
-
-  for (var i = modifiedBound + 1; i <= (lowerbound + midpt * 2 > count ? count : lowerbound + midpt * 2); i++) {
-    _loop(i);
-  }
-
-  function clickAction(type) {
-    if (type === 'left' && numClicked > 0) {
-      callback(numClicked - 1);
-    } else if (type === 'right' && numClicked < count - 1) {
-      callback(numClicked + 1);
+export function Pagination(_a) {
+    var direction = _a.direction, callback = _a.callback, shape = _a.shape, pageSize = _a.pageSize, dataSize = _a.dataSize, numClicked = _a.numClicked, type = _a.type, dropdown = _a.dropdown;
+    var context = useContext(StripesThemeContext);
+    var spacing = context.getSpacing()[type];
+    var colors = context.getColors()[type];
+    var midpt = 3; // the amount of pages to show at one time divided by 2.
+    var lowerbound = 0; // initial value of the most left page
+    if ((numClicked - midpt) > 0) { // if (true) then shift the pages visible. 
+        lowerbound = numClicked - midpt;
     }
-  }
-
-  return /*#__PURE__*/_react["default"].createElement(PaginationWrapper, {
-    id: 'PaginationWrapper',
-    spacingObj: spacing,
-    fontFamilyObj: context.getFont()
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      paddingRight: spacing.basePadding,
-      lineHeight: "".concat(spacing.basePadding * 4, "px"),
-      cursor: 'pointer',
-      visibility: numClicked !== 0 ? 'visible' : 'hidden'
+    var count = Math.ceil(dataSize / pageSize);
+    var pages = [];
+    var items = [];
+    var modifiedBound = lowerbound;
+    // this ensures that if there are not enough page count elements
+    // to match what is expected, then more are added. i.e. if at the highest page count, we dont want to remove pages because nothing new is showing.
+    while (count - (modifiedBound + 1) < (midpt * 2 - 1)) {
+        if (modifiedBound <= 1)
+            break; // prevent sub 0 pages.
+        modifiedBound--;
     }
-  }, /*#__PURE__*/_react["default"].createElement(_react2.Icon, {
-    id: 'PaginationLeftArrow',
-    size: 20,
-    color: 'grey',
-    category: 'keyboard',
-    name: 'left',
-    onClick: function onClick() {
-      return clickAction('left');
+    var _loop_1 = function (i) {
+        var selected = numClicked === i - 1;
+        var styles = i === (lowerbound + (midpt * 2) > count ? count : lowerbound + (midpt * 2)) ? {} : { borderRight: 'none' };
+        if (dropdown) {
+            items.push(React.createElement(Item, { onClick: function () { return callback(i - 1); } }, "".concat(i)));
+        }
+        else {
+            pages.push(React.createElement(PageItem, { shape: shape, noHover: false, style: styles, id: 'Page' + i + 'Button' + (numClicked === i - 1 ? 'Clicked' : ''), colorObj: colors, spacingObj: spacing, selected: selected, key: i - 1, onClick: function () { return callback(i - 1); } }, i));
+        }
+    };
+    for (var i = modifiedBound + 1; i <= (lowerbound + (midpt * 2) > count ? count : lowerbound + (midpt * 2)); i++) {
+        _loop_1(i);
     }
-  })), /*#__PURE__*/_react["default"].createElement(PageItem, {
-    colorObj: colors,
-    spacingObj: spacing,
-    style: numClicked > midpt ? {
-      visibility: true
-    } : {
-      visibility: "hidden"
-    },
-    onClick: function onClick() {
-      return callback(0);
+    function clickAction(type) {
+        if (type === 'left' && numClicked > 0) {
+            callback(numClicked - 1);
+        }
+        else if (type === 'right' && numClicked < count - 1) {
+            callback(numClicked + 1);
+        }
     }
-  }, 1), /*#__PURE__*/_react["default"].createElement("li", {
-    style: {
-      minWidth: '12px',
-      minHeight: '12px'
-    }
-  }), pages, /*#__PURE__*/_react["default"].createElement("li", {
-    style: {
-      minWidth: '12px',
-      minHeight: '12px'
-    }
-  }), /*#__PURE__*/_react["default"].createElement(PageItem, {
-    colorObj: colors,
-    spacingObj: spacing,
-    style: count > midpt + numClicked ? {
-      visibility: true
-    } : {
-      visibility: "hidden"
-    },
-    onClick: function onClick() {
-      return callback(count - 1);
-    }
-  }, count), /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      paddingLeft: spacing.basePadding,
-      lineHeight: "".concat(spacing.basePadding * 4, "px"),
-      cursor: 'pointer',
-      visibility: numClicked !== count - 1 ? 'visible' : 'hidden'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_react2.Icon, {
-    id: 'PaginationRightArrow',
-    size: 20,
-    color: 'grey',
-    category: 'keyboard',
-    name: 'right',
-    onClick: function onClick() {
-      return clickAction('right');
-    }
-  })));
+    return (React.createElement(PaginationWrapper, { direction: direction, id: 'PaginationWrapper', spacingObj: spacing, fontFamilyObj: context.getFont() },
+        !dropdown &&
+            React.createElement(PageItem, { shape: shape, colorObj: colors, spacingObj: spacing, onClick: function () { return callback(0); } },
+                React.createElement(SVGIcon, { color: colors.textColor, id: 'PaginationLeftArrow', size: SizeType.XSmall, iconid: 'left' })),
+        React.createElement(PageItem, { shape: shape, colorObj: colors, spacingObj: spacing, onClick: function () { return clickAction('left'); } },
+            React.createElement(SVGIcon, { color: colors.textColor, id: 'PaginationLeftArrow', size: SizeType.XSmall, iconid: 'left' })),
+        dropdown ?
+            React.createElement(NavigationItem, { size: SizeType.Small, dropdownWidth: DropdownWidth.ParentWidth, dropdown: true, dropdownItems: items, type: 'inverse', iconid: 'down' },
+                React.createElement("div", null, numClicked + 1))
+            : pages,
+        !dropdown &&
+            React.createElement(PageItem, { shape: shape, colorObj: colors, spacingObj: spacing, noHover: true },
+                React.createElement(SVGIcon, { color: colors.textColor, id: 'PaginationRightArrow', size: SizeType.XSmall, iconid: 'menu' })),
+        !dropdown &&
+            React.createElement(PageItem, { shape: shape, colorObj: colors, spacingObj: spacing, onClick: function () { return callback(count - 1); } }, count),
+        React.createElement(PageItem, { colorObj: colors, spacingObj: spacing, onClick: function () { return clickAction('right'); }, shape: shape },
+            React.createElement(SVGIcon, { color: colors.textColor, id: 'PaginationRightArrow', size: SizeType.XSmall, iconid: 'right' })),
+        !dropdown &&
+            React.createElement(PageItem, { colorObj: colors, spacingObj: spacing, onClick: function () { return callback(numClicked += (midpt * 2)); }, shape: shape },
+                React.createElement(SVGIcon, { color: colors.textColor, id: 'PaginationRightArrow', size: SizeType.XSmall, iconid: 'right' }))));
 }
-
 Pagination.propTypes = {
-  callback: _propTypes["default"].func,
-  pageSize: _propTypes["default"].number,
-  dataSize: _propTypes["default"].number,
-  numClicked: _propTypes["default"].number
+    callback: PropTypes.func,
+    pageSize: PropTypes.number,
+    dataSize: PropTypes.number,
+    numClicked: PropTypes.number,
+    dropdown: PropTypes.bool,
+    shape: PropTypes.string,
+    direction: PropTypes.string,
 };
 Pagination.defaultProps = {
-  type: 'pagination',
-  callback: function callback() {
-    return false;
-  },
-  pageSize: 2,
-  dataSize: 0,
-  numClicked: 0
-};
+    type: 'pagination',
+    dropdown: false,
+    callback: function () { return false; },
+    pageSize: 2,
+    dataSize: 0,
+    numClicked: 0,
+    shape: ShapeType.Sharp,
+    direction: 'start'
+};
+var templateObject_1, templateObject_2;

components/Pagination/PaginationColorTheme.d.ts

 export interface PaginationColorTheme {
     border: string;
+    backgroundColor: string;
+    backgroundHoverColor: string;
+    backgroundActiveColor: string;
+    backgroundSelectedColor: string;
+    backgroundDisabledColor: string;
+    textColor: string;
+    textSelectedColor: string;
+    textDisabledColor: string;
 }

components/Pagination/PaginationSpacingTheme.d.ts

 export interface PaginationSpacingTheme {
     basePadding: number;
+    bodyFontSize: string;
+    bodyFontWeight: number;
 }

components/ProgressIndicator/index.js

@@ -6,7 +6,17 @@ "use strict";
 });
-exports["default"] = void 0;
+Object.defineProperty(exports, "ProgressIndicator", {
+  enumerable: true,
+  get: function get() {
+    return _ProgressIndicator.ProgressIndicator;
+  }
+});
+Object.defineProperty(exports, "ProgressStepper", {
+  enumerable: true,
+  get: function get() {
+    return _ProgressStepper.ProgressStepper;
+  }
+});
 
 var _ProgressIndicator = require("./ProgressIndicator");
 
-var _default = _ProgressIndicator.ProgressIndicator;
-exports["default"] = _default;
+var _ProgressStepper = require("./ProgressStepper");

components/ProgressIndicator/ProgressIndicator.js

@@ -1,59 +0,27 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProgressIndicator = ProgressIndicator;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _StripesTheme = require("../../StripesTheme");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var ProgressBackgroundWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    height: ", ";\n"])), function (props) {
-  return props.colorObj.backgroundColor;
-}, function (props) {
-  return props.type === "bold" ? "24px" : "4px";
-});
-
-var ProgressTextWrapper = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", ";\n    font-size: ", "rem;\n    font-family: ", ";\n    font-weight: bold;\n    margin-left: ", ";\n    text-align: center;\n"])), function (props) {
-  return props.textColor;
-}, function (props) {
-  return props.spacingObj.fontSize;
-}, function (props) {
-  return props.fontFamilyObj;
-}, function (props) {
-  return props.type === "bold" ? props.spacingObj.margin + "px" : "0px";
-});
-
-var ProgressCircleTextWrapper = _styledComponents["default"].text(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    fill: ", ";\n    font-size: ", "rem;\n    font-family: Arial;\n    font-weight: bold;\n    text-align: center;\n"])), function (props) {
-  return props.textColor;
-}, function (props) {
-  return props.spacingObj.fontSize;
-});
-
-var ProgressIndicatorWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    height: 100%;\n    display: flex;\n    align-items: center;\n    transition: width 0.4s;\n"])), function (props) {
-  return props.indicatorColor;
-});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { StripesThemeContext } from '@src/StripesTheme';
+import { SizeType } from '../../interfaces/SizeType';
+import { ShapeType } from '../../interfaces/ShapeType';
+import { ProgressType } from '../../interfaces/ProgressType';
+import styled from 'styled-components';
+var ProgressBackgroundWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    height: ", "px;\n"], ["\n    background-color: ", ";\n    height: ", "px;\n"])), function (props) { return props.hideBackground ? 'transparent' : props.colorObj.backgroundColor; }, function (props) { return props.size === SizeType.Small || props.size === SizeType.XSmall ? props.spacingObj.padding : props.spacingObj.padding * 2; });
+var ProgressTextWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n    font-weight: ", ";\n    padding-bottom: ", "px;\n    text-align: left;\n"], ["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n    font-weight: ", ";\n    padding-bottom: ", "px;\n    text-align: left;\n"])), function (props) { return props.colorObj.textColor; }, function (props) { return props.spacingObj.titleSize; }, function (props) { return props.fontFamilyObj; }, function (props) { return props.spacingObj.titleWeight; }, function (props) { return props.spacingObj.padding * 2; });
+var ProgressCircleTextWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n    font-weight: ", ";\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    zIndex: -1;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    justify-content: center;\n    align-items: center;\n"], ["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n    font-weight: ", ";\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    zIndex: -1;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    justify-content: center;\n    align-items: center;\n"])), function (props) { return props.colorObj.textColor; }, function (props) { return props.spacingObj.labelSize; }, function (props) { return props.fontFamilyObj; }, function (props) { return props.spacingObj.labelWeight; });
+var ProgressIndicatorWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    height: 100%;\n    display: flex;\n    align-items: center;\n    transition: width 0.4s;\n    border-radius: ", "px;\n"], ["\n    background-color: ", ";\n    height: 100%;\n    display: flex;\n    align-items: center;\n    transition: width 0.4s;\n    border-radius: ", "px;\n"])), function (props) { return props.indicatorColor; }, function (props) { return props.shape !== ShapeType.Sharp ? props.spacingObj.padding / 2 : 0; });
 /**
@@ -63,131 +31,111 @@ * Progress Indicators are used to display the percentage of completion of a task.
  */
-
-
-function ProgressIndicator(props) {
-  var inherit = "progressIndicator";
-  var context = (0, _react.useContext)(_StripesTheme.StripesThemeContext);
-  var spacing = context.getSpacing()[inherit];
-  var colors = context.getColors()[inherit];
-  var progress = props.progress;
-
-  if (progress > 100) {
-    progress = 100;
-  }
-
-  var indicatorColor = props.indicatorColor ? props.indicatorColor : colors.defaultIndicatorColor;
-  var textColor = props.type === "bold" ? 'white' : indicatorColor;
-
-  function getProgressText() {
-    return props.hideText ? null : /*#__PURE__*/_react["default"].createElement(ProgressTextWrapper, {
-      textColor: textColor,
-      indicatorColor: indicatorColor,
-      spacingObj: spacing,
-      style: props.textStyle,
-      type: props.type,
-      fontFamilyObj: context.getFont()
-    }, progress + '%');
-  }
-
-  function getIndicator() {
-    switch (props.type) {
-      case 'circle':
-        var lineWidth = spacing.lineWidth;
-        var circleSize = props.circleSize - lineWidth;
-        var elementSize = props.circleSize;
-        var circumference = circleSize * Math.PI;
-        var circleStyle = {
-          fill: 'none',
-          stroke: indicatorColor,
-          strokeWidth: lineWidth + "px"
-        };
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          id: props.id,
-          style: {
-            height: elementSize + 'px',
-            width: elementSize + 'px'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("svg", {
-          stroke: colors.indicatorColor,
-          viewBox: "0 0 " + elementSize + " " + elementSize,
-          xmlns: "http://www.w3.org/2000/svg"
-        }, /*#__PURE__*/_react["default"].createElement("path", {
-          className: "circle",
-          strokeDasharray: circumference * (progress / 100) + ", " + circumference,
-          d: "M " + (circleSize + lineWidth) / 2 + " " + lineWidth / 2 + " a " + circleSize / 2 + " " + circleSize / 2 + " 0 0 1 0 " + circleSize + " a " + circleSize / 2 + " " + circleSize / 2 + " 0 0 1 0 -" + circleSize,
-          style: circleStyle
-        }), props.hideText ? null : /*#__PURE__*/_react["default"].createElement(ProgressCircleTextWrapper, {
-          spacingObj: spacing,
-          textColor: textColor,
-          textAnchor: "middle",
-          x: "50%",
-          y: circleSize / 2 + lineWidth + 2
-        }, progress + '%')));
-
-      case 'bold':
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          id: props.id
-        }, /*#__PURE__*/_react["default"].createElement(ProgressBackgroundWrapper, {
-          type: props.type,
-          style: props.style,
-          colorObj: colors
-        }, /*#__PURE__*/_react["default"].createElement(ProgressIndicatorWrapper, {
-          indicatorColor: indicatorColor,
-          style: _objectSpread({
-            width: props.progress + '%'
-          }, props.indicatorStyle)
-        }, getProgressText())));
-
-      default:
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          id: props.id
-        }, getProgressText(), /*#__PURE__*/_react["default"].createElement(ProgressBackgroundWrapper, {
-          type: props.type,
-          style: props.style,
-          colorObj: colors
-        }, /*#__PURE__*/_react["default"].createElement(ProgressIndicatorWrapper, {
-          indicatorColor: indicatorColor,
-          style: _objectSpread({
-            width: props.progress + '%'
-          }, props.indicatorStyle)
-        })));
+export function ProgressIndicator(props) {
+    var inherit = "progressIndicator";
+    var context = useContext(StripesThemeContext);
+    var spacing = context.getSpacing()[inherit];
+    var colors = context.getColors()[inherit];
+    var progress = props.progress;
+    if (progress > 100) {
+        progress = 100;
     }
-  }
-
-  return getIndicator();
+    var indicatorColor = props.indicatorColor ? props.indicatorColor : colors.defaultIndicatorColor;
+    function getProgressText() {
+        return ((props.hideText ? null
+            :
+                React.createElement(ProgressTextWrapper, { colorObj: colors, spacingObj: spacing, style: props.textStyle, fontFamilyObj: context.getFont(props.condensed) }, props.children ? props.children : progress < 100 ? "".concat(progress, "% complete") : 'Complete')));
+    }
+    var getCircleSize = function () {
+        switch (props.size) {
+            case SizeType.XSmall:
+                return spacing.xSmallSize;
+            case SizeType.Small:
+                return spacing.smallSize;
+            case SizeType.Medium:
+                return spacing.mediumSize;
+            case SizeType.Large:
+                return spacing.largeSize;
+            case SizeType.XLarge:
+                return spacing.xLargeSize;
+        }
+        return spacing.mediumSize;
+    };
+    function getIndicator() {
+        switch (props.type) {
+            case ProgressType.Circle:
+                var lineWidth = spacing.lineWidth;
+                var circleSize = getCircleSize() - lineWidth;
+                var elementSize = getCircleSize();
+                var circumference = circleSize * Math.PI;
+                var circleStyle = {
+                    fill: 'none',
+                    stroke: indicatorColor,
+                    strokeWidth: lineWidth + "px"
+                };
+                return (React.createElement("div", { id: props.id, style: { position: 'relative', height: elementSize + 'px', width: elementSize + 'px' } },
+                    React.createElement("svg", { stroke: indicatorColor, viewBox: "0 0 " + elementSize + " " + elementSize, xmlns: "http://www.w3.org/2000/svg" },
+                        React.createElement("path", { className: "circle", strokeLinecap: props.shape === ShapeType.Sharp ? 'butt' : 'round', strokeDasharray: circumference * (progress / 100) + ", " + circumference, d: "M " + ((circleSize + lineWidth) / 2) + " " + (lineWidth / 2) +
+                                " a " + circleSize / 2 + " " + circleSize / 2 + " 0 0 1 0 " + circleSize +
+                                " a " + circleSize / 2 + " " + circleSize / 2 + " 0 0 1 0 -" + circleSize, style: circleStyle })),
+                    React.createElement(ProgressCircleTextWrapper, { fontFamilyObj: context.getFont(props.condensed), spacingObj: spacing, colorObj: colors }, props.children ? props.children : "".concat(progress, "%"))));
+            default:
+                return (React.createElement("div", { id: props.id },
+                    getProgressText(),
+                    React.createElement(ProgressBackgroundWrapper, { hideBackground: props.hideBackground, size: props.size, spacingObj: spacing, style: props.style, colorObj: colors },
+                        React.createElement(ProgressIndicatorWrapper, { spacingObj: spacing, shape: props.shape, indicatorColor: indicatorColor, style: __assign({ width: props.progress + '%' }, props.indicatorStyle) }))));
+        }
+    }
+    return (getIndicator());
 }
-
 ProgressIndicator.propTypes = {
-  id: _propTypes["default"].string,
-
-  /**Extends the base styling of the progress indicator element. */
-  style: _propTypes["default"].object,
-
-  /**Extends the base styling of the progress indicator itself.  */
-  indicatorStyle: _propTypes["default"].object,
-
-  /**Extends the base styling of the text displaying the progress. */
-  textStyle: _propTypes["default"].object,
-
-  /**The percentage of the indicator that will be filled up. It is capped at 100. */
-  progress: _propTypes["default"].number,
-
-  /**Dictates the type of indicator used. Possible types are 'standard', 'bold' and 'circle'.*/
-  type: _propTypes["default"].string,
-
-  /**Hides the text which displays the progress prop. */
-  hideText: _propTypes["default"].bool,
-
-  /**Changes the color of the indicator. */
-  indicatorColor: _propTypes["default"].string
+    id: PropTypes.string,
+    /**Extends the base styling of the progress indicator element. */
+    style: PropTypes.object,
+    /**Extends the base styling of the progress indicator itself.  */
+    indicatorStyle: PropTypes.object,
+    /**Extends the base styling of the text displaying the progress. */
+    textStyle: PropTypes.object,
+    /**The percentage of the indicator that will be filled up. It is capped at 100. */
+    progress: PropTypes.number,
+    /**Dictates the type of indicator used. Possible types are 'standard', 'bold' and 'circle'.*/
+    type: PropTypes.string,
+    /**Hides the text which displays the progress prop. */
+    hideText: PropTypes.bool,
+    /**Changes the color of the indicator. */
+    indicatorColor: PropTypes.string,
+    /**
+     * condensed font
+     */
+    condensed: PropTypes.bool,
+    /**
+     * size of the progress component
+     */
+    size: PropTypes.string,
+    /**
+     * shape of the progress ends
+     */
+    shape: PropTypes.string,
+    /**
+     * hide progress transparent background
+     */
+    hideBackground: PropTypes.bool,
+    /**
+     * children to render inside the progress bar/ circle, recommended usage is SVGIcon of size small
+     */
+    children: null,
 };
 ProgressIndicator.defaultProps = {
-  id: null,
-  style: {},
-  indicatorStyle: {},
-  textStyle: {},
-  progress: 0,
-  type: 'standard',
-  hideText: false,
-  indicatorColor: null,
-  circleSize: 64
-};
+    id: null,
+    style: {},
+    indicatorStyle: {},
+    textStyle: {},
+    progress: 0,
+    type: ProgressType.Square,
+    hideText: false,
+    indicatorColor: null,
+    condensed: false,
+    size: SizeType.Small,
+    shape: ShapeType.Sharp,
+    hideBackground: false,
+    children: null,
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

components/ProgressIndicator/ProgressIndicatorColorTheme.d.ts

 export interface ProgressIndicatorColorTheme {
     defaultIndicatorColor: string;
     backgroundColor: string;
+    textColor: string;
 }

components/ProgressIndicator/ProgressIndicatorSpacingTheme.d.ts

@@ -1,5 +0,14 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "@src/interfaces/SpacingTheme";
 export interface ProgressIndicatorSpacingTheme extends BaseSpacingTheme {
-    fontSize: number;
+    titleSize: string;
+    titleWeight: number;
     lineWidth: number;
+    labelSize: string;
+    largeLabelSize: string;
+    labelWeight: number;
+    xSmallSize: number;
+    smallSize: number;
+    mediumSize: number;
+    largeSize: number;
+    xLargeSize: number;
 }

components/Radio/Radio.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -17,0 +17,0 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));

components/Shared/Card.js

@@ -1,30 +0,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CardFooterWrapper = void 0;
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var CardFooterWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  .action-items--right {\n    flex: 1;\n    margin-left: auto;\n    ", "\n\n    & > :not(:first-child) {\n      margin-left: ", "px;\n    }\n\n    & > :not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n\n\n  .action-items--left {\n    flex: 1;\n    ", "\n    & > :not(:first-child) {\n      margin-right: ", "px;\n    }\n\n    & > :not(:last-child) {\n      margin-left: ", "px;\n    }\n      \n  }\n"])), function (props) {
-  return props.footerItemMargin && "\n    margin-left: ".concat(props.spacingObj.padding / 2, "px;\n    ");
-}, function (props) {
-  return props.spacingObj.padding / 2;
-}, function (props) {
-  return props.spacingObj.padding / 2;
-}, function (props) {
-  return props.footerItemMargin && "\n    margin-right: ".concat(props.spacingObj.padding / 2, "px;\n    ");
-}, function (props) {
-  return props.spacingObj.padding / 2;
-}, function (props) {
-  return props.spacingObj.padding / 2;
-});
-
-exports.CardFooterWrapper = CardFooterWrapper;
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+export var CardFooterWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  .action-items--right {\n    flex: 1;\n    margin-left: auto;\n    ", "\n\n    & > :not(:first-child) {\n      margin-left: ", "px;\n    }\n\n    & > :not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n\n\n  .action-items--left {\n    flex: 1;\n    ", "\n    & > :not(:first-child) {\n      margin-right: ", "px;\n    }\n\n    & > :not(:last-child) {\n      margin-left: ", "px;\n    }\n      \n  }\n"], ["\n  display: flex;\n  width: 100%;\n  .action-items--right {\n    flex: 1;\n    margin-left: auto;\n    ", "\n\n    & > :not(:first-child) {\n      margin-left: ", "px;\n    }\n\n    & > :not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n\n\n  .action-items--left {\n    flex: 1;\n    ", "\n    & > :not(:first-child) {\n      margin-right: ", "px;\n    }\n\n    & > :not(:last-child) {\n      margin-left: ", "px;\n    }\n      \n  }\n"])), function (props) { return props.footerItemMargin && "\n    margin-left: ".concat(props.spacingObj.padding / 2, "px;\n    "); }, function (props) { return props.spacingObj.padding / 2; }, function (props) { return props.spacingObj.padding / 2; }, function (props) { return props.footerItemMargin && "\n    margin-right: ".concat(props.spacingObj.padding / 2, "px;\n    "); }, function (props) { return props.spacingObj.padding / 2; }, function (props) { return props.spacingObj.padding / 2; });
+var templateObject_1;

components/Sliders/RangeSlider.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -17,0 +17,0 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));

components/Sliders/Slider.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -17,0 +17,0 @@ var _SliderWrapper = require("./SliderWrapper");

components/Sliders/SliderColorTheme.d.ts

@@ -1,2 +0,2 @@
-import { ThemeMode } from "@src/ThemeMode";
+import { ThemeMode } from "@src/interfaces/ThemeMode";
 export interface SliderColorTheme {
@@ -3,0 +3,0 @@ backgroundColor: string;

components/Sliders/SliderSpacingTheme.d.ts

@@ -1,2 +0,2 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "@src/interfaces/SpacingTheme";
 export interface SliderSpacingTheme extends BaseSpacingTheme {
@@ -21,5 +21,6 @@ backgroundHeight: number;
     labelFontSize: string;
-    borderRadius: any;
-    padding: any;
-    margin: any;
+    padding: number;
+    margin: number;
+    borderRadius?: number;
+    baseUnit?: number;
 };

components/Snackbar/Snackbar.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -17,0 +17,0 @@ var _react2 = require("../..");

components/Snackbar/SnackbarSpacingTheme.d.ts

@@ -1,2 +0,2 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "@src/interfaces/SpacingTheme";
 export interface SnackbarSpacingTheme extends BaseSpacingTheme {
@@ -3,0 +3,0 @@ minWidth: number;

components/SVGIcon/SVGIcon.d.ts

 import { SyntheticEvent } from 'react';
 import PropTypes from 'prop-types';
-import { SizeType } from "../SizeType";
+import { SizeType } from "../../interfaces/SizeType";
 import CSS from 'csstype';
@@ -14,2 +14,3 @@ export interface SVGIconProps {
     hoverColor?: string;
+    id?: string;
     iconid: string;
@@ -28,5 +29,10 @@ }
         hoverColor: any;
+        id: string;
     };
     propTypes: {
         /**
+         * id string
+         */
+        id: PropTypes.Requireable<string>;
+        /**
          * Extends the base styling of the Slider element. */
@@ -33,0 +39,0 @@ inactive: PropTypes.Requireable<boolean>;

components/Switch/Switch.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -17,0 +17,0 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));

components/Switch/SwitchesSpacingTheme.d.ts

@@ -1,2 +0,2 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "@src/interfaces/SpacingTheme";
 export interface SwitchesSpacingTheme extends BaseSpacingTheme {
@@ -3,0 +3,0 @@ width: number;

components/Table/Table.js

@@ -12,3 +12,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -115,2 +115,3 @@ var _react2 = require("../..");
       pages = _ref.pages,
+      paginationDropdown = _ref.paginationDropdown,
       checkbox = _ref.checkbox,
@@ -225,3 +226,3 @@ rowActions = _ref.rowActions,
       return headers.map(function (item, index) {
-        var _ref2, _ref3, _React$createElement;
+        var _ref2, _ref3;
 
@@ -237,3 +238,3 @@ var sortInfo = sortedHeaders.filter(function (val) {
         }, []);
-        return /*#__PURE__*/_react["default"].createElement(Th, (_React$createElement = {
+        return /*#__PURE__*/_react["default"].createElement(Th, {
           colorObj: colors,
@@ -243,4 +244,5 @@ spacingObj: spacing,
           key: index,
-          style: item.style
-        }, _defineProperty(_React$createElement, "style", index === 0 ? _objectSpread(_objectSpread({}, item.style), firstColumnStyle) : item.style), _defineProperty(_React$createElement, "stickyFirstColumn", stickyFirstColumn), _React$createElement), !index && checkbox && /*#__PURE__*/_react["default"].createElement(_react2.Checkbox, {
+          style: index === 0 ? _objectSpread(_objectSpread({}, item.style), firstColumnStyle) : item.style,
+          stickyFirstColumn: stickyFirstColumn
+        }, !index && checkbox && /*#__PURE__*/_react["default"].createElement(_react2.Checkbox, {
           checked: data.length === 0,
@@ -397,4 +399,2 @@ style: item.style,
       }, Object.values(row).map(function (item, i) {
-        var _React$createElement2;
-
         var sel = selected.includes(itemIndex);
@@ -411,10 +411,13 @@ var columnStyle = headers[i].columnStyle; // if(columnStyle != undefined) debugger;
           stickyFirstColumn: stickyFirstColumn
-        }, i !== Object.values(row).length - 1 ? !i && checkbox && /*#__PURE__*/_react["default"].createElement(_react2.Checkbox, (_React$createElement2 = {
+        }, i !== Object.values(row).length - 1 ? !i && checkbox && /*#__PURE__*/_react["default"].createElement(_react2.Checkbox, {
           key: "checkbox ".concat(i),
           checked: selected.includes(itemIndex),
-          label: item
-        }, _defineProperty(_React$createElement2, "key", "input".concat(itemIndex)), _defineProperty(_React$createElement2, "type", "checkbox"), _defineProperty(_React$createElement2, "style", columnStyle), _defineProperty(_React$createElement2, "onChange", function onChange() {
-          return setSelected(computeSelection(index, pageSize, numClicked, !sel));
-        }), _React$createElement2)) || item : /*#__PURE__*/_react["default"].createElement(ActionRow, {
+          label: item,
+          type: "checkbox",
           style: columnStyle,
+          onChange: function onChange() {
+            return setSelected(computeSelection(index, pageSize, numClicked, !sel));
+          }
+        }) || item : /*#__PURE__*/_react["default"].createElement(ActionRow, {
+          style: columnStyle,
           key: "action"
@@ -451,2 +454,3 @@ }, item, /*#__PURE__*/_react["default"].createElement(ActionContainer, {
   }, Headers(selected, headers, type, checkbox)), Rows(data, type, pageSize, numClicked, checkbox))), pages && /*#__PURE__*/_react["default"].createElement(_react2.Pagination, {
+    dropdown: paginationDropdown,
     numClicked: numClicked,
@@ -453,0 +457,0 @@ callback: pageItemClick,

components/Table/TableColorTheme.d.ts

@@ -1,2 +0,2 @@
-import { ComponentVariant } from "@src/SpacingTheme";
+import { ComponentVariant } from "@src/interfaces/SpacingTheme";
 export interface TableTypeColorTheme {
@@ -3,0 +3,0 @@ background: string;

components/Table/TableSpacingTheme.d.ts

@@ -1,2 +0,2 @@
-import { ComponentVariant } from "@src/SpacingTheme";
+import { ComponentVariant } from "@src/interfaces/SpacingTheme";
 export interface TableItemSpacingTheme {
@@ -3,0 +3,0 @@ fontSize: string;

components/TabMenu/TabMenuColorTheme.d.ts

@@ -1,2 +0,2 @@
-import { ThemeMode } from "@src/ThemeMode";
+import { ThemeMode } from "@src/interfaces/ThemeMode";
 export interface TabMenuColorTheme {
@@ -3,0 +3,0 @@ background: string;

components/TabMenu/TabMenuSpacingTheme.d.ts

@@ -1,2 +0,2 @@
-import { BaseSpacingTheme } from "@src/SpacingTheme";
+import { BaseSpacingTheme } from "@src/interfaces/SpacingTheme";
 export interface TabMenuSpacingTheme extends BaseSpacingTheme {
@@ -6,3 +6,3 @@ height: number;
     padding: number;
-    fontSize: string;
+    fontSize: number;
     indicatorHeight: number;
@@ -9,0 +9,0 @@ inactiveIndicatorHeight: number;

components/TextInput/InputError.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -17,0 +17,0 @@ var _templateObject;

components/TextInput/TextInput.js

@@ -16,3 +16,3 @@ "use strict";
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -19,0 +19,0 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));

components/TimePicker/TimePicker.js

@@ -14,3 +14,3 @@ 'use strict';
 
-var _StripesTheme = require("../../StripesTheme");
+var _StripesTheme = require("../../StripesTheme.tsx");
 
@@ -17,0 +17,0 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));

package.json

 {
   "name": "@zebra-fed/zds-react-desktop",
-  "version": "0.6.66",
+  "version": "0.6.67",
   "description": "Zebra Desktop. A React component library.",
@@ -28,4 +28,3 @@ "main": "./index.css",
     "ts-node": "^9.1.1",
-    "typeface-roboto": "^0.0.54",
-    "typescript": "^4.2.4"
+    "typeface-roboto": "^0.0.54"
   },
@@ -32,0 +31,0 @@ "peerDependencies": {

sandbox.d.ts

@@ -0,2 +1,3 @@
+/// <reference types="react" />
 import '@zebra-fed/icons/Navigation/index.css';
 export declare function App(): JSX.Element;

stories/Avatar.stories.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _SizeType = require("../components/SizeType");
+var _SizeType = require("../interfaces/SizeType");
 
@@ -17,0 +17,0 @@ var _defaultIconLibrary = require("../defaultIconLibrary");

stories/Button.stories.js

@@ -14,8 +14,6 @@ "use strict";
 
-var _ = require("..");
+var _defaultIconLibrary = require("../defaultIconLibrary");
 
-var _SizeType = require("../components/SizeType");
+var _SizeType = require("../interfaces/SizeType");
 
-var _defaultIconLibrary = require("../defaultIconLibrary");
-
 var _default = {
@@ -66,5 +64,3 @@ title: 'Design System/Button',
   children: 'Button',
-  large: true,
-  medium: false,
-  small: false,
+  size: _SizeType.SizeType.Large,
   rounded: false,
@@ -79,5 +75,3 @@ disabled: false,
   iconid: 'star',
-  large: true,
-  medium: false,
-  small: false,
+  size: _SizeType.SizeType.Large,
   rounded: false,
@@ -84,0 +78,0 @@ disabled: false,

stories/Card.stories.js

@@ -14,2 +14,4 @@ "use strict";
 
+var _SizeType = require("../interfaces/SizeType");
+
 var _default = {
@@ -74,3 +76,3 @@ title: 'Design System/Card',
   rightActionItems: [/*#__PURE__*/_react.React.createElement(_react2.Button, {
-    small: true,
+    size: _SizeType.SizeType.Small,
     type: "primaryVariant",
@@ -92,3 +94,3 @@ onClick: function onClick() {}
   rightActionItems: [/*#__PURE__*/_react.React.createElement(_react2.Button, {
-    small: true,
+    size: _SizeType.SizeType.Small,
     style: {
@@ -101,3 +103,3 @@ width: '100%'
   leftActionItems: [/*#__PURE__*/_react.React.createElement(_react2.Button, {
-    small: true,
+    size: _SizeType.SizeType.Small,
     style: {
@@ -122,3 +124,3 @@ width: '100%'
   rightActionItems: [/*#__PURE__*/_react.React.createElement(_react2.Button, {
-    small: true,
+    size: _SizeType.SizeType.Small,
     style: {
@@ -125,0 +127,0 @@ width: '100%'

stories/Dialog.stories.js

@@ -14,2 +14,4 @@ "use strict";
 
+var _SizeType = require("../interfaces/SizeType");
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -48,2 +50,3 @@
   }, /*#__PURE__*/_react.React.createElement(_react2.Button, {
+    size: _SizeType.SizeType.Large,
     key: "action2",
@@ -69,3 +72,3 @@ type: "primary",
   rightActionItems: [/*#__PURE__*/_react.React.createElement(_react2.Button, {
-    small: true,
+    size: _SizeType.SizeType.Small,
     type: "primaryVariant",
@@ -76,3 +79,3 @@ onClick: function onClick() {
   }, "Cancel"), /*#__PURE__*/_react.React.createElement(_react2.Button, {
-    small: true,
+    size: _SizeType.SizeType.Small,
     type: "primary",
@@ -84,3 +87,3 @@ onClick: function onClick() {
   leftActionItems: [/*#__PURE__*/_react.React.createElement(_react2.Button, {
-    small: true,
+    size: _SizeType.SizeType.Small,
     type: "text",
@@ -87,0 +90,0 @@ onClick: function onClick() {

stories/Dropdown.stories.js

@@ -16,4 +16,2 @@ "use strict";
 
-var _SizeType = require("../components/SizeType");
-
 var _Item = _interopRequireDefault(require("../components/Common/Item"));
@@ -20,0 +18,0 @@

stories/SVGIcon.stories.js

@@ -12,3 +12,3 @@ "use strict";
 
-var _SizeType = require("../components/SizeType");
+var _SizeType = require("../interfaces/SizeType");
 
@@ -15,0 +15,0 @@ var _defaultIconLibrary = require("../defaultIconLibrary");

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

652763

increased by69.03%

Dependency count

11

decreased by-8.33%

Number of package files

288

increased by110.22%

Lines of code

12568

increased by62.1%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Addedtypescript@5.4.5(transitive)

• - Removedtypescript@^4.2.4

• - Removedtypescript@4.9.5(transitive)