@pismo/marola 1.0.0-beta.24 → 1.0.0-beta.27

package/dist/components/TextDisplay/TextDisplay.d.ts

@@ -2,8 +2,12 @@ import { VariantType } from '../Typography/Typography.tsx';
 import { default as React } from 'react';
 
 type OptionsProps = {
+    /** Text variant */
     variant?: VariantType;
+    /** Text color */
     color?: string;
+    /** Text weight */
+    bold?: boolean;
 };
 export interface TextDisplayProps {
     /** TextDisplay label */
@@ -12,8 +16,8 @@ export interface TextDisplayProps {
     value: React.ReactNode;
     /** Renders skeleton when true */
     isLoading?: boolean;
-    /** Sets the testId prefix for label, value and skeletons */
-    testId?: string;
+    /** Sets the data-testid prefix for label, value and skeletons */
+    'data-testid'?: string;
     /** Sets the label options */
     labelOptions?: OptionsProps;
     /** Sets the value options */
@@ -21,5 +25,5 @@ export interface TextDisplayProps {
     /** Sets the label and value onto the same line */
     inline?: boolean;
 }
-export declare const TextDisplay: ({ label, value, isLoading, testId, labelOptions, valueOptions, inline, }: TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextDisplay: ({ label, value, isLoading, "data-testid": dataTestId, labelOptions, valueOptions, inline, }: TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TextDisplay/TextDisplay.js

@@ -1,45 +1,45 @@
 import '../../assets/TextDisplay.css';
-import { jsxs as x, jsx as o } from "react/jsx-runtime";
-import { c as _ } from "../../clsx-DB4S2d7J.js";
-import { Skeleton as d } from "../Skeleton/Skeleton.js";
-import { Typography as m } from "../Typography/Typography.js";
-const f = "_container_ia8vu_1", n = {
-  container: f,
+import { jsxs as f, jsx as d } from "react/jsx-runtime";
+import { c as $ } from "../../clsx-DB4S2d7J.js";
+import { Skeleton as m } from "../Skeleton/Skeleton.js";
+import { Typography as y } from "../Typography/Typography.js";
+const g = "_container_ia8vu_1", e = {
+  container: g,
   "container--inline": "_container--inline_ia8vu_5"
-}, T = ({
-  label: i,
-  value: y,
-  isLoading: e = !1,
-  testId: c = "TextDisplay",
+}, i = ({
+  label: h,
+  value: x,
+  isLoading: o = !1,
+  "data-testid": t = "TextDisplay",
   labelOptions: r,
-  valueOptions: a,
-  inline: t
+  valueOptions: c,
+  inline: a
 }) => {
-  const h = r != null && r.color || t ? "var(--black-100)" : "var(--gray-90)";
-  return /* @__PURE__ */ x(
+  const _ = (r == null ? void 0 : r.color) || (a ? "var(--black-100)" : "var(--gray-90)");
+  return /* @__PURE__ */ f(
     "div",
     {
-      className: _([n.container, { [n["container--inline"]]: t }]),
-      "data-testid": `${c}-container`,
+      className: $([e.container, { [e["container--inline"]]: a }]),
+      "data-testid": `${t}-container`,
       children: [
-        /* @__PURE__ */ o(
-          m,
+        /* @__PURE__ */ d(
+          y,
           {
-            color: h,
+            color: _,
             variant: (r == null ? void 0 : r.variant) || "base",
-            "data-testid": `${c}-label`,
-            bold: t,
-            children: e ? /* @__PURE__ */ o(d, { style: { width: 70, marginBottom: 2 }, "data-testid": `${c}-skeletonLabel` }) : i
+            "data-testid": `${t}-label`,
+            bold: (r == null ? void 0 : r.bold) ?? a,
+            children: o ? /* @__PURE__ */ d(m, { style: { width: 70, marginBottom: 2 }, "data-testid": `${t}-skeletonLabel` }) : h
           }
         ),
-        /* @__PURE__ */ o(
-          m,
+        /* @__PURE__ */ d(
+          y,
           {
-            bold: !t,
-            color: (a == null ? void 0 : a.color) || "var(--gray-90)",
-            variant: a != null && a.variant || t ? "base" : "base-lg",
-            "data-testid": `${c}-value`,
-            children: e ? /* @__PURE__ */ o(d, { style: { width: 100 }, "data-testid": `${c}-skeletonValue` }) : y || "-"
+            bold: (c == null ? void 0 : c.bold) ?? !a,
+            color: (c == null ? void 0 : c.color) || "var(--gray-90)",
+            variant: (c == null ? void 0 : c.variant) || (a ? "base" : "base-lg"),
+            "data-testid": `${t}-value`,
+            children: o ? /* @__PURE__ */ d(m, { style: { width: 100 }, "data-testid": `${t}-skeletonValue` }) : x || "-"
           }
         )
       ]
@@ -47,5 +47,5 @@ const f = "_container_ia8vu_1", n = {
   );
 };
 export {
-  T as TextDisplay
+  i as TextDisplay
 };

package/dist/components/TextDisplay/TextDisplay.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ label, value, isLoading, testId, labelOptions, valueOptions, inline, }: import('./TextDisplay').TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ label, value, isLoading, "data-testid": dataTestId, labelOptions, valueOptions, inline, }: import('./TextDisplay').TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
 };
 export default meta;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "1.0.0-beta.24",
+  "version": "1.0.0-beta.27",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/SelectButton-oWzluvmj.js

@@ -1,63 +0,0 @@
-import './assets/SelectButton.css';
-import { jsxs as l, jsx as _ } from "react/jsx-runtime";
-import * as o from "react";
-import { forwardRef as y } from "react";
-import { c as u } from "./clsx-DB4S2d7J.js";
-import { Typography as p } from "./components/Typography/Typography.js";
-const b = "_select__listbox__option__text_1d5mc_65", m = "_select__wrapper_1d5mc_78", g = "_select__label_1d5mc_78", x = "_select_1d5mc_65", w = "_select__popup_1d5mc_87", C = "_select__listbox_1d5mc_65", f = "_select__listbox__option_1d5mc_65", v = "_select__listbox__option__icon_1d5mc_108", L = "_select__list__option__icon_1d5mc_129", e = {
-  "u-typography-h1": "_u-typography-h1_1d5mc_1",
-  "u-typography-h2": "_u-typography-h2_1d5mc_8",
-  "u-typography-h3": "_u-typography-h3_1d5mc_15",
-  "u-typography-h4": "_u-typography-h4_1d5mc_22",
-  "u-typography-h5": "_u-typography-h5_1d5mc_29",
-  "u-typography-h6": "_u-typography-h6_1d5mc_36",
-  "u-typography-base": "_u-typography-base_1d5mc_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_1d5mc_49",
-  "u-typography-base--xl": "_u-typography-base--xl_1d5mc_53",
-  "u-typography-base--lg": "_u-typography-base--lg_1d5mc_57",
-  "u-typography-base--sm": "_u-typography-base--sm_1d5mc_61",
-  "u-typography-base--bold": "_u-typography-base--bold_1d5mc_65",
-  select__listbox__option__text: b,
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1d5mc_68",
-  "u-typography-base--underlined": "_u-typography-base--underlined_1d5mc_71",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1d5mc_74",
-  select__wrapper: m,
-  select__label: g,
-  select: x,
-  select__popup: w,
-  select__listbox: C,
-  select__listbox__option: f,
-  select__listbox__option__icon: v,
-  "select__listbox__option--disabled": "_select__listbox__option--disabled_1d5mc_112",
-  "select__listbox__option--selected": "_select__listbox__option--selected_1d5mc_121",
-  select__list__option__icon: L,
-  "select-button": "_select-button_1d5mc_134",
-  "base-Select-popup": "_base-Select-popup_1d5mc_152",
-  "select-button__text": "_select-button__text_1d5mc_155",
-  "select-button__icon": "_select-button__icon_1d5mc_164",
-  "select-button--active": "_select-button--active_1d5mc_170"
-}, S = (t) => /* @__PURE__ */ o.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M2.11104 4.9999C2.36691 4.9999 2.62291 5.09756 2.81791 5.29287L8.11104 10.5843L13.4048 5.29053C13.7954 4.8999 14.4282 4.8999 14.8188 5.29053C15.2095 5.68115 15.2095 6.31396 14.8188 6.70459L8.81885 12.7046C8.42822 13.0952 7.79541 13.0952 7.40479 12.7046L1.40479 6.70459C1.01416 6.31396 1.01416 5.68115 1.40479 5.29053C1.59854 5.09678 1.85479 4.9999 2.11104 4.9999Z", fill: "currentColor" })), k = (t) => /* @__PURE__ */ o.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M13.8889 11C13.633 11 13.377 10.9023 13.182 10.707L7.8889 5.41563L2.59515 10.7094C2.20453 11.1 1.57172 11.1 1.18109 10.7094C0.790466 10.3188 0.790466 9.68594 1.18109 9.29532L7.18109 3.29532C7.57172 2.90469 8.20453 2.90469 8.59515 3.29532L14.5952 9.29532C14.9858 9.68594 14.9858 10.3188 14.5952 10.7094C14.4014 10.9031 14.1452 11 13.8889 11Z", fill: "#3F3D4B", fillOpacity: 0.88 })), A = y((t, a) => {
-  const { children: i, disabled: r, className: n, "data-testid": d, prefix: s, onClick: h } = t, c = t["aria-expanded"];
-  return /* @__PURE__ */ l(
-    "button",
-    {
-      className: u(n, c ? e["select-button--active"] : "", e["select-button"]),
-      type: "button",
-      onClick: h,
-      disabled: r,
-      "data-testid": d,
-      ref: a,
-      children: [
-        /* @__PURE__ */ l("span", { className: e["select-button__text"], children: [
-          s && /* @__PURE__ */ _(p, { children: s }),
-          /* @__PURE__ */ _(p, { children: i })
-        ] }),
-        /* @__PURE__ */ _("span", { className: e["select-button__icon"], children: c ? /* @__PURE__ */ _(k, {}) : /* @__PURE__ */ _(S, {}) })
-      ]
-    }
-  );
-});
-export {
-  A as S,
-  e as s
-};