@bolttech/atoms-button 0.21.2 → 0.22.0

package/index.cjs

@@ -16,7 +16,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var check = function (it) {
-  return it && it.Math == Math && it;
+  return it && it.Math === Math && it;
 };
 
 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
@@ -45,7 +45,7 @@ var fails$8 = fails$9;
 // Detect IE8's incomplete defineProperty implementation
 var descriptors = !fails$8(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-  return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7;
+  return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] !== 7;
 });
 
 var fails$7 = fails$9;
@@ -124,7 +124,7 @@ var indexedObject = fails$6(function () {
   // eslint-disable-next-line no-prototype-builtins -- safe
   return !$Object$2('z').propertyIsEnumerable(0);
 }) ? function (it) {
-  return classof(it) == 'String' ? split(it, '') : $Object$2(it);
+  return classof(it) === 'String' ? split(it, '') : $Object$2(it);
 } : $Object$2;
 
 // we can't use just `it == null` since of `document.all` special case
@@ -140,7 +140,7 @@ var $TypeError$5 = TypeError;
 // `RequireObjectCoercible` abstract operation
 // https://tc39.es/ecma262/#sec-requireobjectcoercible
 var requireObjectCoercible$2 = function (it) {
-  if (isNullOrUndefined$1(it)) throw $TypeError$5("Can't call method on " + it);
+  if (isNullOrUndefined$1(it)) throw new $TypeError$5("Can't call method on " + it);
   return it;
 };
 
@@ -232,7 +232,6 @@ if (!version && userAgent) {
 var engineV8Version = version;
 
 /* eslint-disable es/no-symbol -- required for testing */
-
 var V8_VERSION = engineV8Version;
 var fails$5 = fails$9;
 var global$8 = global$b;
@@ -241,7 +240,7 @@ var $String$3 = global$8.String;
 
 // eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
 var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$5(function () {
-  var symbol = Symbol();
+  var symbol = Symbol('symbol detection');
   // Chrome 38 Symbol has incorrect toString conversion
   // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
   // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
@@ -252,7 +251,6 @@ var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$5(func
 });
 
 /* eslint-disable es/no-symbol -- required for testing */
-
 var NATIVE_SYMBOL$1 = symbolConstructorDetection;
 
 var useSymbolAsUid = NATIVE_SYMBOL$1
@@ -291,7 +289,7 @@ var $TypeError$4 = TypeError;
 // `Assert: IsCallable(argument) is true`
 var aCallable$1 = function (argument) {
   if (isCallable$6(argument)) return argument;
-  throw $TypeError$4(tryToString(argument) + ' is not a function');
+  throw new $TypeError$4(tryToString(argument) + ' is not a function');
 };
 
 var aCallable = aCallable$1;
@@ -317,7 +315,7 @@ var ordinaryToPrimitive$1 = function (input, pref) {
   if (pref === 'string' && isCallable$5(fn = input.toString) && !isObject$4(val = call$3(fn, input))) return val;
   if (isCallable$5(fn = input.valueOf) && !isObject$4(val = call$3(fn, input))) return val;
   if (pref !== 'string' && isCallable$5(fn = input.toString) && !isObject$4(val = call$3(fn, input))) return val;
-  throw $TypeError$3("Can't convert object to primitive value");
+  throw new $TypeError$3("Can't convert object to primitive value");
 };
 
 var shared$3 = {exports: {}};
@@ -348,10 +346,10 @@ var store$2 = sharedStore;
 (shared$3.exports = function (key, value) {
   return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.30.2',
+  version: '3.33.2',
   mode: 'global',
   copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.30.2/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.33.2/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -426,7 +424,7 @@ var toPrimitive$1 = function (input, pref) {
     if (pref === undefined) pref = 'default';
     result = call$2(exoticToPrim, input, pref);
     if (!isObject$3(result) || isSymbol$1(result)) return result;
-    throw $TypeError$2("Can't convert object to primitive value");
+    throw new $TypeError$2("Can't convert object to primitive value");
   }
   if (pref === undefined) pref = 'number';
   return ordinaryToPrimitive(input, pref);
@@ -462,7 +460,7 @@ var ie8DomDefine = !DESCRIPTORS$7 && !fails$4(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty(createElement('div'), 'a', {
     get: function () { return 7; }
-  }).a != 7;
+  }).a !== 7;
 });
 
 var DESCRIPTORS$6 = descriptors;
@@ -500,7 +498,7 @@ var v8PrototypeDefineBug = DESCRIPTORS$5 && fails$3(function () {
   return Object.defineProperty(function () { /* empty */ }, 'prototype', {
     value: 42,
     writable: false
-  }).prototype != 42;
+  }).prototype !== 42;
 });
 
 var isObject$1 = isObject$5;
