playbook_ui 14.18.0 → 14.19.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 94ec449a03aebe3006ca1edc972e4632eb4ce67276e4e2a575dd54e4a26d87be
-  data.tar.gz: 6843d0fe6728e70935869341db3aa00e22eaa987e935ff80c502629f841fee9b
+  metadata.gz: 4ae9d27af86020c669d4402b35b61ee356de6cb7a61fdbb177eac964f2765822
+  data.tar.gz: f8e3d579c5e3b29639a3b56a09c3e8e20f48a9089ab4c6a1d6cb3302ecf0119b
 SHA512:
-  metadata.gz: c4f7a5ceff1a63c95bfea4df95fcc16a633fd926d6a521cf812062292da2cc73ddaf8b3e010311bcedd20b962a7558855c44895d236ab5db3b0015cda458fb1c
-  data.tar.gz: ed2800f912e35e9e0c2e457613ad19d58e9801b9fc8ce8a322c38d0d0609b28138eaeb9dcce449e441ceb93983697c628b49790eccc930c9264e4e9c11fbc505
+  metadata.gz: 4b142aba7e0202847db31c8e74164ba49ff77382f5ea97e173af29a3c115627b092b2872d9e82898b32432dbec1fb8b5c82dcc523ded9bea8f93f37b0ffb95fb
+  data.tar.gz: 94c8ff54d18937587afe9fa0ef51e0805686f133e2b230ca0628078cd4b26a19ca4564cb7359a37ada021c884990f16c0bf2940a07d8876386252e2cdb80829a

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { merge } from '../utilities/object' 
+import { merge } from '../utilities/object'
 
 type CircleChartProps = {
   align?: "left" | "right" | "center";

data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js

@@ -28,7 +28,7 @@ test('uses exact classname', () => {
       value: 49,
     },
     {
-      name: 'After call',
+      name: 'After Call',
       value: 10,
     },
   ]
@@ -39,7 +39,7 @@ test('uses exact classname', () => {
         id='circlechartid'
     />
   );
- 
+
   const kit = screen.getByTestId(testId);
   expect(kit).toHaveClass('pb_circle_chart');
 });

data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts

@@ -0,0 +1,53 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+
+const circleChartTheme = {
+  title: { text: "" },
+  chart: {
+    type: "pie",
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark],
+      ],
+    },
+    pointFormat:
+      '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
+      "<b>{point.y}</b>",
+    followPointer: true,
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  plotOptions: {
+    pie: {
+      dataLabels: {
+        enabled: false,
+      },
+      innerSize: '50%',
+      borderColor: "",
+      borderWidth: null as number | null,
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+      ],
+    },
+  },
+  credits: { enabled: false }
+}
+
+export default circleChartTheme;

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>
@@ -18,7 +18,7 @@
     chart_data: data_51,
     id: "with-a-block-2",
     rounded: true,
-}) do %> 
+}) do %>
     <%= pb_rails('title', props: {text: "83", size: 1, tag: 'div'}) %>
 <% end %>
 

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx

@@ -13,7 +13,7 @@ const dataWithABlock = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx

@@ -12,7 +12,7 @@ const dataWithColors = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx

@@ -12,7 +12,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx

@@ -12,7 +12,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx

@@ -14,7 +14,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx

@@ -14,7 +14,7 @@ const CircleChartLiveData = (props) => {
       value: 49,
     },
     {
-      name: 'After call',
+      name: 'After Call',
       value: 10,
     },
   ])
@@ -29,7 +29,7 @@ const CircleChartLiveData = (props) => {
       value: 12,
     },
     {
-      name: 'After call',
+      name: 'After Call',
       value: 140,
     },
   ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+
+const data = [
+  {
+    name: 'Waiting for Calls',
+    y: 41,
+  },
+  {
+    name: 'On Call',
+    y: 49,
+  },
+  {
+    name: 'After Call',
+    y: 10,
+  },
+]
+
+const baseOptions = {
+  series: [{ data: data }],
+}
+
+const CircleChartPbStyles = () => {
+  const options = Highcharts.merge({}, circleChartTheme, baseOptions )
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default CircleChartPbStyles;

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md

@@ -0,0 +1 @@
+You don't need to use the Circle Chart Kit to apply Playbook styles to your Highcharts circle chart. Just import circleChartTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx

@@ -12,7 +12,7 @@ const dataRounded = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml

@@ -14,6 +14,7 @@ examples:
 
   react:
   - circle_chart_default: Default Style
+  - circle_chart_pb_styles: Playbook Styles
   - circle_chart_live_data: Live Data
   - circle_chart_rounded: Rounded Corners
   - circle_chart_block: Accepts Any Block
@@ -22,7 +23,5 @@ examples:
   - circle_chart_with_legend_kit: Legend
   - circle_chart_legend_position: Legend Position
   - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options  
+  - circle_chart_inner_sizes: Inner Circle Size Options
   - circle_chart_custom_tooltip: Tooltip Customization
-
-

data/app/pb_kits/playbook/pb_circle_chart/docs/index.js

@@ -8,4 +8,5 @@ export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend
 export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
 export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
 export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
-export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
+export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
+export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -50,6 +50,10 @@ type DatePickerProps = {
   timeFormat?: string,
   type?: string,
   yearRange?: number[],
+  controlsStartId?: string,
+    controlsEndId?: string,
+    syncStartWith?: string,
+    syncEndWith?: string,
 } & GlobalProps
 
 const DatePicker = (props: DatePickerProps): React.ReactElement => {
@@ -98,6 +102,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     staticPosition = true,
     thisRangesEndToday = false,
     yearRange = [1900, 2100],
+    controlsStartId,
+    controlsEndId,
+    syncStartWith,
+    syncEndWith,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -134,6 +142,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       staticPosition,
       thisRangesEndToday,
       yearRange,
+      controlsStartId,
+      controlsEndId,
+      syncStartWith,
+      syncEndWith,
       required: false,
     }, scrollContainer)
   }, initializeOnce ? [] : undefined)

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -77,6 +77,14 @@ module Playbook
                                default: ""
       prop :validation_message, type: Playbook::Props::String,
                                 default: ""
