playbook_ui 16.5.0.pre.alpha.AVNGR110715795 → 16.5.0.pre.alpha.PLAY2893datepickerlabelclicktoggle15576

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 020a93f89c099ec899d7d2fff17521fa6bf88974f7db82daf7856f3279037ca4
-  data.tar.gz: 5358edd4c8d27cd5bef021ec3ab2b58e6267e62ed8108c63a040c125e2318901
+  metadata.gz: d77932d5ca1ce89caa56b927c3872fab1b7c023388a07072aabdb384268514b6
+  data.tar.gz: 72e5ce55c6161081686b6eb4e4fde9569aa4c01d171de959ecaefd292378652f
 SHA512:
-  metadata.gz: 2d2df0c132670c39ed3fbadbdb094d9025898feb06ec70e6bfe52543cf4af9cb2252d6c1b08e8f644b0a2c601a4e16d72ed76b2d65959a1fba1e116738ef0d18
-  data.tar.gz: 0c618f6b2afbe7fbb521d8413fa171925791690ecaf5121f1566c953ca075710f3e3e03a3e7ed122a8ac29b48db11fe2c281fb9d2036d1bd3e91f7b74e745836
+  metadata.gz: f168b973e873f2ea3961d24cf24fba9a40d4a5de4391ee7fa9251b13de97e8b7c480d0fe276dcbd0192ae7eaae9efea4f1d490fb3d4364e5777f7c6a42046a25
+  data.tar.gz: c990aad5891f894aae33d998c597238819426f531e241742f07d6ecc62b356ffef0a6bc1dfb4e9f73d24f0b4aa4c2830e8b67c18aac69c706b2a59323158ec53

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -7,7 +7,7 @@
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_component = object.header_component_info(cell, cell_index, row_index) %>
         <%= pb_rails(header_component[:name], props: header_component[:props]) do %>
-          <%= pb_rails("flex", props: { align: "center", justify: object.header_flex_justify(cell, cell_index, row_index), text_align: object.header_flex_text_align(cell) }) do %>
+          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: (cell[:header_alignment] || "end") }) do %>
             <% if cell_index.zero? && row_index === header_rows.size - 1 %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
                 <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -192,19 +192,6 @@ module Playbook
         { name: component_name, props: component_props }
       end
 
-      # Flex justify for header cells: column_styling header_alignment when present (otherwisedefault by column/row index)
-      def header_flex_justify(cell, cell_index, row_index)
-        ha = cell[:header_alignment]
-        return header_alignment_to_justify(ha) if ha.present?
-
-        default_header_flex_justify(cell_index, row_index)
-      end
-
-      # Flex text_align from column_styling header_alignment (default is end)
-      def header_flex_text_align(cell)
-        (cell[:header_alignment].presence || "end").to_s
-      end
-
     private
 
       # Find the original column definition for a cell
@@ -364,26 +351,6 @@ module Playbook
           row[:children] || row["children"]
         end
       end
-
-      # 2 header alignment helper methods
-      def header_alignment_to_justify(header_alignment)
-        case header_alignment.to_s
-        when "left" then "start"
-        when "center" then "center"
-        when "right" then "end"
-        else "end"
-        end
-      end
-
-      def default_header_flex_justify(cell_index, row_index)
-        if cell_index.zero?
-          "start"
-        elsif row_index == header_rows.size - 1
-          "end"
-        else
-          "center"
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -31,7 +31,6 @@
       name: object.name,
       placeholder: object.placeholder,
       required: object.required,
-      validation: object.validation_message.present? ? { message: object.validation_message } : {},
     }) %>
     <% end %>
     <% if object.selection_type == "quickpick" %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -310,34 +310,4 @@ describe('DatePicker Kit', () => {
     expect(label).toBeInTheDocument()
     expect(kit).not.toHaveTextContent("*")
   })
