npm - @opengeoweb/theme - Versions diffs - 2.1.4 → 2.2.0 - Mend

@opengeoweb/theme 2.1.4 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/index.esm.js +343 -4
package/index.umd.js +345 -4
package/lib/components/Theme/buttonStyles.d.ts +5 -0
package/lib/components/Theme/buttonStyles.test.d.ts +1 -0
package/lib/components/Theme/types.d.ts +30 -9
package/lib/stories/Button.stories.d.ts +6 -0
package/lib/stories/ToggleButton.stories.d.ts +6 -0
package/lib/stories/index.stories.d.ts +2 -0
package/lib/stories/snapshots/Button.stories.d.ts +7 -0
package/lib/stories/snapshots/ToggleButton.stories.d.ts +7 -0
package/package.json +1 -1

package/index.esm.js CHANGED Viewed

@@ -72,6 +72,89 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+var buttonStyle = function buttonStyle(button) {
+  return {
+    // default styling
+    color: button["default"].color,
+    backgroundColor: button["default"].fill,
+    textTransform: 'capitalize',
+    padding: '12px 8px',
+    height: '40px',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    borderColor: button["default"].borderColor,
+    borderRadius: '5px',
+    // hover styling
+    '&:hover': {
+      backgroundColor: button.mouseOver.fill,
+      borderColor: button.mouseOver.borderColor
+    },
+    // active styling
+    '&.Mui-selected': {
+      backgroundColor: button.active.fill,
+      color: button.active.color,
+      borderColor: button.active.borderColor,
+      '&:hover': {
+        backgroundColor: button.activeMouseOver.fill
+      }
+    },
+    // disabled styling
+    '&.Mui-disabled': {
+      backgroundColor: button.disabled.fill,
+      color: button.disabled.color,
+      borderColor: button.disabled.borderColor
+    },
+    // size styling
+    '&[class*="sizeSmall"]': {
+      fontSize: '12px',
+      height: '32px',
+      lineHeight: '12px'
+    },
+    // icon styling
+    '& .MuiButton-startIcon': {
+      marginRight: '2px',
+      '& .MuiSvgIcon-root': {
+        fontSize: '26px'
+      }
+    }
+  };
+};
+var toggleButtonStyle = function toggleButtonStyle(buttonVariants) {
+  return buttonVariants.reduce(function (variants, _ref) {
+    var variant = _ref.props.variant,
+        style = _ref.style;
+    return Object.assign(Object.assign({}, variants), _defineProperty({}, "&.".concat(variant), style));
+  }, {});
+};
+var buttonVariants = function buttonVariants(buttons) {
+  return [{
+    props: {
+      variant: 'primary'
+    },
+    style: buttonStyle(buttons.primary)
+  }, {
+    props: {
+      variant: 'secondary'
+    },
+    style: buttonStyle(buttons.secondary)
+  }, {
+    props: {
+      variant: 'tertiary'
+    },
+    style: buttonStyle(buttons.tertiary)
+  }, {
+    props: {
+      variant: 'flat'
+    },
+    style: buttonStyle(buttons.flat)
+  }, {
+    props: {
+      variant: 'tool'
+    },
+    style: buttonStyle(buttons.tool)
+  }];
+};
 var hex2rgba = function hex2rgba(hex) {
   var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
@@ -146,6 +229,14 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
     },
     shadows: shadows,
     components: {
+      MuiButton: {
+        variants: buttonVariants(geowebColors.buttons)
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: toggleButtonStyle(buttonVariants(geowebColors.buttons))
+        }
+      },
       MuiCssBaseline: {
         styleOverrides: "\n          html {\n            -webkit-font-smoothing: auto;\n          }\n        "
       },