+      prop :controls_start_id, type: Playbook::Props::String,
+                               default: ""
+      prop :controls_end_id, type: Playbook::Props::String,
+                             default: ""
+      prop :sync_start_with, type: Playbook::Props::String,
+                             default: ""
+      prop :sync_end_with, type: Playbook::Props::String,
+                           default: ""
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -108,6 +116,10 @@ module Playbook
           staticPosition: static_position,
           thisRangesEndToday: this_ranges_end_today,
           yearRange: year_range,
+          controlsStartId: controls_start_id,
+          controlsEndId: controls_end_id,
+          syncStartWith: sync_start_with,
+          syncEndWith: sync_end_with,
         }.to_json.html_safe
       end
 

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -32,7 +32,11 @@ type DatePickerConfig = {
   thisRangesEndToday?: boolean,
   timeCaption?: string,
   timeFormat?: string,
-  yearRange: number[]
+  yearRange: number[],
+  controlsStartId?: string,
+    controlsEndId?: string,
+    syncStartWith?: string,
+    syncEndWith?: string,
 } & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
 
 const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
@@ -67,6 +71,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     timeCaption = 'Select Time',
     timeFormat = 'at h:i K',
     yearRange,
+    controlsStartId,
+    controlsEndId,
+    syncStartWith,
+    syncEndWith,
   } = config
 
   // ===========================================================
@@ -275,6 +283,47 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
 