-
-  test('Last month quickpick includes the correct last day of previous month', async () => {
-  const testId = 'datepicker-last-month'
-  render(
-    <DatePicker
-        allowInput
-        data={{ testid: testId }}
-        mode="range"
-        pickerId="date-picker-last-month"
-        placeholder="mm/dd/yyyy to mm/dd/yyyy"
-        selectionType="quickpick"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const input = within(kit).getByPlaceholderText('mm/dd/yyyy to mm/dd/yyyy')
-
-  fireEvent(input, new MouseEvent('click', { bubbles: true, cancelable: true }))
-
-  const lastMonth = within(kit).getByText('Last month')
-  fireEvent(lastMonth, new MouseEvent('click', { bubbles: true, cancelable: true }))
-
-    await waitFor(() => {
-      expect(input).toHaveValue(
-        DateTime.getPreviousMonthStartDate(new Date()).formatDate() +
-        " to " +
-        DateTime.getPreviousMonthEndDate(new Date()).formatDate()
-      )
-    })
-  })
 })

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

@@ -66,4 +66,3 @@ examples:
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
   - date_picker_required_indicator: Required Indicator
-  - date_picker_dialog_submission: Dialog Form Submission

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

@@ -29,4 +29,3 @@ export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_
 export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
 export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
 export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";
-export { default as DatePickerDialogSubmission } from "./_date_picker_dialog_submission.jsx";

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,8 +1,7 @@
 import React, { useState } from "react"
-import { render, screen, fireEvent, waitFor } from "../utilities/test-utils"
+import { render, screen, fireEvent } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
-import DateTime from "../pb_kit/dateTime.ts"
 
 
 const testId = 'dropdown'
@@ -779,52 +778,3 @@ test("requiredIndicator prop renders asterisk when true", () => {
   expect(label).toBeInTheDocument();
   expect(kit).toHaveTextContent("*");
 });
-
-describe("quickpick Last Month range when current month is shorter than the previous month", () => {
-  const quickpickTestId = "dropdown-quickpick-last-month-march"
-
-  const formatDate = (date) => {
-    const month = (date.getMonth() + 1).toString().padStart(2, "0")
-    const day = date.getDate().toString().padStart(2, "0")
-    const year = date.getFullYear()
-    return `${month}/${day}/${year}`
-  }
-
-  beforeEach(() => {
-    jest.setSystemTime(new Date(2026, 3, 15, 12, 0, 0))
-  })
-
-  afterEach(() => {
-    jest.setSystemTime()
-  })
-
-  test("selecting Last Month matches DateTime previous-month range (full March when today is in April)", async () => {
-    const onSelect = jest.fn()
-    const now = new Date()
-
-    render(
-      <Dropdown
-          data={{ testid: quickpickTestId }}
-          onSelect={onSelect}
-          variant="quickpick"
-      />
-    )
-
-    const kit = screen.getByTestId(quickpickTestId)
-    const lastMonthOption = Array.from(kit.querySelectorAll(".pb_dropdown_option_list")).find(
-      (el) => el.textContent === "Last Month"
-    )
-
-    expect(lastMonthOption).toBeTruthy()
-    fireEvent.click(lastMonthOption)
-
-    await waitFor(() => {
-      expect(onSelect).toHaveBeenCalled()
-    })
-
-    const [startDate, endDate] = onSelect.mock.calls[0][0].value
-
-    expect(formatDate(startDate)).toBe(formatDate(DateTime.getPreviousMonthStartDate(now)))
-    expect(formatDate(endDate)).toBe(formatDate(DateTime.getPreviousMonthEndDate(now)))
-  })
-})

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -97,8 +97,8 @@
 }] %>
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true } %>
-  <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true } %>
+  <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
+  <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
   <%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
   <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
