@stokr/components-library 2.3.58-beta.6 → 2.3.58-beta.7

package/dist/components/Button/Button.stories.js

@@ -9,9 +9,9 @@ var _Button = _interopRequireDefault(require("./Button.styles"));
 var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
 var _ButtonContainer = require("../ButtonContainer/ButtonContainer.styles");
 var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // import { DoubleButtons } from '../DoubleButton/DoubleButton.styles'
-var _default = {
+var _default = exports.default = {
   title: 'Components Library/Buttons/Button',
   component: _Button.default,
   argTypes: {
@@ -59,96 +59,79 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_ButtonContainer.ButtonContainer, null, /*#__PURE__*/_react.default.createElement(_Button.default, args, "Button"))));
-};
-var Primary = Template.bind({});
-exports.Primary = Primary;
+const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_ButtonContainer.ButtonContainer, null, /*#__PURE__*/_react.default.createElement(_Button.default, args, "Button"))));
+const Primary = exports.Primary = Template.bind({});
 Primary.args = {
   children: 'Primary Button'
 };
-var Secondary = Template.bind({});
-exports.Secondary = Secondary;
+const Secondary = exports.Secondary = Template.bind({});
 Secondary.args = {
   children: 'Secondary Button',
   secondary: true
 };
-var Disabled = Template.bind({});
-exports.Disabled = Disabled;
+const Disabled = exports.Disabled = Template.bind({});
 Disabled.args = {
   children: 'Disabled Button',
   disabled: true
 };
-var Negative = Template.bind({});
-exports.Negative = Negative;
+const Negative = exports.Negative = Template.bind({});
 Negative.args = {
   children: 'Negative Button',
   negative: true
 };
-var Outline = Template.bind({});
-exports.Outline = Outline;
+const Outline = exports.Outline = Template.bind({});
 Outline.args = {
   children: 'Outline Button',
   outline: true
 };
-var OutlineBlack = Template.bind({});
-exports.OutlineBlack = OutlineBlack;
+const OutlineBlack = exports.OutlineBlack = Template.bind({});
 OutlineBlack.args = {
   children: 'Outline Black Button',
   outlineBlack: true
 };
-var OnlyText = Template.bind({});
-exports.OnlyText = OnlyText;
+const OnlyText = exports.OnlyText = Template.bind({});
 OnlyText.args = {
   children: 'Text Only Button',
   onlyText: true
 };
-var Fluid = Template.bind({});
-exports.Fluid = Fluid;
+const Fluid = exports.Fluid = Template.bind({});
 Fluid.args = {
   children: 'Fluid Width Button',
   fluid: true
 };
-var WithMinWidth = Template.bind({});
-exports.WithMinWidth = WithMinWidth;
+const WithMinWidth = exports.WithMinWidth = Template.bind({});
 WithMinWidth.args = {
   children: 'Min Width Button',
   minWidth: '200px'
 };
-var Centered = Template.bind({});
-exports.Centered = Centered;
+const Centered = exports.Centered = Template.bind({});
 Centered.args = {
   children: 'Centered Button',
   center: true
 };
-var WithMargin = Template.bind({});
-exports.WithMargin = WithMargin;
+const WithMargin = exports.WithMargin = Template.bind({});
 WithMargin.args = {
   children: 'Button with Margin',
   marginTop: '20px',
   marginRight: '20px'
 };
-var WithBottomMargin = Template.bind({});
-exports.WithBottomMargin = WithBottomMargin;
+const WithBottomMargin = exports.WithBottomMargin = Template.bind({});
 WithBottomMargin.args = {
   children: 'Button with Bottom Margin',
   withMarginBottom: true
 };