@@ -477,7 +568,131 @@ var colors$1 = {
   },
   buttons: {
     primary: {
-      fill: '#186DFF'
+      "default": {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#1047B0',
+        color: '#FFFFFF',
+        borderColor: '#71A6FF'
+      },
+      active: {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {},
+      disabled: {
+        fill: 'transparent',
+        color: '#707070',
+        borderColor: 'transparent'
+      }
+    },
+    secondary: {
+      "default": {
+        fill: '#0876b6',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#064c84',
+        color: '#FFFFFF',
+        borderColor: '#3DA6FF'
+      },
+      active: {
+        fill: '#0876b6',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {},
+      disabled: {
+        fill: 'transparent',
+        color: '#707070',
+        borderColor: 'transparent'
+      }
+    },
+    tertiary: {
+      "default": {
+        fill: 'transparent',
+        color: '#575F7A',
+        borderColor: '#575F7A'
+      },
+      mouseOver: {
+        fill: '#E3E4E7',
+        color: '#575F7A',
+        borderColor: '#575F7A'
+      },
+      active: {
+        fill: 'transparent',
+        color: '#186DFF',
+        borderColor: '#186DFF'
+      },
+      activeMouseOver: {
+        fill: 'rgba(24, 109, 255, 0.1)',
+        color: '#186DFF',
+        borderColor: '#186DFF'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#707070',
+        borderColor: 'transparent'
+      }
+    },
+    flat: {
+      "default": {
+        fill: 'transparent',
+        color: '#575F7A',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#E3E4E7',
+        color: '#575F7A',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: 'transparent',
+        color: '#186DFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: 'rgba(24, 109, 255, 0.1)',
+        color: '#186DFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#707070',
+        borderColor: 'transparent'
+      }
+    },
+    tool: {
+      "default": {
+        fill: '#ECEDEE',
+        color: '#575F7A',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#E3E4E7',
+        color: '#575F7A',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#1047B0',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#707070',
+        borderColor: 'transparent'
+      }
     },
     primaryMouseover: {
       fill: '#1047B0'
@@ -701,7 +916,7 @@ var colors$1 = {
       opacity: 1
     },
     captionDisabled: {
-      color: '#767676',
+      color: '#707070',
       opacity: 1
     }
   }
@@ -1071,7 +1286,131 @@ var colors = {
   },
   buttons: {
     primary: {
-      fill: '#186DFF'
+      "default": {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#1047B0',
+        color: '#FFFFFF',
+        borderColor: '#71A6FF'
+      },
+      active: {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {},
+      disabled: {
+        fill: 'transparent',
+        color: '#B0B0B0',
+        borderColor: 'transparent'
+      }
+    },
+    secondary: {
+      "default": {
+        fill: '#0876b6',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#064C84',
+        color: '#FFFFFF',
+        borderColor: '#3DA6FF'
+      },
+      active: {
+        fill: '#0876B6',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {},
+      disabled: {
+        fill: 'transparent',
+        color: '#707070',
+        borderColor: 'transparent'
+      }
+    },
+    tertiary: {
+      "default": {
+        fill: 'transparent',
+        color: '#E5E5E5',
+        borderColor: '#E5E5E5'
+      },
+      mouseOver: {
+        fill: '#494949',
+        color: '#E5E5E5',
+        borderColor: '#E5E5E5'
+      },
+      active: {
+        fill: 'transparent',
+        color: '#488BFD',
+        borderColor: '#48A8FA'
+      },
+      activeMouseOver: {
+        fill: 'rgba(24, 109, 255, 0.1)',
+        color: '#488BFD',
+        borderColor: '#488BFD'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B0B0B0',
+        borderColor: 'transparent'
+      }
+    },
+    flat: {
+      "default": {
+        fill: 'transparent',
+        color: '#E5E5E5',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#494949',
+        color: '#E5E5E5',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: 'transparent',
+        color: '#488BFD',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: 'rgba(24, 109, 255, 0.1)',
+        color: '#488BFD',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B0B0B0',
+        borderColor: 'transparent'
+      }
+    },
+    tool: {
+      "default": {
+        fill: '#393939',
+        color: '#E5E5E5',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#494949',
+        color: '#E5E5E5',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#1047B0',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B0B0B0',
+        borderColor: 'transparent'
+      }
     },
     primaryMouseover: {
       fill: '#1047B0'
@@ -1295,7 +1634,7 @@ var colors = {
       opacity: 1
     },
     captionDisabled: {
-      color: '#909090',
+      color: '#B0B0B0',
       opacity: 1
     }
   }

package/index.umd.js CHANGED Viewed

@@ -79,6 +79,91 @@
         return ar;
     }
+    var buttonStyle = function buttonStyle(button) {
+      return {
+        // default styling
+        color: button["default"].color,
+        backgroundColor: button["default"].fill,
+        textTransform: 'capitalize',
+        padding: '12px 8px',
+        height: '40px',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderColor: button["default"].borderColor,
+        borderRadius: '5px',
+        // hover styling
+        '&:hover': {
+          backgroundColor: button.mouseOver.fill,
+          borderColor: button.mouseOver.borderColor
+        },
+        // active styling
+        '&.Mui-selected': {
+          backgroundColor: button.active.fill,
+          color: button.active.color,
+          borderColor: button.active.borderColor,
+          '&:hover': {
+            backgroundColor: button.activeMouseOver.fill
+          }
+        },
+        // disabled styling
+        '&.Mui-disabled': {
+          backgroundColor: button.disabled.fill,
+          color: button.disabled.color,
+          borderColor: button.disabled.borderColor
+        },
+        // size styling
+        '&[class*="sizeSmall"]': {
+          fontSize: '12px',
+          height: '32px',
+          lineHeight: '12px'
+        },
+        // icon styling
+        '& .MuiButton-startIcon': {
+          marginRight: '2px',
+          '& .MuiSvgIcon-root': {
+            fontSize: '26px'
+          }
+        }
+      };
+    };
+    var toggleButtonStyle = function toggleButtonStyle(buttonVariants) {
+      return buttonVariants.reduce(function (variants, _a) {
+        var _b;
+        var variant = _a.props.variant,
+            style = _a.style;
+        return __assign(__assign({}, variants), (_b = {}, _b["&." + variant] = style, _b));
+      }, {});
+    };
+    var buttonVariants = function buttonVariants(buttons) {
+      return [{
+        props: {
+          variant: 'primary'
+        },
+        style: buttonStyle(buttons.primary)
+      }, {
+        props: {
+          variant: 'secondary'
+        },
+        style: buttonStyle(buttons.secondary)
+      }, {
+        props: {
+          variant: 'tertiary'
+        },
+        style: buttonStyle(buttons.tertiary)
+      }, {
+        props: {
+          variant: 'flat'
+        },
+        style: buttonStyle(buttons.flat)
+      }, {
+        props: {
+          variant: 'tool'
+        },
+        style: buttonStyle(buttons.tool)
+      }];
+    };
     var hex2rgba = function hex2rgba(hex, alpha) {
       if (alpha === void 0) {
         alpha = 1;
@@ -158,6 +243,14 @@
         },
         shadows: shadows,
         components: {
+          MuiButton: {
+            variants: buttonVariants(geowebColors.buttons)
+          },
+          MuiToggleButton: {
+            styleOverrides: {
+              root: toggleButtonStyle(buttonVariants(geowebColors.buttons))
+            }
+          },
           MuiCssBaseline: {
             styleOverrides: "\n          html {\n            -webkit-font-smoothing: auto;\n          }\n        "
           },
@@ -489,7 +582,131 @@
       },
       buttons: {
         primary: {
-          fill: '#186DFF'
+          "default": {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: '#71A6FF'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {},
+          disabled: {
+            fill: 'transparent',
+            color: '#707070',
+            borderColor: 'transparent'
+          }
+        },
+        secondary: {
+          "default": {
+            fill: '#0876b6',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#064c84',
+            color: '#FFFFFF',
+            borderColor: '#3DA6FF'
+          },
+          active: {
+            fill: '#0876b6',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {},
+          disabled: {
+            fill: 'transparent',
+            color: '#707070',
+            borderColor: 'transparent'
+          }
+        },
+        tertiary: {
+          "default": {
+            fill: 'transparent',
+            color: '#575F7A',
+            borderColor: '#575F7A'
+          },
+          mouseOver: {
+            fill: '#E3E4E7',
+            color: '#575F7A',
+            borderColor: '#575F7A'
+          },
+          active: {
+            fill: 'transparent',
+            color: '#186DFF',
+            borderColor: '#186DFF'
+          },
+          activeMouseOver: {
+            fill: 'rgba(24, 109, 255, 0.1)',
+            color: '#186DFF',
+            borderColor: '#186DFF'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#707070',
+            borderColor: 'transparent'
+          }
+        },
+        flat: {
+          "default": {
+            fill: 'transparent',
+            color: '#575F7A',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#E3E4E7',
+            color: '#575F7A',
+            borderColor: 'transparent'
+          },
+          active: {
+            fill: 'transparent',
+            color: '#186DFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: 'rgba(24, 109, 255, 0.1)',
+            color: '#186DFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#707070',
+            borderColor: 'transparent'
+          }
+        },
+        tool: {
+          "default": {
+            fill: '#ECEDEE',
+            color: '#575F7A',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#E3E4E7',
+            color: '#575F7A',
+            borderColor: 'transparent'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#707070',
+            borderColor: 'transparent'
+          }
         },
         primaryMouseover: {
           fill: '#1047B0'
@@ -713,7 +930,7 @@
           opacity: 1
         },
         captionDisabled: {
-          color: '#767676',
+          color: '#707070',
           opacity: 1
         }
       }
@@ -1040,7 +1257,131 @@
       },
       buttons: {
         primary: {
-          fill: '#186DFF'
+          "default": {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: '#71A6FF'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {},
+          disabled: {
+            fill: 'transparent',
+            color: '#B0B0B0',
+            borderColor: 'transparent'
+          }
+        },
+        secondary: {
+          "default": {
+            fill: '#0876b6',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#064C84',
+            color: '#FFFFFF',
+            borderColor: '#3DA6FF'
+          },
+          active: {
+            fill: '#0876B6',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {},
+          disabled: {
+            fill: 'transparent',
+            color: '#707070',
+            borderColor: 'transparent'
+          }
+        },
+        tertiary: {
+          "default": {
+            fill: 'transparent',
+            color: '#E5E5E5',
+            borderColor: '#E5E5E5'
+          },
+          mouseOver: {
+            fill: '#494949',
+            color: '#E5E5E5',
+            borderColor: '#E5E5E5'
+          },
+          active: {
+            fill: 'transparent',
+            color: '#488BFD',
+            borderColor: '#48A8FA'
+          },
+          activeMouseOver: {
+            fill: 'rgba(24, 109, 255, 0.1)',
+            color: '#488BFD',
+            borderColor: '#488BFD'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#B0B0B0',
+            borderColor: 'transparent'
+          }
+        },
+        flat: {
+          "default": {
+            fill: 'transparent',
+            color: '#E5E5E5',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#494949',
+            color: '#E5E5E5',
+            borderColor: 'transparent'
+          },
+          active: {
+            fill: 'transparent',
+            color: '#488BFD',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: 'rgba(24, 109, 255, 0.1)',
+            color: '#488BFD',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#B0B0B0',
+            borderColor: 'transparent'
+          }
+        },
+        tool: {
+          "default": {
+            fill: '#393939',
+            color: '#E5E5E5',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#494949',
+            color: '#E5E5E5',
+            borderColor: 'transparent'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#B0B0B0',
+            borderColor: 'transparent'
+          }
         },
         primaryMouseover: {
           fill: '#1047B0'
@@ -1264,7 +1605,7 @@
           opacity: 1
         },
         captionDisabled: {
-          color: '#909090',
+          color: '#B0B0B0',
           opacity: 1
         }
       }

package/lib/components/Theme/buttonStyles.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { ComponentsVariants, CSSInterpolation } from '@mui/material';
+import { ButtonStyles, ButtonStyle } from './types';
+export declare const buttonStyle: (button: ButtonStyle) => CSSInterpolation;
+export declare const toggleButtonStyle: (buttonVariants: ComponentsVariants['MuiButton']) => CSSInterpolation;
+export declare const buttonVariants: (buttons: ButtonStyles) => ComponentsVariants['MuiButton'];

package/lib/components/Theme/buttonStyles.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/lib/components/Theme/types.d.ts CHANGED Viewed

@@ -2,6 +2,26 @@
 interface CSSProperties extends React.CSSProperties {
     rgba?: string;
 }
+export interface ButtonStyle {
+    default: CSSProperties;
+    mouseOver: CSSProperties;
+    active: CSSProperties;
+    activeMouseOver: CSSProperties;
+    disabled: CSSProperties;
+}
+export interface ButtonStyles {
+    primary: ButtonStyle;
+    secondary: ButtonStyle;
+    tertiary: ButtonStyle;
+    flat: ButtonStyle;
+    tool: ButtonStyle;
+    primaryMouseover: CSSProperties;
+    primaryActive: CSSProperties;
+    flatMouseover: CSSProperties;
+    focusDefault: CSSProperties;
+    disabled: CSSProperties;
+    surfaceIconDefault: CSSProperties;
+}
 export declare type GeowebColorPalette = {
     background: {
         surface: CSSProperties['color'];
@@ -11,15 +31,7 @@ export declare type GeowebColorPalette = {
     brand: {
         brand: CSSProperties['color'];
     };
-    buttons: {
-        primary: CSSProperties;
-        primaryMouseover: CSSProperties;
-        primaryActive: CSSProperties;
-        flatMouseover: CSSProperties;
-        focusDefault: CSSProperties;
-        disabled: CSSProperties;
-        surfaceIconDefault: CSSProperties;
-    };
+    buttons: ButtonStyles;
     typographyAndIcons: {
         text: CSSProperties['color'];
         icon: CSSProperties['color'];
@@ -118,4 +130,13 @@ declare module '@mui/material/styles' {
         geowebColors: GeowebColorPalette;
     }
 }
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        primary: true;
+        secondary: true;
+        tertiary: true;
+        flat: true;
+        tool: true;
+    }
+}
 export {};

package/lib/stories/Button.stories.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const ButtonDemo: React.FC;
+export declare const Buttons: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/stories/ToggleButton.stories.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const ToggleButtonDemo: React.FC;
+export declare const ToggleButtons: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/stories/index.stories.d.ts CHANGED Viewed

@@ -8,6 +8,8 @@ export { Table } from './Table.stories';
 export { Tabs } from './Tabs.stories';
 export { Typography, TypographyGWTheme } from './Typography.stories';
 export { Tooltips } from './Tooltip.stories';
+export { Buttons } from './Button.stories';
+export { ToggleButtons } from './ToggleButton.stories';
 export { FormElementsGWTheme, FormElements } from './FormElements.stories';
 declare const _default: {
     title: string;

package/lib/stories/snapshots/Button.stories.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const ButtonLight: () => React.ReactElement;
+export declare const ButtonDark: () => React.ReactElement;

package/lib/stories/snapshots/ToggleButton.stories.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const ToggleButtonLight: () => React.ReactElement;
+export declare const ToggleButtonDark: () => React.ReactElement;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/theme",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "GeoWeb Theme library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {