@pine-ds/doc-components 0.2.4 → 1.1.1

package/dist/index.js

@@ -991,7 +991,7 @@ const ws = [
     n(),
     i()
   ] }) });
-}, h_ = Cb;
+}, b_ = Cb;
 function Ob(e, t) {
   if (e == null)
     return {};
@@ -23387,7 +23387,261 @@ const n_ = Qg, i_ = (e) => (e = e.replace(/[A-Z]/g, " $&"), e[0].toUpperCase() +
       ]
     }
   );
-}, E_ = o_, s_ = {
+}, m_ = o_, s_ = {
+  white: {
+    value: "#FFF",
+    type: "color"
+  },
+  black: {
+    value: "#000",
+    type: "color"
+  },
+  grey: {
+    100: {
+      value: "#F9FAFA",
+      type: "color"
+    },
+    200: {
+      value: "#F6F8F8",
+      type: "color"
+    },
+    300: {
+      value: "#ECEEEF",
+      type: "color"
+    },
+    400: {
+      value: "#D3D5D9",
+      type: "color"
+    },
+    500: {
+      value: "#B5BAC0",
+      type: "color"
+    }
+  },
+  charcoal: {
+    100: {
+      value: "#8D939A",
+      type: "color"
+    },
+    200: {
+      value: "#60666C",
+      type: "color"
+    },
+    300: {
+      value: "#43474B",
+      type: "color"
+    },
+    400: {
+      value: "#202327",
+      type: "color"
+    },
+    500: {
+      value: "#040506",
+      type: "color"
+    }
+  },
+  blue: {
+    100: {
+      value: "#E6F4FE",
+      type: "color"
+    },
+    200: {
+      value: "#8ECAFB",
+      type: "color"
+    },
+    300: {
+      value: "#0072EF",
+      type: "color"
+    },
+    400: {
+      value: "#054FB8",
+      type: "color"
+    },
+    500: {
+      value: "#07265F",
+      type: "color"
+    }
+  },
+  green: {
+    100: {
+      value: "#DDF8F0",
+      type: "color"
+    },
+    200: {
+      value: "#86D5BC",
+      type: "color"
+    },
+    300: {
+      value: "#23856D",
+      type: "color"
+    },
+    400: {
+      value: "#225D53",
+      type: "color"
+    },
+    500: {
+      value: "#183E3B",
+      type: "color"
+    }
+  },
+  red: {
+    100: {
+      value: "#FFF0F0",
+      type: "color"
+    },
+    200: {
+      value: "#FDB0AA",
+      type: "color"
+    },
+    300: {
+      value: "#CF3C32",
+      type: "color"
+    },
+    400: {
+      value: "#99221E",
+      type: "color"
+    },
+    500: {
+      value: "#5E0D0D",
+      type: "color"
+    }
+  },
+  yellow: {
+    100: {
+      value: "#FEF8E1",
+      type: "color"
+    },
+    200: {
+      value: "#FAD980",
+      type: "color"
+    },
+    300: {
+      value: "#FFC505",
+      type: "color"
+    },
+    400: {
+      value: "#C56A02",
+      type: "color"
+    },
+    500: {
+      value: "#8C3B08",
+      type: "color"
+    }
+  },
+  orange: {
+    100: {
+      value: "#FEF1E1",
+      type: "color"
+    },
+    200: {
+      value: "#FFB36B",
+      type: "color"
+    },
+    300: {
+      value: "#FB7E09",
+      type: "color"
+    },
+    400: {
+      value: "#B3501E",
+      type: "color"
+    },
+    500: {
+      value: "#5A260C",
+      type: "color"
+    }
+  },
+  purple: {
+    100: {
+      value: "#EEE4F6",
+      type: "color"
+    },
+    200: {
+      value: "#D9C2EF",
+      type: "color"
+    },
+    300: {
+      value: "#8E5AD8",
+      type: "color"
+    },
+    400: {
+      value: "#50348A",
+      type: "color"
+    },
+    500: {
+      value: "#381C5E",
+      type: "color"
+    }
+  }
+}, l_ = {
+  0: {
+    value: "0",
+    type: "spacing"
+  },
+  100: {
+    value: "8px",
+    type: "spacing"
+  },
+  150: {
+    value: "12px",
+    type: "spacing"
+  },
+  200: {
+    value: "16px",
+    type: "spacing"
+  },
+  250: {
+    value: "20px",
+    type: "spacing"
+  },
+  300: {
+    value: "24px",
+    type: "spacing"
+  },
+  350: {
+    value: "28px",
+    type: "spacing"
+  },
+  400: {
+    value: "32px",
+    type: "spacing"
+  },
+  450: {
+    value: "36px",
+    type: "spacing"
+  },
+  500: {
+    value: "40px",
+    type: "spacing"
+  },
+  550: {
+    value: "44px",
+    type: "spacing"
+  },
+  600: {
+    value: "48px",
+    type: "spacing"
+  },
+  650: {
+    value: "52px",
+    type: "spacing"
+  },
+  700: {
+    value: "56px",
+    type: "spacing"
+  },
+  750: {
+    value: "60px",
+    type: "spacing"
+  },
+  800: {
+    value: "64px",
+    type: "spacing"
+  },
+  "050": {
+    value: "4px",
+    type: "spacing"
+  }
+}, u_ = {
   "border-radius": {
     0: {
       value: "0",
@@ -23532,192 +23786,7 @@ const n_ = Qg, i_ = (e) => (e = e.replace(/[A-Z]/g, " $&"), e[0].toUpperCase() +
       type: "boxShadow"
     }
   },
-  color: {
-    white: {
-      value: "#FFF",
-      type: "color"
-    },
-    black: {
-      value: "#000",
-      type: "color"
-    },
-    grey: {
-      100: {
-        value: "#F9FAFA",
-        type: "color"
-      },
-      200: {
-        value: "#F6F8F8",
-        type: "color"
-      },
-      300: {
-        value: "#ECEEEF",
-        type: "color"
-      },
-      400: {
-        value: "#D3D5D9",
-        type: "color"
-      },
-      500: {
-        value: "#B5BAC0",
-        type: "color"
-      }
-    },
-    charcoal: {
-      100: {
-        value: "#8D939A",
-        type: "color"
-      },
-      200: {
-        value: "#60666C",
-        type: "color"
-      },
-      300: {
-        value: "#43474B",
-        type: "color"
-      },
-      400: {
-        value: "#202327",
-        type: "color"
-      },
-      500: {
-        value: "#040506",
-        type: "color"
-      }
-    },
-    blue: {
-      100: {
-        value: "#E6F4FE",
-        type: "color"
-      },
-      200: {
-        value: "#8ECAFB",
-        type: "color"
-      },
-      300: {
-        value: "#0072EF",
-        type: "color"
-      },
-      400: {
-        value: "#054FB8",
-        type: "color"
-      },
-      500: {
-        value: "#07265F",
-        type: "color"
-      }
-    },
-    green: {
-      100: {
-        value: "#DDF8F0",
-        type: "color"
-      },
-      200: {
-        value: "#86D5BC",
-        type: "color"
-      },
-      300: {
-        value: "#23856D",
-        type: "color"
-      },
-      400: {
-        value: "#225D53",
-        type: "color"
-      },
-      500: {
-        value: "#183E3B",
-        type: "color"
-      }
-    },
-    red: {
-      100: {
-        value: "#FFF0F0",
-        type: "color"
-      },
-      200: {
-        value: "#FDB0AA",
-        type: "color"
-      },
-      300: {
-        value: "#CF3C32",
-        type: "color"
-      },
-      400: {
-        value: "#99221E",
-        type: "color"
-      },
-      500: {
-        value: "#5E0D0D",
-        type: "color"
-      }
-    },
-    yellow: {
-      100: {
-        value: "#FEF8E1",
-        type: "color"
-      },
-      200: {
-        value: "#FAD980",
-        type: "color"
-      },
-      300: {
-        value: "#FFC505",
-        type: "color"
-      },
-      400: {
-        value: "#C56A02",
-        type: "color"
-      },
-      500: {
-        value: "#8C3B08",
-        type: "color"
-      }
-    },
-    orange: {
-      100: {
-        value: "#FEF1E1",
-        type: "color"
-      },
-      200: {
-        value: "#FFB36B",
-        type: "color"
-      },
-      300: {
-        value: "#FB7E09",
-        type: "color"
-      },
-      400: {
-        value: "#B3501E",
-        type: "color"
-      },
-      500: {
-        value: "#5A260C",
-        type: "color"
-      }
-    },
-    purple: {
-      100: {
-        value: "#EEE4F6",
-        type: "color"
-      },
-      200: {
-        value: "#D9C2EF",
-        type: "color"
-      },
-      300: {
-        value: "#8E5AD8",
-        type: "color"
-      },
-      400: {
-        value: "#50348A",
-        type: "color"
-      },
-      500: {
-        value: "#381C5E",
-        type: "color"
-      }
-    }
-  },
+  color: s_,
   "font-family": {
     circular: {
       value: '"Circular", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif',
@@ -23896,502 +23965,16 @@ const n_ = Qg, i_ = (e) => (e = e.replace(/[A-Z]/g, " $&"), e[0].toUpperCase() +
       type: "lineHeights"
     }
   },
-  spacing: {
-    0: {
-      value: "0",
-      type: "spacing"
-    },
-    100: {
-      value: "8px",
-      type: "spacing"
-    },
-    150: {
-      value: "12px",
-      type: "spacing"
-    },
-    200: {
-      value: "16px",
-      type: "spacing"
-    },
-    250: {
-      value: "20px",
-      type: "spacing"
-    },
-    300: {
-      value: "24px",
-      type: "spacing"
-    },
-    350: {
-      value: "28px",
-      type: "spacing"
-    },
-    400: {
-      value: "32px",
-      type: "spacing"
-    },
-    450: {
-      value: "36px",
-      type: "spacing"
-    },
-    500: {
-      value: "40px",
-      type: "spacing"
-    },
-    550: {
-      value: "44px",
-      type: "spacing"
-    },
-    600: {
-      value: "48px",
-      type: "spacing"
-    },
-    650: {
-      value: "52px",
-      type: "spacing"
-    },
-    700: {
-      value: "56px",
-      type: "spacing"
-    },
-    750: {
-      value: "60px",
-      type: "spacing"
-    },
-    800: {
-      value: "64px",
-      type: "spacing"
-    },
-    "050": {
-      value: "4px",
-      type: "spacing"
-    }
-  }
-}, l_ = {
-  border: {
-    default: {
-      value: {
-        width: "{border-width.thin}",
-        style: "solid",
-        color: "{color.grey.300}"
-      },
-      type: "border"
-    },
-    interactive: {
-      default: {
-        value: {
-          color: "{color.grey.400}",
-          width: "{border-width.thin}",
-          style: "solid"
-        },
-        type: "border"
-      },
-      hover: {
-        value: {
-          width: "{border-width.thin}",
-          color: "{color.grey.500}",
-          style: "solid"
-        },
-        type: "border"
-      },
-      error: {
-        value: {
-          color: "{color.red.300}",
-          width: "{border-width.thin}",
-          style: "solid"
-        },
-        type: "border"
-      }
-    },
-    focus: {
-      default: {
-        value: {
-          color: "{color.blue.200}",
-          width: "{border-width.thick}",
-          style: "solid"
-        },
-        type: "border"
-      },
-      destructive: {
-        value: {
-          color: "{color.red.200}",
-          width: "{border-width.thick}",
-          style: "solid"
-        },
-        type: "border"
-      },
-      error: {
-        value: {
-          color: "{color.red.200}",
-          width: "{border-width.thick}",
-          style: "solid"
-        },
-        type: "border"
-      }
-    }
-  },
-  "border-radius": {
-    default: {
-      value: "{border-radius.100}",
-      type: "borderRadius"
-    },
-    circle: {
-      value: "{border-radius.round}",
-      type: "borderRadius"
-    }
-  },
-  color: {
-    background: {
-      action: {
-        primary: {
-          default: {
-            value: "{color.charcoal.400}",
-            type: "color"
-          },
-          disabled: {
-            value: "{color.grey.300}",
-            type: "color"
-          },
-          hover: {
-            value: "{color.charcoal.500}",
-            type: "color"
-          }
-        },
-        secondary: {
-          default: {
-            value: "{color.white}",
-            type: "color"
-          }
-        },
-        accent: {
-          default: {
-            value: "{color.blue.300}",
-            type: "color"
-          },
-          disabled: {
-            value: "{color.blue.100}",
-            type: "color"
-          },
-          hover: {
-            value: "{color.blue.400}",
-            type: "color"
-          }
-        },
-        destructive: {
-          default: {
-            value: "{color.red.300}",
-            type: "color"
-          },
-          disabled: {
-            value: "{color.red.100}",
-            type: "color"
-          },
-          hover: {
-            value: "{color.red.400}",
-            type: "color"
-          }
-        }
-      },
-      container: {
-        default: {
-          value: "{color.white}",
-          type: "color"
-        }
-      },
-      form: {
-        default: {
-          value: "{color.white}",
-          type: "color"
-        }
-      },
-      sentiment: {
-        neutral: {
-          value: "{color.charcoal.400}",
-          type: "color"
-        },
-        positive: {
-          value: "{color.green.300}",
-          type: "color"
-        },
-        negative: {
-          value: "{color.red.300}",
-          type: "color"
-        },
-        attentive: {
-          value: "{color.yellow.300}",
-          type: "color"
-        },
-        informative: {
-          value: "{color.blue.300}",
-          type: "color"
-        }
-      }
-    },
-    text: {
-      action: {
-        primary: {
-          default: {
-            value: "{color.white}",
-            type: "color"
-          },
-          disabled: {
-            value: "{color.charcoal.100}",
-            type: "color"
-          }
-        },
-        accent: {
-          default: {
-            value: "{color.white}",
-            type: "color"
-          },
-          disabled: {
-            value: "{color.blue.200}",
-            type: "color"
-          }
-        },
-        destructive: {
-          default: {
-            value: "{color.white}",
-            type: "color"
-          },
-          disabled: {
-            value: "{color.red.200}",
-            type: "color"
-          }
-        }
-      },
-      body: {
-        default: {
-          value: "{color.charcoal.400}",
-          type: "color"
-        }
-      },
-      form: {
-        default: {
-          value: "{color.charcoal.400}",
-          type: "color"
-        },
-        disabled: {
-          value: "{color.charcoal.200}",
-          type: "color"
-        },
-        error: {
-          value: "{color.red.300}",
-          type: "color"
-        },
-        placeholder: {
-          value: "{color.charcoal.200}",
-          type: "color"
-        }
-      },
-      heading: {
-        default: {
-          value: "{color.charcoal.500}",
-          type: "color"
-        }
-      },
-      icon: {
-        default: {
-          value: "{color.charcoal.400}",
-          type: "color"
-        }
-      },
-      link: {
-        default: {
-          value: "{color.blue.300}",
-          type: "color"
-        },
-        hover: {
-          value: "{color.blue.400}",
-          type: "color"
-        }
-      }
-    }
-  },
-  "heading-1": {
-    value: {
-      fontWeight: "{font-weight.bold}",
-      fontSize: "{font-size.250}",
-      lineHeight: "{line-height.275}",
-      letterSpacing: "{letter-spacing.md}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "heading-2": {
-    value: {
-      fontWeight: "{font-weight.bold}",
-      fontSize: "{font-size.200}",
-      lineHeight: "{line-height.125}",
-      letterSpacing: "{letter-spacing.sm}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "heading-3": {
-    value: {
-      fontSize: "{font-size.175}",
-      fontWeight: "{font-weight.bold}",
-      lineHeight: "{line-height.100}",
-      letterSpacing: "{letter-spacing.xs}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "heading-4": {
-    value: {
-      fontWeight: "{font-weight.semi-bold}",
-      fontSize: "{font-size.150}",
-      lineHeight: "{line-height.125}",
-      letterSpacing: "{letter-spacing.xs}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "heading-5": {
-    value: {
-      fontWeight: "{font-weight.semi-bold}",
-      fontSize: "{font-size.112}",
-      lineHeight: "{line-height.225}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "heading-6": {
-    value: {
-      fontWeight: "{font-weight.semi-bold}",
-      fontSize: "{font-size.100}",
-      lineHeight: "{line-height.175}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  body: {
-    value: {
-      fontWeight: "{font-weight.normal}",
-      fontSize: "{font-size.100}",
-      lineHeight: "{line-height.150}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "body-med": {
-    value: {
-      fontSize: "{font-size.100}",
-      lineHeight: "{line-height.150}",
-      fontWeight: "{font-weight.medium}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "body-semi": {
-    value: {
-      fontSize: "{font-size.100}",
-      lineHeight: "{line-height.150}",
-      fontWeight: "{font-weight.semi-bold}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "body-bold": {
-    value: {
-      fontSize: "{font-size.100}",
-      lineHeight: "{line-height.150}",
-      fontWeight: "{font-weight.bold}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "body-sm": {
-    value: {
-      fontWeight: "{font-weight.normal}",
-      fontSize: "{font-size.087}",
-      lineHeight: "{line-height.150}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "body-sm-med": {
-    value: {
-      fontWeight: "{font-weight.medium}",
-      fontSize: "{font-size.087}",
-      lineHeight: "{line-height.150}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "body-sm-semi": {
-    value: {
-      fontWeight: "{font-weight.semi-bold}",
-      fontSize: "{font-size.087}",
-      lineHeight: "{line-height.150}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "body-sm-bold": {
-    value: {
-      fontWeight: "{font-weight.bold}",
-      fontSize: "{font-size.087}",
-      lineHeight: "{line-height.150}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "body-xs": {
-    value: {
-      fontWeight: "{font-weight.normal}",
-      fontSize: "{font-size.075}",
-      lineHeight: "{line-height.100}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "body-xs-med": {
-    value: {
-      fontWeight: "{font-weight.medium}",
-      fontSize: "{font-size.075}",
-      lineHeight: "{line-height.100}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "body-xs-semi": {
-    value: {
-      fontWeight: "{font-weight.semi-bold}",
-      fontSize: "{font-size.075}",
-      lineHeight: "{line-height.100}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  },
-  "body-xs-bold": {
-    value: {
-      fontWeight: "{font-weight.bold}",
-      fontSize: "{font-size.075}",
-      lineHeight: "{line-height.100}",
-      fontFamily: "{font-family.circular}"
-    },
-    type: "typography"
-  }
-}, u_ = [], c_ = {
-  tokenSetOrder: [
-    "core",
-    "semantic"
-  ]
-}, d_ = {
-  core: s_,
-  semantic: l_,
-  $themes: u_,
-  $metadata: c_
-}, p_ = {
+  spacing: l_
+}, c_ = {
   color: { width: "100%", height: "40px", borderRadius: "4px" },
   border: { width: "100%", height: "40px", borderRadius: "4px" },
   "border-radius": { border: "1px solid #d3d5d9", width: "100%", height: "40px" },
   "border-width": { border: "1px solid #d3d5d9", width: "100%", height: "40px" },
   "box-shadow": { width: "100%", height: "40px" }
-}, g_ = (e, t) => {
+}, d_ = (e, t) => {
   var i;
-  const r = {}, a = p_[e];
+  const r = {}, a = c_[e];
   Object.assign(r, a);
   const n = {
     border: (o) => r.border = o,
@@ -24406,8 +23989,8 @@ const n_ = Qg, i_ = (e) => (e = e.replace(/[A-Z]/g, " $&"), e[0].toUpperCase() +
     "line-height": (o) => r.lineHeight = o
   };
   return (i = n[e]) == null || i.call(n, t), r;
-}, f_ = ({ category: e }) => {
-  const t = d_.core[e], r = (n) => Object.values(n).filter((s) => s !== "dropShadow").join(" "), a = (n, i) => {
+}, p_ = ({ category: e }) => {
+  const t = u_[e], r = (n) => Object.values(n).filter((s) => s !== "dropShadow").join(" "), a = (n, i) => {
     const o = Object.entries(n);
     return (["box-shadow", "color"].includes(e) ? o : o.sort(
       ([, c], [, f]) => parseInt(c.value) - parseInt(f.value)
@@ -24418,7 +24001,7 @@ const n_ = Qg, i_ = (e) => (e = e.replace(/[A-Z]/g, " $&"), e[0].toUpperCase() +
         y = f.value, typeof f.value == "object" && ("value" in f.value ? y = f.value.value : f.type === "boxShadow" && (Array.isArray(f.value) ? y = f.value.map(r).join(", ") : y = r(f.value)));
         let l = {}, E = /* @__PURE__ */ O.jsx("div", { style: l, children: "Aa" });
         if (y)
-          switch (l = g_(e, y), E = ["letter-spacing", "line-height", "font-weight", "font-family", "font-size"].includes(e) ? /* @__PURE__ */ O.jsx("div", { style: l, children: "Aa" }) : /* @__PURE__ */ O.jsx("div", { style: l }), e) {
+          switch (l = d_(e, y), E = ["letter-spacing", "line-height", "font-weight", "font-family", "font-size"].includes(e) ? /* @__PURE__ */ O.jsx("div", { style: l, children: "Aa" }) : /* @__PURE__ */ O.jsx("div", { style: l }), e) {
             case "spacing":
               E = /* @__PURE__ */ O.jsxs("div", { style: { display: "flex", alignItems: "center", gap: `var(${h})` }, children: [
                 /* @__PURE__ */ O.jsx("div", { style: { border: "1px solid #eceeef", width: "60px", height: "30px", borderRadius: "4px" } }, `${Math.floor(Math.random() * 1e5) + 1}`),
@@ -24443,10 +24026,10 @@ const n_ = Qg, i_ = (e) => (e = e.replace(/[A-Z]/g, " $&"), e[0].toUpperCase() +
     ] }) }),
     /* @__PURE__ */ O.jsx("tbody", { children: a(t) })
   ] });
-}, y_ = f_;
+}, h_ = p_;
 export {
-  h_ as DocArgsTable,
-  E_ as DocCanvas,
-  y_ as DocTokenTable
+  b_ as DocArgsTable,
+  m_ as DocCanvas,
+  h_ as DocTokenTable
 };
 //# sourceMappingURL=index.js.map