-var ButtonGroup = function ButtonGroup() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      gap: '10px'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, null, "Primary"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    secondary: true
-  }, "Secondary"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    outlineBlack: true
-  }, "Outline Black"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    negative: true
-  }, "Negative"));
-};
+const ButtonGroup = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    gap: '10px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_Button.default, null, "Primary"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  secondary: true
+}, "Secondary"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  outlineBlack: true
+}, "Outline Black"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  negative: true
+}, "Negative"));
 
 // export const DoubleButton = args => (
 //   <ComponentWrapper>

package/dist/components/Button/Button.styles.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,67 +7,31 @@ exports.default = exports.Button = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _theme = _interopRequireDefault(require("../../styles/theme"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
-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 Button = _styledComponents.default.button.attrs(function (props) {
-  return {
-    type: props.type || 'button'
-  };
-}).withConfig({
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Button = exports.Button = _styledComponents.default.button.attrs(props => ({
+  type: props.type || 'button'
+})).withConfig({
   displayName: "Buttonstyles__Button",
   componentId: "sc-1bxw8qq-0"
-})(["display:inline-block;height:auto;min-height:40px;max-width:100%;background-color:", ";border:1px solid ", ";font-weight:bold;font-size:12px;line-height:16px;color:", ";text-transform:uppercase;text-align:center;letter-spacing:2px;border-radius:28px;padding:11px 32px;margin:0;outline:0;vertical-align:baseline;text-shadow:none;user-select:none;cursor:pointer;transition:color 0.2s,background-color 0.2s,border-color 0.2s;", " ", " ", " ", " ", " ", " &:hover,&:focus,&:active{background-color:", ";border-color:", ";color:", ";}", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
-  return _theme.default.cPrimary;
-}, function (props) {
-  return _theme.default.cPrimary;
-}, function (props) {
-  return _theme.default.cWhite;
-}, function (_ref) {
-  var isUpdates = _ref.isUpdates,
-    isCancel = _ref.isCancel;
-  return isUpdates && isCancel && (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 11px 0;\n      margin-left: 32px;\n    "])));
-}, function (_ref2) {
-  var isUpdates = _ref2.isUpdates,
-    isDone = _ref2.isDone;
-  return isUpdates && isDone && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      margin-left: 32px;\n\n      @media screen and (max-width: 850px) {\n        padding: 11px 20px;\n      }\n    "])));
-}, function (_ref3) {
-  var withMarginBottom = _ref3.withMarginBottom;
-  return withMarginBottom && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-bottom: 32px;\n    "])));
-}, function (props) {
-  return props.minWidth && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      min-width: ", ";\n    "])), props.minWidth);
-}, function (props) {
-  return props.fluid && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      display: block;\n      width: 100%;\n      padding: 11px 12px;\n    "])));
-}, function (props) {
-  return props.center && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin-left: auto;\n      margin-right: auto;\n    "])));
-}, function (props) {
-  return _theme.default.cPrimaryDark;
-}, function (props) {
-  return _theme.default.cPrimaryDark;
-}, function (props) {
-  return _theme.default.cWhite;
-}, function (props) {
-  return props.secondary && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      background-color: ", ";\n      color: ", ";\n\n      &:hover,\n      &:focus,\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n        color: ", ";\n      }\n    "])), _theme.default.cWhite, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cWhite);
-}, function (props) {
-  return props.onlyText && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      border-color: transparent;\n      background-color: transparent;\n      color: ", ";\n\n      &:hover,\n      &:focus,\n      &:active {\n        background-color: transparent;\n        border-color: transparent;\n        color: ", ";\n      }\n    "])), _theme.default.cBlack, _theme.default.cPrimary);
-}, function (props) {
-  return props.disabled && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      opacity: 0.2;\n      cursor: default;\n      box-shadow: none !important;\n      pointer-events: none !important;\n\n      &:hover,\n      &:focus,\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n        color: ", ";\n      }\n    "])), _theme.default.cBlack, _theme.default.cWhite, _theme.default.cBlack, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cWhite);
-}, function (props) {
-  return props.negative && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n\n      &:hover,\n      &:focus,\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n        color: ", ";\n      }\n    "])), _theme.default.cWarning, _theme.default.cWhite, _theme.default.cWarning, _theme.default.cWhite, _theme.default.cWarningDark, _theme.default.cWarningDark);
-}, function (props) {
-  return props.outline && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      border-color: ", ";\n      background-color: transparent;\n      color: ", ";\n\n      &:hover,\n      &:focus,\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n        color: ", ";\n      }\n    "])), _theme.default.cWhite, _theme.default.cWhite, _theme.default.cWhite, _theme.default.cWhite, _theme.default.cWarning);
-}, function (props) {
-  return props.outlineBlack && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n\n      &:hover,\n      &:focus,\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n        color: ", ";\n      }\n    "])), _theme.default.grey4, _theme.default.cWhite, _theme.default.cBlack, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cWhite);
-}, function (props) {
-  return props.marginTop && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      margin-top: ", ";\n    "])), props.marginTop);
-}, function (props) {
-  return props.marginRight && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      margin-right: ", ";\n    "])), props.marginRight);
-}, function (props) {
-  return props.isLoginMobile && "\n     margin-bottom: 20px;\n  width: 163.94px;\n    ";
-});
-exports.Button = Button;
+})(["display:inline-block;height:auto;min-height:40px;max-width:100%;background-color:", ";border:1px solid ", ";font-weight:bold;font-size:12px;line-height:16px;color:", ";text-transform:uppercase;text-align:center;letter-spacing:2px;border-radius:28px;padding:11px 32px;margin:0;outline:0;vertical-align:baseline;text-shadow:none;user-select:none;cursor:pointer;transition:color 0.2s,background-color 0.2s,border-color 0.2s;", " ", " ", " ", " ", " ", " &:hover,&:focus,&:active{background-color:", ";border-color:", ";color:", ";}", " ", " ", " ", " ", " ", " ", " ", " ", ""], props => _theme.default.cPrimary, props => _theme.default.cPrimary, props => _theme.default.cWhite, _ref => {
+  let {
+    isUpdates,
+    isCancel
+  } = _ref;
+  return isUpdates && isCancel && (0, _styledComponents.css)(["padding:11px 0;margin-left:32px;"]);
+}, _ref2 => {
+  let {
+    isUpdates,
+    isDone
+  } = _ref2;
+  return isUpdates && isDone && (0, _styledComponents.css)(["margin-left:32px;@media screen and (max-width:850px){padding:11px 20px;}"]);
+}, _ref3 => {
+  let {
+    withMarginBottom
+  } = _ref3;
+  return withMarginBottom && (0, _styledComponents.css)(["margin-bottom:32px;"]);
+}, props => props.minWidth && (0, _styledComponents.css)(["min-width:", ";"], props.minWidth), props => props.fluid && (0, _styledComponents.css)(["display:block;width:100%;padding:11px 12px;"]), props => props.center && (0, _styledComponents.css)(["margin-left:auto;margin-right:auto;"]), props => _theme.default.cPrimaryDark, props => _theme.default.cPrimaryDark, props => _theme.default.cWhite, props => props.secondary && (0, _styledComponents.css)(["background-color:", ";color:", ";&:hover,&:focus,&:active{background-color:", ";border-color:", ";color:", ";}"], _theme.default.cWhite, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cWhite), props => props.onlyText && (0, _styledComponents.css)(["border-color:transparent;background-color:transparent;color:", ";&:hover,&:focus,&:active{background-color:transparent;border-color:transparent;color:", ";}"], _theme.default.cBlack, _theme.default.cPrimary), props => props.disabled && (0, _styledComponents.css)(["border-color:", ";background-color:", ";color:", ";opacity:0.2;cursor:default;box-shadow:none !important;pointer-events:none !important;&:hover,&:focus,&:active{background-color:", ";border-color:", ";color:", ";}"], _theme.default.cBlack, _theme.default.cWhite, _theme.default.cBlack, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cWhite), props => props.negative && (0, _styledComponents.css)(["border-color:", ";background-color:", ";color:", ";&:hover,&:focus,&:active{background-color:", ";border-color:", ";color:", ";}"], _theme.default.cWarning, _theme.default.cWhite, _theme.default.cWarning, _theme.default.cWhite, _theme.default.cWarningDark, _theme.default.cWarningDark), props => props.outline && (0, _styledComponents.css)(["border-color:", ";background-color:transparent;color:", ";&:hover,&:focus,&:active{background-color:", ";border-color:", ";color:", ";}"], _theme.default.cWhite, _theme.default.cWhite, _theme.default.cWhite, _theme.default.cWhite, _theme.default.cWarning), props => props.outlineBlack && (0, _styledComponents.css)(["border-color:", ";background-color:", ";color:", ";&:hover,&:focus,&:active{background-color:", ";border-color:", ";color:", ";}"], _theme.default.grey4, _theme.default.cWhite, _theme.default.cBlack, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cWhite), props => props.marginTop && (0, _styledComponents.css)(["margin-top:", ";"], props.marginTop), props => props.marginRight && (0, _styledComponents.css)(["margin-right:", ";"], props.marginRight), props => props.isLoginMobile && "\n     margin-bottom: 20px;\n  width: 163.94px;\n    ");
 Button.propTypes = {
   secondary: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
@@ -85,5 +48,4 @@ Button.defaultProps = {
   outline: false,
   outlineBlack: false
 };
-var _default = Button;
-exports.default = _default;
+var _default = exports.default = Button;

package/dist/components/Button/GlareButton.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,21 +10,14 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _reactVisibilitySensor = _interopRequireDefault(require("react-visibility-sensor"));
 var _Button = _interopRequireDefault(require("./Button.styles"));
 var _colors = _interopRequireDefault(require("../../styles/colors"));
-var _excluded = ["children", "nowrap", "onClick", "disabled", "fullWidth", "disabledColor", "buttonId", "className", "backgroundColor", "textColor", "borderColor", "glareColorDark", "glareColorLight", "animationDuration"];
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-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."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const _excluded = ["children", "nowrap", "onClick", "disabled", "fullWidth", "disabledColor", "buttonId", "className", "backgroundColor", "textColor", "borderColor", "glareColorDark", "glareColorLight", "animationDuration"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 // Configuration for visual styling
-var config = {
+const config = {
   colorDark: 'rgb(41, 112, 225)',
   colorLight: '#9bfcfd',
   colorFooter: _colors.default.blue,
@@ -35,91 +27,73 @@ var config = {
 };
 
 // Animation for the glare effect
-var createGlareAnimation = function createGlareAnimation() {
-  var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
+const createGlareAnimation = function () {
+  let duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
   return (0, _styledComponents.keyframes)(["0%{width:0;}50%{width:200%;}75%{opacity:1;}100%{width:400%;opacity:0;}"]);
 };
 
 // Styled components
-var ButtonWrapper = _styledComponents.default.div.withConfig({
+const ButtonWrapper = _styledComponents.default.div.withConfig({
   displayName: "GlareButton__ButtonWrapper",
   componentId: "sc-1fjbp4c-0"
-})(["position:relative;display:inline-block;", " ", ""], function (_ref) {
-  var nowrap = _ref.nowrap;
+})(["position:relative;display:inline-block;", " ", ""], _ref => {
+  let {
+    nowrap
+  } = _ref;
   return !nowrap && (0, _styledComponents.css)(["display:block;position:absolute;top:0;left:50%;transform:translate3d(-50%,-50%,0);"]);
-}, function (_ref2) {
-  var fullWidth = _ref2.fullWidth;
+}, _ref2 => {
+  let {
+    fullWidth
+  } = _ref2;
   return fullWidth && (0, _styledComponents.css)(["width:100%;"]);
 });
-var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
+const StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "GlareButton__StyledButton",
   componentId: "sc-1fjbp4c-1"
-})(["position:relative;margin:", "px;background-color:", ";color:", ";border-color:", ";", " &:disabled{background-color:", " !important;color:rgba(255,255,255,0.5) !important;border-color:#555 !important;}"], config.padding, function (props) {
-  return props.backgroundColor || 'inherit';
-}, function (props) {
-  return props.textColor || 'inherit';
-}, function (props) {
-  return props.borderColor || 'inherit';
-}, function (_ref3) {
-  var fullWidth = _ref3.fullWidth;
+})(["position:relative;margin:", "px;background-color:", ";color:", ";border-color:", ";", " &:disabled{background-color:", " !important;color:rgba(255,255,255,0.5) !important;border-color:#555 !important;}"], config.padding, props => props.backgroundColor || 'inherit', props => props.textColor || 'inherit', props => props.borderColor || 'inherit', _ref3 => {
+  let {
+    fullWidth
+  } = _ref3;
   return fullWidth && (0, _styledComponents.css)(["width:calc(100% - ", "px);"], config.padding * 2);
-}, function (props) {
-  return props.disabledColor || '#333';
-});
-var ButtonGlare = _styledComponents.default.svg.withConfig({
+}, props => props.disabledColor || '#333');
+const ButtonGlare = _styledComponents.default.svg.withConfig({
   displayName: "GlareButton__ButtonGlare",
   componentId: "sc-1fjbp4c-2"
 })(["position:absolute;left:0;top:0;width:100%;height:100%;"]);
-var GlareShape = _styledComponents.default.rect.withConfig({
+const GlareShape = _styledComponents.default.rect.withConfig({
   displayName: "GlareButton__GlareShape",
   componentId: "sc-1fjbp4c-3"
-})(["animation:", " ", "s linear infinite;"], function (props) {
-  return createGlareAnimation(props.animationDuration);
-}, function (props) {
-  return props.animationDuration || 4;
-});
-var GlareButton = function GlareButton(_ref4) {
-  var children = _ref4.children,
-    _ref4$nowrap = _ref4.nowrap,
-    nowrap = _ref4$nowrap === void 0 ? false : _ref4$nowrap,
-    onClick = _ref4.onClick,
-    _ref4$disabled = _ref4.disabled,
-    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-    _ref4$fullWidth = _ref4.fullWidth,
-    fullWidth = _ref4$fullWidth === void 0 ? false : _ref4$fullWidth,
-    _ref4$disabledColor = _ref4.disabledColor,
-    disabledColor = _ref4$disabledColor === void 0 ? '#333' : _ref4$disabledColor,
-    _ref4$buttonId = _ref4.buttonId,
-    buttonId = _ref4$buttonId === void 0 ? 'glare-button' : _ref4$buttonId,
-    className = _ref4.className,
-    backgroundColor = _ref4.backgroundColor,
-    textColor = _ref4.textColor,
-    borderColor = _ref4.borderColor,
-    _ref4$glareColorDark = _ref4.glareColorDark,
-    glareColorDark = _ref4$glareColorDark === void 0 ? config.colorDark : _ref4$glareColorDark,
-    _ref4$glareColorLight = _ref4.glareColorLight,
-    glareColorLight = _ref4$glareColorLight === void 0 ? config.colorLight : _ref4$glareColorLight,
-    _ref4$animationDurati = _ref4.animationDuration,
-    animationDuration = _ref4$animationDurati === void 0 ? 4 : _ref4$animationDurati,
+})(["animation:", " ", "s linear infinite;"], props => createGlareAnimation(props.animationDuration), props => props.animationDuration || 4);
+const GlareButton = _ref4 => {
+  let {
+      children,
+      nowrap = false,
+      onClick,
+      disabled = false,
+      fullWidth = false,
+      disabledColor = '#333',
+      buttonId = 'glare-button',
+      className,
+      backgroundColor,
+      textColor,
+      borderColor,
+      glareColorDark = config.colorDark,
+      glareColorLight = config.colorLight,
+      animationDuration = 4
+    } = _ref4,
     props = _objectWithoutProperties(_ref4, _excluded);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isButtonVisible = _useState2[0],
-    setIsButtonVisible = _useState2[1];
-  var _useState3 = (0, _react.useState)({
-      width: 295,
-      height: config.baseHeight
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    dimensions = _useState4[0],
-    setDimensions = _useState4[1];
-  var buttonRef = (0, _react.useRef)(null);
-  var wrapperRef = (0, _react.useRef)(null);
-  var observerRef = (0, _react.useRef)(null);
-  var mediaQueryRef = (0, _react.useRef)(null);
+  const [isButtonVisible, setIsButtonVisible] = (0, _react.useState)(false);
+  const [dimensions, setDimensions] = (0, _react.useState)({
+    width: 295,
+    height: config.baseHeight
+  });
+  const buttonRef = (0, _react.useRef)(null);
+  const wrapperRef = (0, _react.useRef)(null);
+  const observerRef = (0, _react.useRef)(null);
+  const mediaQueryRef = (0, _react.useRef)(null);
 
   // Generate unique IDs for SVG elements
-  var ids = (0, _react.useRef)({
+  const ids = (0, _react.useRef)({
     linearGradient: "gradient-".concat(Math.random().toString(32).substr(2)),
     fadeGradient: "fade-gradient-".concat(Math.random().toString(32).substr(2)),
     staticMask: "static-mask-".concat(Math.random().toString(32).substr(2)),
@@ -128,9 +102,9 @@ var GlareButton = function GlareButton(_ref4) {
   });
 
   // Update button dimensions when size changes
-  var updateDimensions = function updateDimensions() {
+  const updateDimensions = () => {
     if (!buttonRef.current || !wrapperRef.current) return;
-    var buttonRect = buttonRef.current.getBoundingClientRect();
+    const buttonRect = buttonRef.current.getBoundingClientRect();
     setDimensions({
       width: buttonRect.width + config.padding * 2,
       height: buttonRect.height + config.padding * 2
@@ -138,15 +112,15 @@ var GlareButton = function GlareButton(_ref4) {
   };
 
   // Handle visibility changes
-  var handleButtonVisibility = function handleButtonVisibility(isVisible) {
+  const handleButtonVisibility = isVisible => {
     setIsButtonVisible(isVisible);
   };
 
   // Setup resize observers and media query listeners
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     // Media query for responsive design
     mediaQueryRef.current = window.matchMedia('(max-width: 768px)');
-    var handleMediaChange = function handleMediaChange(event) {
+    const handleMediaChange = event => {
       setTimeout(updateDimensions, 400);
     };
     mediaQueryRef.current.addEventListener('change', handleMediaChange);
@@ -157,8 +131,7 @@ var GlareButton = function GlareButton(_ref4) {
       observerRef.current.observe(buttonRef.current);
       updateDimensions(); // Initial dimensions calculation
     }
-
-    return function () {
+    return () => {
       mediaQueryRef.current.removeEventListener('change', handleMediaChange);
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -309,5 +282,4 @@ GlareButton.propTypes = {
   glareColorLight: _propTypes.default.string,
   animationDuration: _propTypes.default.number
 };
-var _default = GlareButton;
-exports.default = _default;
+var _default = exports.default = GlareButton;

package/dist/components/Button/GlareButton.stories.js

@@ -6,15 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.SlowAnimation = exports.FullWidth = exports.FastAnimation = exports.Disabled = exports.Default = exports.CustomColors = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _GlareButton = _interopRequireDefault(require("./GlareButton"));
-var _addonActions = require("@storybook/addon-actions");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _actions = require("storybook/actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var _default = {
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _default = exports.default = {
   title: 'Components Library/Buttons/GlareButton',
   component: _GlareButton.default,
   parameters: {
@@ -88,38 +87,31 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      margin: '50px',
-      position: 'relative'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_GlareButton.default, args));
-};
-var Default = Template.bind({});
-exports.Default = Default;
+const Template = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    margin: '50px',
+    position: 'relative'
+  }
+}, /*#__PURE__*/_react.default.createElement(_GlareButton.default, args));
+const Default = exports.Default = Template.bind({});
 Default.args = {
   children: 'Default Glare Button',
-  onClick: (0, _addonActions.action)('button-clicked'),
+  onClick: (0, _actions.action)('button-clicked'),
   disabled: false,
   nowrap: false,
   fullWidth: false
 };
-var Disabled = Template.bind({});
-exports.Disabled = Disabled;
+const Disabled = exports.Disabled = Template.bind({});
 Disabled.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   children: 'Disabled Glare Button',
   disabled: true
 });
-var FullWidth = Template.bind({});
-exports.FullWidth = FullWidth;
+const FullWidth = exports.FullWidth = Template.bind({});
 FullWidth.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   children: 'Full Width Glare Button',
   fullWidth: true
 });
-var CustomColors = Template.bind({});
-exports.CustomColors = CustomColors;
+const CustomColors = exports.CustomColors = Template.bind({});
 CustomColors.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   children: 'Custom Colors',
   backgroundColor: '#6200ee',
@@ -128,14 +120,12 @@ CustomColors.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   glareColorDark: '#e0aaff',
   glareColorLight: '#ffffff'
 });
-var SlowAnimation = Template.bind({});
-exports.SlowAnimation = SlowAnimation;
+const SlowAnimation = exports.SlowAnimation = Template.bind({});
 SlowAnimation.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   children: 'Slow Glare Effect',
   animationDuration: 8
 });
-var FastAnimation = Template.bind({});
-exports.FastAnimation = FastAnimation;
+const FastAnimation = exports.FastAnimation = Template.bind({});
 FastAnimation.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   children: 'Fast Glare Effect',
   animationDuration: 2

package/dist/components/ButtonContainer/ButtonContainer.styles.js

@@ -6,18 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ButtonGridContainer = exports.ButtonContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Button = _interopRequireDefault(require("../Button/Button.styles"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var ButtonContainer = _styledComponents.default.div.withConfig({
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div.withConfig({
   displayName: "ButtonContainerstyles__ButtonContainer",
   componentId: "sc-1no5512-0"
-})(["align-items:center;display:flex;justify-content:center;", " ", "{min-width:150px;max-width:300px;}@media screen and (max-width:767px){flex-direction:column;", "{min-width:150px;max-width:400px;}}"], function (props) {
-  return props.flexColumn && "\n    flex-direction:column;\n  ";
-}, _Button.default, _Button.default);
-exports.ButtonContainer = ButtonContainer;
-var ButtonGridContainer = _styledComponents.default.div.withConfig({
+})(["align-items:center;display:flex;justify-content:center;", " ", "{min-width:150px;max-width:300px;}@media screen and (max-width:767px){flex-direction:column;", "{min-width:150px;max-width:400px;}}"], props => props.flexColumn && "\n    flex-direction:column;\n  ", _Button.default, _Button.default);
+const ButtonGridContainer = exports.ButtonGridContainer = _styledComponents.default.div.withConfig({
   displayName: "ButtonContainerstyles__ButtonGridContainer",
   componentId: "sc-1no5512-1"
 })(["display:grid;grid-template-columns:repeat(2,1fr);gap:10px;justify-items:center;align-items:center;", "{min-width:150px;max-width:300px;width:100%;}@media screen and (max-width:767px){grid-template-columns:repeat(1,1fr);", "{max-width:400px;}}"], _Button.default, _Button.default);
-exports.ButtonGridContainer = ButtonGridContainer;
-var _default = ButtonContainer;
-exports.default = _default;
+var _default = exports.default = ButtonContainer;