+  // === Automatic Sync Logic for 3 input range pattern===
+
+  // If this is a quickpick that controls start and end
+  if (selectionType === "quickpick" && (controlsStartId || controlsEndId)) {
+    picker.config.onClose.push((selectedDates:string) => {
+      const [start, end] = selectedDates;
+
+      if (controlsStartId) {
+        const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        startPicker?.setDate(start, true);
+      }
+
+      if (controlsEndId) {
+        const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        endPicker?.setDate(end, true);
+      }
+    });
+  }
+
+  // If this is a start picker that syncs with a quickpick
+  if (syncStartWith) {
+    picker.config.onClose.push((selectedDates: string) => {
+      if (selectedDates?.length) {
+        const quickpick = (document.querySelector(`#${syncStartWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        quickpick?.clear();
+      }
+    });
+  }
+
+  // If this is an end picker that syncs with a quickpick
+  if (syncEndWith) {
+    picker.config.onClose.push((selectedDates: string) => {
+      if (selectedDates?.length) {
+        const quickpick = (document.querySelector(`#${syncEndWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        quickpick?.clear();
+      }
+    });
+  }
+// === End of Automatic Sync Logic ===
+
+    
   // Adding dropdown icons to year and month select
   dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
   if (picker.monthElements[0].parentElement) {

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx

@@ -1,11 +1,14 @@
 import React from 'react'
 
 import DatePicker from '../_date_picker'
+import Icon from '../../pb_icon/_icon'
 
 const DatePickerError = (props) => (
   <div>
     <DatePicker
-        error="Invalid date. Please pick a valid date."
+        error={<>
+          <Icon icon="warning" /> Invalid date. Please pick a valid date.
+        </>}
         pickerId="date-picker-error"
         {...props}
     />

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md

@@ -1,3 +1,7 @@
+To use the `quickpick`:
+- prop `mode` must be set to `range`
+- prop `selection_type` must be set to `quickpick`
+
 This date range variant uses hidden inputs to handle start and end dates. While they are not required props, it is advisable to specify a unique `start_date_id`, `start_date_name`, `end_date_id`, and `end_date_name` for each quick pick instance you place in a form and/or on a page.
 
 Like all other date pickers, the quick pick does require a `picker_id`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md

@@ -1 +1 @@
-Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.
+Use `this_ranges_end_today`/`thisRangesEndToday` to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if the `this_ranges_end_today`/`thisRangesEndToday` prop is used, end date on that range will be today's date.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md

@@ -1 +1,5 @@
-Use the `onChange` handler function to access the startDate and endDate values. Check the [`onChange` example](https://playbook.powerapp.cloud/kits/date_picker/react#onchange) for more information.
+To use the `quickpick`:
+- prop `mode` must be set to `range`
+- prop `selectionType` must be set to `quickpick`
+
+Use the `onClose` handler function to access the startDate and endDate values. Check the [`onClose` example](https://playbook.powerapp.cloud/kits/date_picker/react#onclose) for more information.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import DatePicker from "../_date_picker";
+
+const DatePickerRangePattern = (props) => {
+  return (
+    <>
+      <DatePicker
+          controlsEndId="end-date-picker"
+          controlsStartId="start-date-picker"
+          mode="range"
+          pickerId="quickpick-for-range"
+          placeholder="Select a Range"
+          selectionType="quickpick"
+          {...props}
+      />
+
+      <DatePicker
+          pickerId="start-date-picker"
+          placeholder="Select a Start Date"
+          syncStartWith="quickpick-for-range"
+          {...props}
+      />
+
+      <DatePicker
+          pickerId="end-date-picker"
+          placeholder="Select a End Date"
+          syncEndWith="quickpick-for-range"
+          {...props}
+      />
+    </>
+  );
+};
+
+export default DatePickerRangePattern;

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md

@@ -0,0 +1,14 @@
+You can link a Quickpick DatePicker to standard DatePickers using the following props:
+
+**For the Quickpick DatePicker**:
+`controlsStartId`: ID of the DatePicker that should receive the start date.
+
+`controlsEndId`: ID of the DatePicker that should receive the end date.
+
+When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
+
+**For the Start/End DatePickers**:
+`syncStartWith`: ID of the quickpick this start date is synced to.
+`syncEndWith`: ID of the quickpick this end date is synced to.
+
+When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("date_picker", props: {
+  mode: "range",
+  picker_id: "quick-pick-date-range",
+  placeholder: "Select a Date Range",
+  selection_type: "quickpick",
+  controls_end_id: "quick-pick-date-range-end",
+  controls_start_id: "quick-pick-date-range-start",
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "quick-pick-date-range-start",
+  placeholder: "Select a Start Date",
+  sync_start_with:"quick-pick-date-range",
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "quick-pick-date-range-end",
+  placeholder: "Select an End Date",
+  sync_end_with:"quick-pick-date-range",
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md

@@ -0,0 +1,14 @@
+You can link a Quickpick DatePicker to standard DatePickers using the following props:
+
+**For the Quickpick DatePicker**:
+`controls_start_id`: ID of the DatePicker that should receive the start date.
+
+`controls_end_id`: ID of the DatePicker that should receive the end date.
+
+When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
+
+**For the Start/End DatePickers**:
+`sync_start_with`: ID of the quickpick this start date is synced to.
+`sync_end_with`: ID of the quickpick this end date is synced to.
+
+When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -15,6 +15,7 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
+  - date_picker_range_pattern_rails: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -47,6 +48,7 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
+  - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -26,3 +26,4 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
+export { default as DatePickerRangePattern } from './_date_picker_range_pattern'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -238,6 +238,16 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
       },
 
       onClose(selectedDates: Array<Date>) {
+        // Patch .clear() to also remove active state if cleared
+        const originalClear = fp.clear;
+        fp.clear = function (...args: any) {
+          const current = pluginData.rangesNav.querySelector('.active');
+          if (current) {
+            current.classList.remove('active');
+          }
+          activeLabel = "";
+          return originalClear.apply(this, args);
+        };
         // remove the active class from the button if the selected dates don't match the label
         if (!isLabelMatchingSelectedDates(selectedDates)) {
           pluginData.rangesButtons[activeLabel]?.classList.remove('active');

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx

@@ -1,9 +1,12 @@
 import React, { useState } from 'react'
 import Dropdown from '../../pb_dropdown/_dropdown'
+import Icon from '../../pb_icon/_icon'
 
 const DropdownError = (props) => {
     const [selectedOption, setSelectedOption] = useState()
-    const error = selectedOption?.value ? null : "Please make a valid selection"
+    const error = selectedOption?.value ? null : (<>
+        <Icon icon="warning" /> Please make a valid selection
+    </>)
     const options = [
         {
             label: "United States",

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx

@@ -11,7 +11,6 @@ SolidGauge(Highcharts);
 const data = [{ name: "Name", y: 45 }]
 
 const baseOptions = {
-  title: { text: "" },
   series: [{ data: data }],
 };
 

data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts

@@ -2,6 +2,7 @@ import colors from '../tokens/exports/_colors.module.scss'
 import typography from '../tokens/exports/_typography.module.scss'
 
 const gaugeTheme = {
+  title: { text: "" },
   chart: {
     type: "solidgauge",
     events: {
@@ -77,7 +78,8 @@ const gaugeTheme = {
         y: -26,
       },
     },
-  }
+  },
+  credits: { enabled: false }
 }
 
 export default gaugeTheme;