@@ -110,14 +110,14 @@
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox_validation, props: { text: "Example Checkbox Validation", label: true, required: true }, checked_value: "1", unchecked_value: "0" %>
-  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, allow_input: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
-  <%= form.time_picker :example_time_picker_validation, props: { label: true, required: true } %>
+  <%= form.time_picker :example_time_picker_validation, props: { label: true, required: true, validation_message: "Please select a time." } %>
  
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -3,6 +3,5 @@ examples:
   rails:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
-  - form_form_with_validation_msg: Validation + Custom Validation Message
   - form_form_with_loading: Default + Loading
   - form_with_required_indicator: With Optional Required Indicator

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -121,6 +121,4 @@ class PbFormValidation extends PbEnhancedElement {
   }
 }
 
-window.PbFormValidation = PbFormValidation
-
-export default PbFormValidation
+window.PbFormValidation = PbFormValidation

data/app/pb_kits/playbook/pb_kit/dateTime.ts

@@ -281,8 +281,17 @@ export const getPreviousMonthStartDate = (newDate: Date | string): Date => {
 }
 
 export const getPreviousMonthEndDate = (newDate: Date | string): Date => {
-  const date = formatDate(newDate)
-  return new Date(date.getFullYear(), date.getMonth(), 0, 23, 59, 59)
+  const lastDayOfMonth = getMonthEndDate(newDate)
+  const lastDayOfPreviousMonth = new Date(
+    lastDayOfMonth.getFullYear(),
+    lastDayOfMonth.getMonth() - 1,
+    lastDayOfMonth.getDate(),
+    lastDayOfMonth.getHours(),
+    lastDayOfMonth.getMinutes(),
+    lastDayOfMonth.getSeconds()
+  )
+
+  return lastDayOfPreviousMonth
 }
 
 // Quarters
@@ -316,8 +325,17 @@ export const getPreviousQuarterStartDate = (newDate: Date | string): Date => {
 }
 
 export const getPreviousQuarterEndDate = (newDate: Date | string): Date => {
-  const startOfQuarter = getQuarterStartDate(newDate)
-  return new Date(startOfQuarter.getFullYear(), startOfQuarter.getMonth(), 0, 23, 59, 59)
+  const endOfQuarter = getQuarterEndDate(newDate)
+  const lastDayOfPreviousQuarter = new Date(
+    endOfQuarter.getFullYear(),
+    endOfQuarter.getMonth() - 3,
+    endOfQuarter.getDate(),
+    endOfQuarter.getHours(),
+    endOfQuarter.getMinutes(),
+    endOfQuarter.getSeconds()
+  )
+
+  return lastDayOfPreviousQuarter
 }
 
 // Years

data/app/pb_kits/playbook/pb_select/select.rb

@@ -43,16 +43,9 @@ module Playbook
           multiple: multiple,
           onchange: onchange,
           include_blank: include_blank,
-          data: validation_data,
         }.merge(attributes).merge(input_options)
       end
 
-      def validation_data
-        fields = input_options[:data] || {}
-        fields[:message] = validation_message unless validation_message.blank?
-        fields
-      end
-
       # Same resolved id as the native +<select>+ (+all_attributes[:id]+) for label +for+.
       def select_input_id
         all_attributes[:id].presence

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -516,18 +516,18 @@ const resolvedLoadOptions =
       }
 
       // Reset form submitted state when a selection is made (this is all for react rendered rails kit)
