playbook_ui 16.1.0.pre.alpha.play264213818 → 16.1.0.pre.rc.0

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -21,9 +21,6 @@ module Playbook
       prop :template
       prop :placeholder
       prop :input_options
-      prop :label
-      prop :required_indicator, type: Playbook::Props::Boolean,
-                                default: false
 
       def classname
         generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
@@ -54,8 +51,6 @@ module Playbook
           template: template,
           placeholder: placeholder,
           inputOptions: input_options,
-          label: label,
-          requiredIndicator: required_indicator,
         }
       end
     end

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen, fireEvent, waitFor, within } from '../utilities/test-utils'
+import { render, screen, fireEvent, waitFor } from '../utilities/test-utils'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 
@@ -89,14 +89,14 @@ const TestAdvancedEditor = ({ toolbarOnFocus = false, ...props }) => {
 describe('Advanced TipTap Editor works as expected', () => {
   test('renders advanced editor with toolbar', () => {
     render(<TestAdvancedEditor />)
-
+    
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass(kitClass)
-
+    
     // Check for advanced container
     const advancedContainer = kit.querySelector('.pb_rich_text_editor_advanced_container')
     expect(advancedContainer).toBeInTheDocument()
-
+    
     // Check for toolbar
     const toolbar = kit.querySelector('.toolbar')
     expect(toolbar).toBeInTheDocument()
@@ -104,7 +104,7 @@ describe('Advanced TipTap Editor works as expected', () => {
 
   test('renders advanced editor without toolbar when advancedEditorToolbar is false', () => {
     render(<TestAdvancedEditor advancedEditorToolbar={false} />)
-
+    
     const kit = screen.getByTestId(testId)
     const toolbar = kit.querySelector('.toolbar')
     expect(toolbar).not.toBeInTheDocument()
@@ -112,17 +112,17 @@ describe('Advanced TipTap Editor works as expected', () => {
 
   test('shows/hides toolbar on focus when focus is enabled', async () => {
     render(<TestAdvancedEditor focus />)
-
+    
     const kit = screen.getByTestId(testId)
-
+    
     // Initially toolbar should be hidden
     let toolbar = kit.querySelector('.toolbar')
     expect(toolbar).not.toBeInTheDocument()
-
+    
     const editorElement = kit.querySelector('.ProseMirror')
     // Focus the editor
     fireEvent.focus(editorElement)
-
+    
     // Toolbar should now be visible
     await waitFor(() => {
       toolbar = kit.querySelector('.toolbar')
@@ -133,7 +133,7 @@ describe('Advanced TipTap Editor works as expected', () => {
 
   test('supports simple prop with advanced editor', () => {
     render(<TestAdvancedEditor simple />)
-
+    
     const kit = screen.getByTestId(testId)
     const toolbar = kit.querySelector('.toolbar')
     expect(toolbar).toBeInTheDocument()
@@ -144,7 +144,7 @@ describe('Advanced TipTap Editor works as expected', () => {
 
     test('supports sticky prop with advanced editor', () => {
     render(<TestAdvancedEditor sticky />)
-
+    
     const kit = screen.getByTestId(testId)
     const stickyToolbar = kit.querySelector('.pb_rich_text_editor_tiptap_toolbar_sticky')
     expect(stickyToolbar).toBeInTheDocument()
@@ -154,52 +154,37 @@ describe('Advanced TipTap Editor works as expected', () => {
   test('applies aria-label when provided', () => {
     const ariaLabel = 'Rich Text Editor'
     render(<TestAdvancedEditor aria={{ label: ariaLabel }} />)
-
+    
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveAttribute('aria-label', ariaLabel)
   })
 
   test('supports inline prop with advanced editor', () => {
     render(<TestAdvancedEditor inline />)
-
+    
     const kit = screen.getByTestId(testId)
     const toolbar = kit.querySelector('.toolbar')
     expect(toolbar).toBeInTheDocument()
     expect(kit).toHaveClass(`${kitClass} inline`)
   })
 
-  test('renders required indicator asterisk when requiredIndicator is true', () => {
-    render(
-      <RichTextEditor
-          data={{ testid: testId }}
-          label="Label"
-          requiredIndicator
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const label = within(kit).getByText(/Label/)
-
-    expect(label).toBeInTheDocument()
-    expect(kit).toHaveTextContent('*')
-  })
-
 describe('TipTap Editor Functionality', () => {
   test('can type and update content', async () => {
     render(<TestAdvancedEditor />)
-
+    
     const kit = screen.getByTestId(testId)
     const editorContent = kit.querySelector('.ProseMirror')
-
+    
     // Focus and type in the editor
     fireEvent.focus(editorContent)
-    fireEvent.input(editorContent, {
+    fireEvent.input(editorContent, { 
       target: { textContent: 'New content' }
     })
-
+    
     await waitFor(() => {
       expect(editorContent).toHaveTextContent('New content')
     })
   })
 })
 })
+

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -13,7 +13,6 @@ import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
 import Flex from '../pb_flex/_flex'
 import FlexItem from '../pb_flex/_flex_item'
-import colors from '../tokens/exports/_colors.module.scss'
 
 import { stripEmojisForPaste, applyEmojiMask } from '../utilities/emojiMask'
 
@@ -37,7 +36,6 @@ type TextareaProps = {
   value?: string,
   name?: string,
   required?: boolean,
-  requiredIndicator?: boolean,
   rows?: number,
   resize: "none" | "both" | "horizontal" | "vertical" | "auto",
   onChange?: InputCallback<HTMLTextAreaElement>,
@@ -52,7 +50,6 @@ const Textarea = ({
   disabled,
   emojiMask = false,
   htmlOptions = {},
-  id,
   inline = false,
   resize = 'none',
   error,
@@ -63,7 +60,6 @@ const Textarea = ({
   onChange = () => {},
   placeholder,
   required,
-  requiredIndicator = false,
   rows = 4,
   value,
   ...props
@@ -88,7 +84,7 @@ const Textarea = ({
     if (emojiMask) {
       const pastedText = e.clipboardData.getData('text')
       const filteredText = stripEmojisForPaste(pastedText)
-
+      
       if (pastedText !== filteredText) {
         e.preventDefault()
         const textarea = e.currentTarget
@@ -97,10 +93,10 @@ const Textarea = ({
         const currentValue = textarea.value
         const newValue = currentValue.slice(0, start) + filteredText + currentValue.slice(end)
         const newCursorPosition = start + filteredText.length
-
+        
         textarea.value = newValue
         textarea.selectionStart = textarea.selectionEnd = newCursorPosition
-
+        
         onChange({ ...e, target: textarea, currentTarget: textarea } as unknown as ChangeEvent<HTMLTextAreaElement>)
       }
     }
@@ -128,21 +124,7 @@ const Textarea = ({
         {...htmlProps}
         className={classes}
     >
-    {label && (
-      <label htmlFor={id}>
-      {
-        requiredIndicator ? (
-          <Caption className="pb_text_input_kit_label">
-            {label} <span style={{ color: `${colors.error}` }}>*</span>
-          </Caption>
-        ) : (
-          <Caption  className="pb_text_input_kit_label"
-              text={label}
-          />
-        )
-      }
-      </label>
-    )}
+      <Caption text={label} />
       {children || (
         <textarea
             disabled={disabled}
@@ -161,19 +143,19 @@ const Textarea = ({
       {error ? (
         <>
           {characterCount ? (
-            <Flex
-                spacing="between"
+            <Flex 
+                spacing="between" 
                 vertical="center"
             >
               <FlexItem>
-                <Body
+                <Body 
                     margin="none"
                     status="negative"
-                    text={error}
+                    text={error} 
                 />
               </FlexItem>
               <FlexItem>
-                <Caption
+                <Caption 
                     margin="none"
                     size="xs"
                     text={characterCounter()}
@@ -181,7 +163,7 @@ const Textarea = ({
               </FlexItem>
             </Flex>
           ) : (
-            <Body
+            <Body 
                 status="negative"
                 text={error}
             />
@@ -189,7 +171,7 @@ const Textarea = ({
         </>
       ) : (
          noCount && (
-          <Caption
+          <Caption 
               margin="none"
               size="xs"
               text={characterCounter()}

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

@@ -8,8 +8,6 @@ examples:
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
   - textarea_emoji_mask: Emoji Mask
-  - textarea_required_indicator: Required Indicator
-  - textarea_input_options: Input Options
 
   react:
   - textarea_default: Default
@@ -19,9 +17,8 @@ examples:
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
   - textarea_emoji_mask: Emoji Mask
-  - textarea_required_indicator: Required Indicator
 
   swift:
   - textarea_default_swift: Default
   - textarea_error_swift: Textarea w/ Error
-  - textarea_props_swift: ""
+  - textarea_props_swift: ""

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

@@ -5,4 +5,3 @@ export { default as TextareaError } from './_textarea_error.jsx'
 export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
 export { default as TextareaInline } from './_textarea_inline.jsx'
 export { default as TextareaEmojiMask } from './_textarea_emoji_mask.jsx'
-export { default as TextareaRequiredIndicator } from './_textarea_required_indicator.jsx'

data/app/pb_kits/playbook/pb_textarea/index.ts

@@ -11,21 +11,18 @@ export default class PbTextarea extends PbEnhancedElement {
   }
 
   hasEmojiMask(): boolean {
-    if (!this.element) return false
     return (this.element as HTMLElement).dataset.pbEmojiMask === "true"
   }
 
-  onInput = (): void => {
-    if (!this.element) return
-    
+  onInput(): void {
     if ((this.element as HTMLElement).closest('.resize_auto')) {
-      (this.element as HTMLTextAreaElement).style.height = 'auto';
-      (this.element as HTMLTextAreaElement).style.height = (this.element as HTMLTextAreaElement).scrollHeight + 'px'
+      this.style.height = 'auto'
+      this.style.height = (this.scrollHeight) + 'px'
     }
   }
 
   handleEmojiInput = (): void => {
-    if (!this.element || !this.hasEmojiMask()) return
+    if (!this.hasEmojiMask()) return
     
     if (this.skipNextEmojiFilter) {
       this.skipNextEmojiFilter = false
@@ -36,7 +33,7 @@ export default class PbTextarea extends PbEnhancedElement {
   }
 
   handleEmojiPaste = (event: ClipboardEvent): void => {
-    if (!this.element || !this.hasEmojiMask()) return
+    if (!this.hasEmojiMask()) return
 
     const pastedText = event.clipboardData?.getData('text') || ''
     const filteredText = stripEmojisForPaste(pastedText)
@@ -60,8 +57,6 @@ export default class PbTextarea extends PbEnhancedElement {
   }
 
   connect(): void {
-    if (!this.element) return
-    
     if ((this.element as HTMLElement).closest('.resize_auto')) {
       this.element.setAttribute('style', 'height:' + (this.element as HTMLTextAreaElement).scrollHeight + 'px;overflow-y:hidden;')
       this.element.addEventListener('input', this.onInput, false)
@@ -74,8 +69,6 @@ export default class PbTextarea extends PbEnhancedElement {
   }
 
   disconnect(): void {
-    if (!this.element) return
-    
     this.element.removeEventListener('input', this.onInput, false)
     this.element.removeEventListener('input', this.handleEmojiInput, false)
     this.element.removeEventListener('paste', this.handleEmojiPaste as EventListener, false)

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -1,12 +1,6 @@
 <%= pb_content_tag do %>
   <% if object.label.present? %>
-    <% if object.required_indicator %>
-      <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) do %>
-        <%= object.label %><span style="color: #DA0014;"> *</span>
-      <% end %>
-    <% else %>
     <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
-    <% end %>
   <% end %>
   <% if content.present? %>
     <%= content %>
@@ -14,10 +8,16 @@
       <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
     <% end %>
   <% else %>
-    <%= text_area_tag(
-        object.name,
-        object.value,
-        object.all_textarea_attributes) %>
+    <%= text_area(
+        :object,
+        :method,
+        :data => object.textarea_options[:data],
+        :max_characters => object.max_characters,
+        :name => object.name,
+        :onkeyup => object.onkeyup,
+        :placeholder => object.placeholder,
+        :rows => object.rows,
+        :value => object.value) %>
     <% if object.error %>
       <% if object.character_count %>
         <%= pb_rails("flex", props: { spacing: "between", vertical: "center" }) do %>

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -8,8 +8,6 @@ module Playbook
       prop :error
       prop :inline, type: Playbook::Props::Boolean,
                     default: false
-      prop :input_options, type: Playbook::Props::HashProp,
-                           default: {}
       prop :label
       prop :method
       prop :name
@@ -23,8 +21,6 @@ module Playbook
       prop :character_count
       prop :onkeyup
       prop :max_characters
-      prop :required_indicator, type: Playbook::Props::Boolean,
-                                default: false
 
       def classname
         generate_classname("pb_textarea_kit") + error_class + resize_class + inline_class
@@ -40,32 +36,6 @@ module Playbook
         }
       end
 
-      def all_textarea_attributes
-        # Merge data attributes: emoji_mask data + input_options data
-        data_attrs = textarea_options[:data] || {}
-        input_data = input_options[:data] || {}
-        merged_data = data_attrs.merge(input_data)
-
-        base_attributes = {
-          id: input_options[:id] || "object_method",
-          max_characters: max_characters,
-          name: name,
-          onkeyup: onkeyup,
-          placeholder: placeholder,
-          rows: rows,
-          value: value,
-        }
-
-        # Merge input_options (excluding data to handle separately)
-        input_options_without_data = input_options.except(:data)
-        result = base_attributes.merge(input_options_without_data)
-
-        # Add merged data if present (input_options data takes precedence over emoji_mask data)
-        result[:data] = merged_data unless merged_data.empty?
-
-        result
-      end
-
     private
 
       def error_class

data/app/pb_kits/playbook/pb_textarea/textarea.test.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, screen, fireEvent, within } from "../utilities/test-utils"
+import { render, screen, fireEvent } from "../utilities/test-utils"
 
 import Textarea from "./_textarea"
 
@@ -265,21 +265,4 @@ describe("Textarea Emoji Mask", () => {
     fireEvent.change(textarea, { target: { value: 'àëǒüñ' } })
     expect(textarea.value).toBe('àëǒüñ')
   })
-
-  test('renders required indicator asterisk when requiredIndicator is true', () => {
-    render(
-      <Textarea
-          data={{ testid: testId }}
-          label="Name"
-          required
-          requiredIndicator
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const label = within(kit).getByText(/Name/)
-
-    expect(label).toBeInTheDocument()
-    expect(kit).toHaveTextContent('*')
-  })
 })

data/dist/chunks/{_pb_line_graph-BgKF_zz1.js → _pb_line_graph-hxi01lk7.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-BhVYCqRf.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-DD34ZrWL.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-DgYwLYNx.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-NLxTo8OB.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};