@bolttech/atoms-button 0.2.2 → 0.2.3

package/index.js

@@ -1,14 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var atomsIcon = require('@bolttech/atoms-icon');
-var styled = require('styled-components');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefault(styled);
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Icon } from '@bolttech/atoms-icon';
+import styled from 'styled-components';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1100,10 +1092,21 @@ var SizeVariant;
   SizeVariant["ghost"] = "ghost";
 })(SizeVariant || (SizeVariant = {}));
 
-const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
-  displayName: "atoms-buttonstyles__Container",
-  componentId: "i4bzba-0"
-})(["display:flex;align-items:center;gap:", ";.left-img-btn,.right-img-btn,svg{width:", ";height:", ";}"], ({
+let _ = t => t,
+  _t,
+  _t2,
+  _t3;
+const Container = styled.div(_t || (_t = _`
+  display: flex;
+  align-items: center;
+  gap: ${0};
+  .left-img-btn,
+  .right-img-btn,
+  svg {
+    width: ${0};
+    height: ${0};
+  }
+`), ({
   theme,
   size
 }) => theme.components.button[size].generic.gap, ({
@@ -1113,10 +1116,40 @@ const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
   theme,
   size
 }) => theme.components.button[size].icon.size);
-const Button$1 = /*#__PURE__*/styled__default["default"].button.withConfig({
-  displayName: "atoms-buttonstyles__Button",
-  componentId: "i4bzba-1"
-})(["background-color:", ";border-radius:", ";border:1px solid ", ";box-shadow:", ";color:", ";fill:", ";padding:", ";:active:enabled{background-color:", ";border:1px solid ", ";color:", ";fill:", ";}:disabled{background-color:", ";border:1px solid ", ";color:", ";fill:", ";}:hover:enabled{background-color:", ";border:1px solid ", ";color:", ";fill:", ";}"], ({
+const Button$1 = styled.button(_t2 || (_t2 = _`
+  background-color: ${0};
+  border-radius: ${0};
+  border: 1px solid
+    ${0};
+  box-shadow: ${0};
+  color: ${0};
+  fill: ${0};
+  padding: ${0};
+
+  :active:enabled {
+    background-color: ${0};
+    border: 1px solid
+      ${0};
+    color: ${0};
+    fill: ${0};
+  }
+
+  :disabled {
+    background-color: ${0};
+    border: 1px solid
+      ${0};
+    color: ${0};
+    fill: ${0};
+  }
+
+  :hover:enabled {
+    background-color: ${0};
+    border: 1px solid
+      ${0};
+    color: ${0};
+    fill: ${0};
+  }
+`), ({
   theme,
   variant
 }) => theme.components.button[variant].container.color.default, ({
@@ -1179,10 +1212,15 @@ const Button$1 = /*#__PURE__*/styled__default["default"].button.withConfig({
   theme,
   variant
 }) => theme.components.button[variant].icon.color.hover);
-const ButtonTitle = /*#__PURE__*/styled__default["default"].label.withConfig({
-  displayName: "atoms-buttonstyles__ButtonTitle",
-  componentId: "i4bzba-2"
-})(["font-size:", ";font-weight:", ";letter-spacing:", ";line-height:", ";text-decoration:", ";text-indent:", ";text-transform:", ";"], ({
+const ButtonTitle = styled.label(_t3 || (_t3 = _`
+  font-size: ${0};
+  font-weight: ${0};
+  letter-spacing: ${0};
+  line-height: ${0};
+  text-decoration: ${0};
+  text-indent: ${0};
+  text-transform: ${0};
+`), ({
   theme,
   size,
   sizeVariant
@@ -1222,7 +1260,7 @@ function Button({
   iconLeft,
   onClick
 }) {
-  return jsxRuntime.jsx(Button$1, Object.assign({
+  return jsx(Button$1, Object.assign({
     "data-testid": dataTestId,
     variant: variant,
     size: size,
@@ -1231,27 +1269,27 @@ function Button({
     disabled: disabled,
     onClick: () => !disabled && onClick()
   }, {
-    children: jsxRuntime.jsxs(Container, Object.assign({
+    children: jsxs(Container, Object.assign({
       size: size
     }, {
-      children: [iconLeft && jsxRuntime.jsx("div", Object.assign({
+      children: [iconLeft && jsx("div", Object.assign({
         className: "left-img-btn",
         "data-testid": `left-img-btn-${iconLeft}`
       }, {
-        children: jsxRuntime.jsx(atomsIcon.Icon, {
+        children: jsx(Icon, {
           dataTestId: `buttonIcon-${iconLeft}`,
           icon: iconLeft
         })
-      })), title && jsxRuntime.jsx(ButtonTitle, Object.assign({
+      })), title && jsx(ButtonTitle, Object.assign({
         size: size,
         sizeVariant: SizeVariant[variant]
       }, {
         children: title
-      })), iconRight && jsxRuntime.jsx("div", Object.assign({
+      })), iconRight && jsx("div", Object.assign({
         className: "right-img-btn",
         "data-testid": `left-img-btn-${iconRight}`
       }, {
-        children: jsxRuntime.jsx(atomsIcon.Icon, {
+        children: jsx(Icon, {
           dataTestId: `buttonIcon-${iconRight}`,
           icon: iconRight
         })
@@ -1260,4 +1298,4 @@ function Button({
   }));
 }
 
-exports.Button = Button;
+export { Button };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/atoms-button",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "module": "./index.js",
   "main": "./index.js",
   "type": "module",