@stokr/components-library 3.0.73 → 3.0.75

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

@@ -16,6 +16,7 @@ const Button = styled.button.withConfig({
     "negative",
     "outline",
     "outlineBlack",
+    "black",
     "marginTop",
     "marginRight",
     "isLoginMobile"
@@ -181,6 +182,20 @@ const Button = styled.button.withConfig({
       }
     `}
 
+  ${(props) => props.black && css`
+      border-color: ${theme.grey4};
+      background-color: transparent;
+      color: ${theme.cBlack};
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: ${theme.cBlack};
+        border-color: ${theme.cBlack};
+        color: ${theme.cWhite};
+      }
+    `}
+
     //next 2 props added from SUF
 
   ${(props) => props.marginTop && css`
@@ -202,7 +217,8 @@ Button.propTypes = {
   negative: PropTypes.bool,
   center: PropTypes.bool,
   outline: PropTypes.bool,
-  outlineBlack: PropTypes.bool
+  outlineBlack: PropTypes.bool,
+  black: PropTypes.bool
 };
 var stdin_default = Button;
 export {

package/dist/components/Checklist/ChecklistCard.styles.js

@@ -7,7 +7,7 @@ const CardContainer = styled.div.withConfig({
   flex-direction: column;
   align-items: flex-start;
   border: 1px solid #eaeaea;
-  border-radius: 1px;
+  border-radius: 8px;
   background: #fff;
   padding: 32px 32px 32px 32px;
   min-width: 320px;

package/dist/components/Modal/Modal.styles.js

@@ -107,7 +107,7 @@ const ModalInnerSmartContractAddress = styled.input`
 const ModalInnerWithBorder = styled.div.withConfig({
   shouldForwardProp: (props) => !["bottomRadius0", "topRadius0", "marginTop0", "borderTopNone", "textAlignRight", "paddingSmall"].includes(props)
 })`
-  border-radius: 10px;
+  border-radius: 8px;
   border: 1px solid ${colors.lightGrey};
   padding: 25px 35px;
   margin-top: 39px;

package/dist/components/Payment/PaymentDetailsCard.js

@@ -8,7 +8,7 @@ import { getCurrencyConfig, getCurrencyIcon, formatAmountForDisplay } from "../.
 import externalLinkIcon from "../../static/images/external-link-icon.svg.js";
 const CardContainer = styled.div`
   background: ${colors.white};
-  border-radius: 10px;
+  border-radius: 8px;
   border: 1px solid ${colors.lightGrey};
   padding: 20px 32px;
 `;
@@ -20,7 +20,7 @@ const CardTitle = styled.div`
   background: ${colors.futureBlack};
   padding: 12px 24px;
   margin: -20px -32px 20px -32px;
-  border-radius: 9px 9px 0 0;
+  border-radius: 8px 8px 0 0;
   // border-bottom: 1px solid ${colors.lightGrey};
   text-align: start;
   text-transform: uppercase;

package/dist/components/Payment/PaymentSuccessCard.js

@@ -119,7 +119,7 @@ const PaymentSuccessCard = ({
           target: secondaryActionHref ? "_blank" : void 0,
           rel: secondaryActionHref ? "noopener noreferrer" : void 0,
           onClick: onSecondaryActionClick,
-          outlineBlack: true,
+          black: true,
           children: [
             secondaryActionLabel,
             secondaryActionHref && /* @__PURE__ */ jsx(ButtonIcon, { src: externalLinkIcon, alt: "" })

package/dist/components/Snackbar/Snackbar.styles.js

@@ -134,7 +134,7 @@ const SnackbarWrapper = styled.div.withConfig({
   padding: 12px 16px;
   background-color: ${colors.white};
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.12);
-  border-radius: 6px;
+  border-radius: 8px;
   border: 1px solid ${colors.grey};
   //border-bottom: 3px solid ${colors.grey};
   pointer-events: auto;
@@ -149,7 +149,7 @@ const SnackbarWrapper = styled.div.withConfig({
     left: 0;
     height: 3px;
     background-color: ${({ $variant }) => variantStyles[$variant]?.borderColor || colors.blue};
-    border-radius: 0 0 0 6px;
+    border-radius: 0 0 0 8px;
     ${({ $duration, $isPermanent }) => $isPermanent ? css`
             width: 100%;
           ` : css`

package/dist/components/StatusDot/StatusDot.styles.js

@@ -7,7 +7,11 @@ const Root = styled.div.withConfig({
   shouldForwardProp: (prop) => !["$subtle", "$backgroundColor", "$hasClick"].includes(prop)
 })`
   display: inline-flex;
-  align-items: center;
+  /* flex-start, not center: a label long enough to wrap (e.g. PaymentDisplay's
+     statusMessage) must keep the dot level with its FIRST line, not drift to the
+     middle of the whole wrapped block. Dot below compensates so a single-line
+     label still looks identical to the old centered version. */
+  align-items: flex-start;
   gap: 8px;
   box-sizing: border-box;
   padding: ${(p) => p.$subtle ? "2px 8px" : "0"};
@@ -32,6 +36,9 @@ const Dot = styled.span.withConfig({
   background-color: ${(p) => p.$color};
   flex-shrink: 0;
   animation: ${(p) => p.$pulse ? pulse : "none"} 1.6s ease-in-out infinite;
+  /* Centers the dot within the Label's first line (20px line-height) now that
+     Root no longer centers it across the whole (possibly wrapped) block. */
+  margin-top: ${(p) => Math.max(0, (20 - p.$size) / 2)}px;
 `;
 const Label = styled.span.withConfig({
   shouldForwardProp: (prop) => !["$color", "$uppercase"].includes(prop)

package/dist/components/TaxResidenceCard/TaxResidenceCard.styles.js

@@ -6,7 +6,7 @@ const CardWrapper = styled.div.withConfig({
 })`
   background: ${theme.cWhite};
   border: 1px solid ${theme.cLightGrey};
-  border-radius: 6px;
+  border-radius: 8px;
   overflow: hidden;
   transition:
     border-color 0.2s,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.73",
+  "version": "3.0.75",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",