styled-hairomin 0.3.6 → 0.3.9

package/dist/index.cjs.js

@@ -308,7 +308,7 @@ function CardVariant({
         icon: null,
         label: f
       } : f) : defaultFeatures;
-      const priceSuffix = data.priceSuffix || "/malam";
+      const priceSuffix = data.priceSuffix !== undefined ? data.priceSuffix : "/malam";
       return /*#__PURE__*/jsxRuntime.jsxs(ElevatedCard, {
         children: [/*#__PURE__*/jsxRuntime.jsxs(ElevatedImageWrapper, {
           children: [/*#__PURE__*/jsxRuntime.jsx(ElevatedImage, {
@@ -1098,7 +1098,7 @@ const variantStyles$1 = {
 
 /* ====== VARIANT STACKED: Vertical sections ====== */
 const StackedFooter = styled.footer`
-  background: ${variantStyles$1.stacked.background};
+  background: ${props => props.$bg || variantStyles$1.stacked.background};
   color: ${variantStyles$1.stacked.color};
   padding: 3rem 2rem 1.5rem;
   font-family: "Inter", sans-serif;
@@ -1256,7 +1256,7 @@ const SocialIcons = styled.div`
 
 /* ====== VARIANT COLUMNS: Multi-column layout ====== */
 const ColumnsFooter = styled.footer`
-  background: ${variantStyles$1.columns.background};
+  background: ${props => props.$bg || variantStyles$1.columns.background};
   color: ${variantStyles$1.columns.color};
   padding: 4rem 3rem 2rem;
   font-family: "Poppins", sans-serif;
@@ -1385,7 +1385,7 @@ const ColumnsDivider = styled.div`
 
 /* ====== VARIANT CENTERED: Center-aligned footer ====== */
 const CenteredFooter = styled.footer`
-  background: ${variantStyles$1.centered.background};
+  background: ${props => props.$bg || variantStyles$1.centered.background};
   color: ${variantStyles$1.centered.color};
   padding: 3rem 2rem;
   font-family: "Poppins", sans-serif;
@@ -1484,7 +1484,8 @@ const normalizeLink = link => {
 };
 function FooterVariant({
   variant = "stacked",
-  data
+  data,
+  backgroundColor
 }) {
   const defaultData = {
     stacked: {
@@ -1530,6 +1531,7 @@ function FooterVariant({
   switch (variant) {
     case "stacked":
       return /*#__PURE__*/jsxRuntime.jsxs(StackedFooter, {
+        $bg: backgroundColor,
         children: [/*#__PURE__*/jsxRuntime.jsxs(StackedSection, {
           children: [/*#__PURE__*/jsxRuntime.jsxs(StackedBrand, {
             children: [/*#__PURE__*/jsxRuntime.jsx("h2", {
@@ -1575,6 +1577,7 @@ function FooterVariant({
       });
     case "columns":
       return /*#__PURE__*/jsxRuntime.jsxs(ColumnsFooter, {
+        $bg: backgroundColor,
         children: [/*#__PURE__*/jsxRuntime.jsxs(ColumnsGrid, {
           children: [/*#__PURE__*/jsxRuntime.jsxs(ColumnBox, {
             children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
@@ -1635,6 +1638,7 @@ function FooterVariant({
       });
     case "centered":
       return /*#__PURE__*/jsxRuntime.jsx(CenteredFooter, {
+        $bg: backgroundColor,
         children: /*#__PURE__*/jsxRuntime.jsxs(CenteredContent, {
           children: [/*#__PURE__*/jsxRuntime.jsx(CenteredLogo, {
             children: footerData.logo

package/dist/index.esm.js

@@ -306,7 +306,7 @@ function CardVariant({
         icon: null,
         label: f
       } : f) : defaultFeatures;
-      const priceSuffix = data.priceSuffix || "/malam";
+      const priceSuffix = data.priceSuffix !== undefined ? data.priceSuffix : "/malam";
       return /*#__PURE__*/jsxs(ElevatedCard, {
         children: [/*#__PURE__*/jsxs(ElevatedImageWrapper, {
           children: [/*#__PURE__*/jsx(ElevatedImage, {
@@ -1096,7 +1096,7 @@ const variantStyles$1 = {
 
 /* ====== VARIANT STACKED: Vertical sections ====== */
 const StackedFooter = styled.footer`
-  background: ${variantStyles$1.stacked.background};
+  background: ${props => props.$bg || variantStyles$1.stacked.background};
   color: ${variantStyles$1.stacked.color};
   padding: 3rem 2rem 1.5rem;
   font-family: "Inter", sans-serif;
@@ -1254,7 +1254,7 @@ const SocialIcons = styled.div`
 
 /* ====== VARIANT COLUMNS: Multi-column layout ====== */
 const ColumnsFooter = styled.footer`
-  background: ${variantStyles$1.columns.background};
+  background: ${props => props.$bg || variantStyles$1.columns.background};
   color: ${variantStyles$1.columns.color};
   padding: 4rem 3rem 2rem;
   font-family: "Poppins", sans-serif;
@@ -1383,7 +1383,7 @@ const ColumnsDivider = styled.div`
 
 /* ====== VARIANT CENTERED: Center-aligned footer ====== */
 const CenteredFooter = styled.footer`
-  background: ${variantStyles$1.centered.background};
+  background: ${props => props.$bg || variantStyles$1.centered.background};
   color: ${variantStyles$1.centered.color};
   padding: 3rem 2rem;
   font-family: "Poppins", sans-serif;
@@ -1482,7 +1482,8 @@ const normalizeLink = link => {
 };
 function FooterVariant({
   variant = "stacked",
-  data
+  data,
+  backgroundColor
 }) {
   const defaultData = {
     stacked: {
@@ -1528,6 +1529,7 @@ function FooterVariant({
   switch (variant) {
     case "stacked":
       return /*#__PURE__*/jsxs(StackedFooter, {
+        $bg: backgroundColor,
         children: [/*#__PURE__*/jsxs(StackedSection, {
           children: [/*#__PURE__*/jsxs(StackedBrand, {
             children: [/*#__PURE__*/jsx("h2", {
@@ -1573,6 +1575,7 @@ function FooterVariant({
       });
     case "columns":
       return /*#__PURE__*/jsxs(ColumnsFooter, {
+        $bg: backgroundColor,
         children: [/*#__PURE__*/jsxs(ColumnsGrid, {
           children: [/*#__PURE__*/jsxs(ColumnBox, {
             children: [/*#__PURE__*/jsx("h3", {
@@ -1633,6 +1636,7 @@ function FooterVariant({
       });
     case "centered":
       return /*#__PURE__*/jsx(CenteredFooter, {
+        $bg: backgroundColor,
         children: /*#__PURE__*/jsxs(CenteredContent, {
           children: [/*#__PURE__*/jsx(CenteredLogo, {
             children: footerData.logo

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-hairomin",
-  "version": "0.3.6",
+  "version": "0.3.9",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",