@@ -511,7 +509,7 @@ var $TypeError$1 = TypeError;
 // `Assert: Type(argument) is Object`
 var anObject$2 = function (argument) {
   if (isObject$1(argument)) return argument;
-  throw $TypeError$1($String$1(argument) + ' is not an object');
+  throw new $TypeError$1($String$1(argument) + ' is not an object');
 };
 
 var DESCRIPTORS$4 = descriptors;
@@ -553,7 +551,7 @@ objectDefineProperty.f = DESCRIPTORS$4 ? V8_PROTOTYPE_DEFINE_BUG ? function defi
   if (IE8_DOM_DEFINE) try {
     return $defineProperty(O, P, Attributes);
   } catch (error) { /* empty */ }
-  if ('get' in Attributes || 'set' in Attributes) throw $TypeError('Accessors not supported');
+  if ('get' in Attributes || 'set' in Attributes) throw new $TypeError('Accessors not supported');
   if ('value' in Attributes) O[P] = Attributes.value;
   return O;
 };
@@ -644,7 +642,7 @@ var getterFor = function (TYPE) {
   return function (it) {
     var state;
     if (!isObject(it) || (state = get(it)).type !== TYPE) {
-      throw TypeError$1('Incompatible receiver, ' + TYPE + ' required');
+      throw new TypeError$1('Incompatible receiver, ' + TYPE + ' required');
     } return state;
   };
 };