-      if (action === "select-option" || action === "create-option") {
+      if (action === "select-option") {
         setFormSubmitted(false)
         // Mark that user has made a selection to disable default value focus behavior
         setHasUserSelected(true)
       }
 
-      // If a value is selected/created and we're preserving input on blur, clear the input
-      if ((action === "select-option" || action === "create-option") && preserveSearchInput) {
+      // If a value is selected and we're preserving input on blur, clear the input
+      if (action === "select-option" && preserveSearchInput) {
         setInputValue("")
       }
 
-      if (action === "select-option" || action === "create-option") {
+      if (action === "select-option") {
         if (selectProps.onMultiValueClick && option)
           selectProps.onMultiValueClick(option)
         const multiValueClearEvent = new CustomEvent(

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

@@ -11,7 +11,6 @@ examples:
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
-    - typeahead_createable: Createable
     - typeahead_error_state: Error State
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)

data/app/pb_kits/playbook/pb_typeahead/kit.schema.json

@@ -24,10 +24,8 @@
     "createable": {
       "type": "boolean",
       "platforms": [
-        "react",
-        "rails"
-      ],
-      "default": false
+        "react"
+      ]
     },
     "disabled": {
       "type": "boolean",

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -62,8 +62,6 @@ module Playbook
                                    default: false
       prop :required_indicator, type: Playbook::Props::Boolean,
                                 default: false
-      prop :createable, type: Playbook::Props::Boolean,
-                        default: false
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
         generate_classname("pb_typeahead_kit") + default_margin_bottom
@@ -85,7 +83,7 @@ module Playbook
       end
 
       def is_react?
-        pills || !is_multi || wrapped || input_display == "none" || createable
+        pills || !is_multi || wrapped || input_display == "none"
       end
 
       def typeahead_react_options
@@ -117,7 +115,6 @@ module Playbook
           clearOnContextChange: clear_on_context_change,
           disabled: disabled,
           preserveSearchInput: preserve_search_input,
-          createable: createable,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -0,0 +1,58 @@
+export default [
+  "minHeight",
+  "maxHeight",
+  "height",
+  "left",
+  "bottom",
+  "right",
+  "top",
+  "hover",
+  "zIndex",
+  "verticalAlign",
+  "truncate",
+  "textAlign",
+  "shadow",
+  "position",
+  "paddingRight",
+  "paddingLeft",
+  "paddingTop",
+  "paddingBottom",
+  "paddingX",
+  "paddingY",
+  "padding",
+  "break",
+  "default",
+  "overflowX",
+  "overflowY",
+  "overflow",
+  "order",
+  "numberSpacing",
+  "rowGap",
+  "columnGap",
+  "gap",
+  "maxWidth",
+  "minWidth",
+  "width",
+  "marginRight",
+  "marginLeft",
+  "marginTop",
+  "marginBottom",
+  "marginX",
+  "marginY",
+  "margin",
+  "lineHeight",
+  "justifySelf",
+  "justifyContent",
+  "flexWrap",
+  "flexShrink",
+  "flexGrow",
+  "flexDirection",
+  "flex",
+  "display",
+  "dark",
+  "cursor",
+  "borderRadius",
+  "alignSelf",
+  "alignItems",
+  "alignContent"
+];

data/dist/chunks/{_pb_line_graph-D7f-RfJJ.js → _pb_line_graph-EzcacMw_.js}

@@ -1 +1 @@
-import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-BwwZkfTI.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-Ch18RlJa.js";import highchartsMore from"highcharts/highcharts-more";import solidGauge from"highcharts/modules/solid-gauge";const barGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"column"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},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},legend:{enabled:false,itemStyle:{color:colors.text_lt_light,fill:colors.text_lt_light,fontSize:typography.text_smaller}},xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbBarGraph=props=>{const{aria:aria={},data:data={},id:id,htmlOptions:htmlOptions={},options:options,className:className}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_bar_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbBarGraph />",options);return{}}return Highcharts.merge({},barGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbCircleChartTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},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,connectorShape:"straight",connectorWidth:3,format:"<div>{point.name}</div>",style:{fontFamily:typography.font_family_base,fontSize:typography.text_smaller,color:colors.text_lt_light,fontWeight:typography.regular,textOutline:"2px $white"}},innerSize:"50%",borderColor:"",borderWidth:null,colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7]}},legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},credits:{enabled:false}};const PbCircleChart=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_circle_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbCircleChart />",options);return{}}return Highcharts.merge({},pbCircleChartTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbGaugeGraphTheme={title:{text:"",style:{fontFamily:typography.font_family_base,fontSize:typography.text_larger}},chart:{type:"solidgauge",events:{render(){this.container;const arc=this.container.querySelector("path.gauge-pane");if(arc)arc.setAttribute("stroke-linejoin","round")}}},pane:{size:"90%",startAngle:-100,endAngle:100,background:[{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane",borderColor:colors.border_light,borderRadius:"50%"}]},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}},yAxis:{min:0,max:100,lineWidth:0,tickPositions:[]},plotOptions:{solidgauge:{borderColor:colors.data_1,borderWidth:20,color:colors.data_1,radius:90,innerRadius:"90%",y:-26,dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:'<span class="fix">{y:,f}</span>',style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}},credits:{enabled:false}};const PbGaugeChart=props=>{const{aria:aria={},className:className,data:data={},htmlOptions:htmlOptions={},id:id,ref:ref,options:options={}}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_gauge_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbGaugeGraphTheme,options)}),[options]);highchartsMore(Highcharts);solidGauge(Highcharts);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,ref:ref,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbLineGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"line"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},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:{line:{dataLabels:{enabled:false}}},credits:{enabled:false},legend:{enabled:false,itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,tickPixelInterval:50,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbLineGraph=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_line_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbLineGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};export{PbBarGraph as P,PbCircleChart as a,PbGaugeChart as b,PbLineGraph as c};
+import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-6Hsm3bJX.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-o4u12zAw.js";import highchartsMore from"highcharts/highcharts-more";import solidGauge from"highcharts/modules/solid-gauge";const barGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"column"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},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},legend:{enabled:false,itemStyle:{color:colors.text_lt_light,fill:colors.text_lt_light,fontSize:typography.text_smaller}},xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbBarGraph=props=>{const{aria:aria={},data:data={},id:id,htmlOptions:htmlOptions={},options:options,className:className}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_bar_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbBarGraph />",options);return{}}return Highcharts.merge({},barGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbCircleChartTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},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,connectorShape:"straight",connectorWidth:3,format:"<div>{point.name}</div>",style:{fontFamily:typography.font_family_base,fontSize:typography.text_smaller,color:colors.text_lt_light,fontWeight:typography.regular,textOutline:"2px $white"}},innerSize:"50%",borderColor:"",borderWidth:null,colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7]}},legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},credits:{enabled:false}};const PbCircleChart=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_circle_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbCircleChart />",options);return{}}return Highcharts.merge({},pbCircleChartTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbGaugeGraphTheme={title:{text:"",style:{fontFamily:typography.font_family_base,fontSize:typography.text_larger}},chart:{type:"solidgauge",events:{render(){this.container;const arc=this.container.querySelector("path.gauge-pane");if(arc)arc.setAttribute("stroke-linejoin","round")}}},pane:{size:"90%",startAngle:-100,endAngle:100,background:[{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane",borderColor:colors.border_light,borderRadius:"50%"}]},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}},yAxis:{min:0,max:100,lineWidth:0,tickPositions:[]},plotOptions:{solidgauge:{borderColor:colors.data_1,borderWidth:20,color:colors.data_1,radius:90,innerRadius:"90%",y:-26,dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:'<span class="fix">{y:,f}</span>',style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}},credits:{enabled:false}};const PbGaugeChart=props=>{const{aria:aria={},className:className,data:data={},htmlOptions:htmlOptions={},id:id,ref:ref,options:options={}}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_gauge_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbGaugeGraphTheme,options)}),[options]);highchartsMore(Highcharts);solidGauge(Highcharts);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,ref:ref,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbLineGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"line"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},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:{line:{dataLabels:{enabled:false}}},credits:{enabled:false},legend:{enabled:false,itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,tickPixelInterval:50,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbLineGraph=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_line_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbLineGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};export{PbBarGraph as P,PbCircleChart as a,PbGaugeChart as b,PbLineGraph as c};