@@ -657,7 +655,7 @@ if (NATIVE_WEAK_MAP || shared.state) {
   store.set = store.set;
   /* eslint-enable no-self-assign -- prototype methods protection */
   set = function (it, metadata) {
-    if (store.has(it)) throw TypeError$1(OBJECT_ALREADY_INITIALIZED);
+    if (store.has(it)) throw new TypeError$1(OBJECT_ALREADY_INITIALIZED);
     metadata.facade = it;
     store.set(it, metadata);
     return metadata;
@@ -672,7 +670,7 @@ if (NATIVE_WEAK_MAP || shared.state) {
   var STATE = sharedKey('state');
   hiddenKeys$2[STATE] = true;
   set = function (it, metadata) {
-    if (hasOwn$3(it, STATE)) throw TypeError$1(OBJECT_ALREADY_INITIALIZED);
+    if (hasOwn$3(it, STATE)) throw new TypeError$1(OBJECT_ALREADY_INITIALIZED);
     metadata.facade = it;
     createNonEnumerableProperty$1(it, STATE, metadata);
     return metadata;
@@ -843,10 +841,10 @@ var createMethod = function (IS_INCLUDES) {
     var value;
     // Array#includes uses SameValueZero equality algorithm
     // eslint-disable-next-line no-self-compare -- NaN check
-    if (IS_INCLUDES && el != el) while (length > index) {
+    if (IS_INCLUDES && el !== el) while (length > index) {
       value = O[index++];
       // eslint-disable-next-line no-self-compare -- NaN check
-      if (value != value) return true;
+      if (value !== value) return true;
     // Array#indexOf ignores holes, Array#includes - not
     } else for (;length > index; index++) {
       if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;
@@ -951,8 +949,8 @@ var replacement = /#|\.prototype\./;
 
 var isForced$1 = function (feature, detection) {
   var value = data[normalize(feature)];
-  return value == POLYFILL ? true
-    : value == NATIVE ? false
+  return value === POLYFILL ? true
+    : value === NATIVE ? false
     : isCallable(detection) ? fails$1(detection)
     : !!detection;
 };
@@ -1065,11 +1063,11 @@ var objectAssign = !$assign || fails(function () {
   var A = {};
   var B = {};
   // eslint-disable-next-line es/no-symbol -- safe
-  var symbol = Symbol();
+  var symbol = Symbol('assign detection');
   var alphabet = 'abcdefghijklmnopqrst';
   A[symbol] = 7;
   alphabet.split('').forEach(function (chr) { B[chr] = chr; });
-  return $assign({}, A)[symbol] != 7 || objectKeys($assign({}, B)).join('') != alphabet;
+  return $assign({}, A)[symbol] !== 7 || objectKeys($assign({}, B)).join('') !== alphabet;
 }) ? function assign(target, source) { // eslint-disable-line no-unused-vars -- required for `.length`
   var T = toObject(target);
   var argumentsLength = arguments.length;
@@ -1124,7 +1122,12 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var SizeVariant;
 (function (SizeVariant) {
@@ -1140,25 +1143,25 @@ const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-i4bzba-0"
 })(["display:flex;align-items:center;gap:", ";white-space:nowrap;cursor:pointer;.left-img-btn,.right-img-btn{display:flex;label{font-size:", ";}}*{cursor:pointer;}"], ({
   theme,
-  size
-}) => theme.components.button[size].generic.gap, ({
+  $size
+}) => theme.components.button[$size].generic.gap, ({
   theme,
-  size
-}) => theme.components.button[size].icon.size);
+  $size
+}) => theme.components.button[$size].icon.size);
 const Button$1 = /*#__PURE__*/styled__default["default"].button.withConfig({
   displayName: "atoms-buttonstyles__Button",
   componentId: "sc-i4bzba-1"
-})(["height:fit-content;background-color:", ";border-radius:", ";border:1px solid ", ";box-shadow:", ";color:", ";padding:", ";label.material-symbols-sharp{color:", ";}:active:enabled{background-color:", ";border:1px solid ", ";color:", ";label.material-symbols-sharp{color:", ";}}:disabled{background-color:", ";border:1px solid ", ";color:", ";label.material-symbols-sharp{color:", ";}}:hover:enabled{background-color:", ";border:1px solid ", ";color:", ";label.material-symbols-sharp{color:", ";}}", ""], ({
+})(["height:fit-content;background-color:", ";border-radius:", ";border:1px solid ", ";box-shadow:", ";color:", ";padding:", ";label.material-symbols-sharp{color:", ";}&:disabled{background-color:", ";border:1px solid ", ";color:", ";label.material-symbols-sharp{color:", ";}}&:active:enabled{background-color:", ";border:1px solid ", ";color:", ";label.material-symbols-sharp{color:", ";}}&:hover:enabled{background-color:", ";border:1px solid ", ";color:", ";label.material-symbols-sharp{color:", ";}}", ""], ({
   theme,
-  variant
-}) => theme.components.button[variant].container.color.default, ({
+  $variant
+}) => theme.components.button[$variant].container.color.default, ({
   theme,
-  size,
-  sizeVariant
-}) => theme.components.button[size][sizeVariant].borderRadius, ({
+  $size,
+  $sizeVariant
+}) => theme.components.button[$size][$sizeVariant].borderRadius, ({
   theme,
-  variant
-}) => theme.components.button[variant].container.border.default, ({
+  $variant
+}) => theme.components.button[$variant].container.border.default, ({
   theme: {
     effects: {
       shadow
@@ -1166,85 +1169,85 @@ const Button$1 = /*#__PURE__*/styled__default["default"].button.withConfig({
   }
 }) => shadow.lvl0, ({
   theme,
-  variant
-}) => theme.components.button[variant].text.color.default, ({
+  $variant
+}) => theme.components.button[$variant].text.color.default, ({
   theme,
-  size,
-  sizeVariant
-}) => `${theme.components.button[size][sizeVariant].paddingVertical} ${theme.components.button[size][sizeVariant].paddingHorizontal}`, ({
+  $size,
+  $sizeVariant
+}) => `${theme.components.button[$size][$sizeVariant].paddingVertical} ${theme.components.button[$size][$sizeVariant].paddingHorizontal}`, ({
   theme,
-  variant
-}) => theme.components.button[variant].icon.color.default, ({
+  $variant
+}) => theme.components.button[$variant].icon.color.default, ({
   theme,
-  variant
-}) => theme.components.button[variant].container.color.active, ({
+  $variant
+}) => theme.components.button[$variant].container.color.disable, ({
   theme,
-  variant
-}) => theme.components.button[variant].container.border.active, ({
+  $variant
+}) => theme.components.button[$variant].container.border.disable, ({
   theme,
-  variant
-}) => theme.components.button[variant].text.color.active, ({
+  $variant
+}) => theme.components.button[$variant].text.color.disable, ({
   theme,
-  variant
-}) => theme.components.button[variant].icon.color.active, ({
+  $variant
+}) => theme.components.button[$variant].icon.color.disable, ({
   theme,
-  variant
-}) => theme.components.button[variant].container.color.disable, ({
+  $variant
+}) => theme.components.button[$variant].container.color.active, ({
   theme,
-  variant
-}) => theme.components.button[variant].container.border.disable, ({
+  $variant
+}) => theme.components.button[$variant].container.border.active, ({
   theme,
-  variant
-}) => theme.components.button[variant].text.color.disable, ({
+  $variant
+}) => theme.components.button[$variant].text.color.active, ({
   theme,
-  variant
-}) => theme.components.button[variant].icon.color.disable, ({
+  $variant
+}) => theme.components.button[$variant].icon.color.active, ({
   theme,
-  variant
-}) => theme.components.button[variant].container.color.hover, ({
+  $variant
+}) => theme.components.button[$variant].container.color.hover, ({
   theme,
-  variant
-}) => theme.components.button[variant].container.border.hover, ({
+  $variant
+}) => theme.components.button[$variant].container.border.hover, ({
   theme,
-  variant
-}) => theme.components.button[variant].text.color.hover, ({
+  $variant
+}) => theme.components.button[$variant].text.color.hover, ({
   theme,
-  variant
-}) => theme.components.button[variant].icon.color.hover, ({
-  fullWidth
-}) => fullWidth && styled.css(["width:100%;", "{justify-content:center;}"], Container));
+  $variant
+}) => theme.components.button[$variant].icon.color.hover, ({
+  $fullWidth
+}) => $fullWidth && styled.css(["width:100%;", "{justify-content:center;}"], Container));
 const ButtonTitle = /*#__PURE__*/styled__default["default"].label.withConfig({
   displayName: "atoms-buttonstyles__ButtonTitle",
   componentId: "sc-i4bzba-2"
 })(["font-size:", ";font-weight:", ";letter-spacing:", ";line-height:", ";text-decoration:", ";text-indent:", ";text-transform:", ";"], ({
   theme,
-  size,
-  sizeVariant
-}) => theme.components.button[size][sizeVariant].textLabel.fontSize, ({
+  $size,
+  $sizeVariant
+}) => theme.components.button[$size][$sizeVariant].textLabel.fontSize, ({
   theme,
-  size,
-  sizeVariant
-}) => theme.components.button[size][sizeVariant].textLabel.fontWeight, ({
+  $size,
+  $sizeVariant
+}) => theme.components.button[$size][$sizeVariant].textLabel.fontWeight, ({
   theme,
-  size,
-  sizeVariant
-}) => theme.components.button[size][sizeVariant].textLabel.letterSpacing, ({
+  $size,
+  $sizeVariant
+}) => theme.components.button[$size][$sizeVariant].textLabel.letterSpacing, ({
   theme,
-  size,
-  sizeVariant
-}) => theme.components.button[size][sizeVariant].textLabel.lineHeight, ({
+  $size,
+  $sizeVariant
+}) => theme.components.button[$size][$sizeVariant].textLabel.lineHeight, ({
   theme,
-  size,
-  sizeVariant
-}) => theme.components.button[size][sizeVariant].textLabel.textDecoration, ({
+  $size,
+  $sizeVariant
+}) => theme.components.button[$size][$sizeVariant].textLabel.textDecoration, ({
   theme,
-  size,
-  sizeVariant
-}) => theme.components.button[size][sizeVariant].textLabel.paragraphSpacing, ({
+  $size,
+  $sizeVariant
+}) => theme.components.button[$size][$sizeVariant].textLabel.paragraphSpacing, ({
   theme,
-  size,
-  sizeVariant
-}) => theme.components.button[size][sizeVariant].textLabel.textCase);
+  $size,
+  $sizeVariant
+}) => theme.components.button[$size][$sizeVariant].textLabel.textCase);
 
 const Button = /*#__PURE__*/react.forwardRef((_a, ref) => {
   var {
@@ -1262,18 +1265,18 @@ const Button = /*#__PURE__*/react.forwardRef((_a, ref) => {
     props = __rest(_a, ["dataTestId", "disabled", "title", "variant", "size", "iconRight", "iconLeft", "fullWidth", "type", "onClick"]);
   return jsxRuntime.jsx(Button$1, Object.assign({
     "data-testid": dataTestId,
-    variant: variant,
-    size: size,
-    sizeVariant: SizeVariant[variant],
-    inverseColors: variant === 'alternative',
+    "$variant": variant,
+    "$size": size,
+    "$sizeVariant": SizeVariant[variant],
+    "$inverseColors": variant === 'alternative',
     disabled: disabled,
     type: type,
-    fullWidth: fullWidth,
+    "$fullWidth": fullWidth,
     onClick: () => !disabled && onClick && onClick(),
     ref: ref
   }, uiUtils.applyDataAttributes(props), {
     children: jsxRuntime.jsxs(Container, {
-      size: size,
+      "$size": size,
       children: [iconLeft && jsxRuntime.jsx("div", {
         className: "left-img-btn",
         "data-testid": `left-img-btn-${iconLeft}`,
@@ -1282,8 +1285,8 @@ const Button = /*#__PURE__*/react.forwardRef((_a, ref) => {
           icon: iconLeft
         }, uiUtils.applyDataAttributes(props, 'icon-left')))
       }), title && jsxRuntime.jsx(ButtonTitle, Object.assign({
-        size: size,
-        sizeVariant: SizeVariant[variant]
+        "$size": size,
+        "$sizeVariant": SizeVariant[variant]
       }, uiUtils.applyDataAttributes(props, 'label'), {
         children: title
       })), iconRight && jsxRuntime.jsx("div", {

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@bolttech/atoms-button",
-  "version": "0.21.2",
+  "version": "0.22.0",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@bolttech/atoms-icon": "0.21.2",
-    "@bolttech/default-theme": "0.0.3",
-    "@bolttech/frontend-foundations": "0.1.0",
-    "@bolttech/ui-utils": "0.1.3",
+    "@bolttech/atoms-icon": "0.22.0",
+    "@bolttech/default-theme": "0.1.0",
+    "@bolttech/frontend-foundations": "0.2.0",
+    "@bolttech/ui-utils": "0.2.0",
     "react": "18.2.0",
-    "styled-components": "5.3.6"
+    "styled-components": "6.1.1"
   },
   "peerDependencies": {}
 }

package/src/lib/atoms-button.styles.d.ts

@@ -1,4 +1,16 @@
-import { ButtonTitleProps, ContainerProps, StyledButtonProps } from './atoms-button.type';
-export declare const Container: import("styled-components").StyledComponent<"div", any, ContainerProps, never>;
-export declare const Button: import("styled-components").StyledComponent<"button", any, StyledButtonProps, never>;
-export declare const ButtonTitle: import("styled-components").StyledComponent<"label", any, ButtonTitleProps, never>;
+/// <reference types="react" />
+import { ButtonSizes, ButtonVariants } from './atoms-button.type';
+export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $size: ButtonSizes;
+}>>;
+export declare const Button: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $variant: ButtonVariants;
+    $size: ButtonSizes;
+    $sizeVariant: 'generic' | 'ghost';
+    $fullWidth: boolean;
+    $inverseColors: boolean;
+}>>;
+export declare const ButtonTitle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    $size: ButtonSizes;
+    $sizeVariant: 'generic' | 'ghost';
+}>>;

package/src/lib/atoms-button.type.d.ts

@@ -14,17 +14,3 @@ export type ButtonProps = DefaultProps & {
     fullWidth?: boolean;
     onClick?: () => void;
 };
-export type ContainerProps = {
-    size: string;
-};
-export type StyledButtonProps = {
-    variant: string;
-    size: ButtonSizes;
-    sizeVariant: 'generic' | 'ghost';
-    fullWidth: boolean;
-    inverseColors: boolean;
-};
-export type ButtonTitleProps = {
-    size: ButtonSizes;
-    sizeVariant: 'generic' | 'ghost';
-};