playbook_ui 16.2.0.pre.alpha.advancedtablecascadingcollapsereact14676 → 16.2.0.pre.alpha.faiconbuttonfix14520

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

@@ -149,7 +149,7 @@ describe("TextArea Kit Props", () => {
     )
 
     const kit = screen.getByTestId(testId)
-    const error = kit.querySelector(".pb_caption_kit_md_lighter")
+    const error = kit.querySelector(".pb_caption_kit_md")
 
     expect(error.innerHTML).toBe("Test Label")
   })
@@ -283,136 +283,3 @@ describe("Textarea Emoji Mask", () => {
     expect(kit).toHaveTextContent('*')
   })
 })
-
-describe("Textarea Input Options", () => {
-  test("should apply inputOptions.id to textarea element", () => {
-    render(<Textarea data={{ testid: testId }}
-        inputOptions={{ id: "custom-textarea-id" }}
-           />)
-
-    const kit = screen.getByTestId(testId)
-    const textarea = kit.querySelector("textarea")
-
-    expect(textarea).toHaveAttribute("id", "custom-textarea-id")
-  })
-
-  test("should apply id prop to container and inputOptions.id to textarea", () => {
-    render(
-      <Textarea data={{ testid: testId }}
-          id="wrapper-id"
-          inputOptions={{ id: "textarea-id" }}
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const textarea = kit.querySelector("textarea")
-
-    expect(kit).toHaveAttribute("id", "wrapper-id")
-    expect(textarea).toHaveAttribute("id", "textarea-id")
-  })
-
-  test("should apply id prop to container and derived id to textarea when only id passed", () => {
-    render(
-      <Textarea data={{ testid: testId }}
-          id="wrapper-id"
-          label="Label"
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const textarea = kit.querySelector("textarea")
-    const label = kit.querySelector("label")
-
-    expect(kit).toHaveAttribute("id", "wrapper-id")
-    expect(textarea).toHaveAttribute("id", "wrapper-id-input")
-    expect(label).toHaveAttribute("for", "wrapper-id-input")
-  })
-
-  test("should apply inputOptions.data as data-* attributes", () => {
-    render(
-      <Textarea
-          data={{ testid: testId }}
-          inputOptions={{
-          data: { controller: "textarea", action: "focus->handleFocus" }
-        }}
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const textarea = kit.querySelector("textarea")
-
-    expect(textarea).toHaveAttribute("data-controller", "textarea")
-    expect(textarea).toHaveAttribute("data-action", "focus->handleFocus")
-  })
-
-  test("should apply multiple inputOptions attributes to textarea", () => {
-    render(
-      <Textarea
-          data={{ testid: testId }}
-          inputOptions={{
-          id: "textarea-id",
-          className: "custom-class",
-          data: { controller: "textarea" }
-        }}
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const textarea = kit.querySelector("textarea")
-
-    expect(textarea).toHaveAttribute("id", "textarea-id")
-    expect(textarea).toHaveAttribute("class", "custom-class")
-    expect(textarea).toHaveAttribute("data-controller", "textarea")
-  })
-
-  test("should merge aria-describedby from error and inputOptions", () => {
-    render(
-      <Textarea
-          data={{ testid: testId }}
-          error="This is an error"
-          inputOptions={{
-            id: "describedby-textarea",
-            "aria-describedby": "custom-help-text"
-          }}
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const textarea = kit.querySelector("textarea")
-
-    // Should contain both the error ID and custom ID
-    expect(textarea).toHaveAttribute("aria-describedby", expect.stringContaining("-error"))
-    expect(textarea).toHaveAttribute(
-      "aria-describedby",
-      expect.stringContaining("custom-help-text")
-    )
-  })
-
-  test("should allow inputOptions aria-invalid to override error state", () => {
-    render(
-      <Textarea
-          data={{ testid: testId }}
-          error="This is an error"
-          inputOptions={{
-          "aria-invalid": false
-        }}
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const textarea = kit.querySelector("textarea")
-
-    expect(textarea).toHaveAttribute("aria-invalid", "false")
-  })
-
-  test("should default aria-invalid to error state when not provided in inputOptions", () => {
-    render(<Textarea data={{ testid: testId }}
-        error="This is an error"
-           />)
-
-    const kit = screen.getByTestId(testId)
-    const textarea = kit.querySelector("textarea")
-
-    expect(textarea).toHaveAttribute("aria-invalid", "true")
-  })
-})

data/app/pb_kits/playbook/pb_time_picker/_time_picker.tsx

@@ -707,7 +707,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
           {requiredIndicator ? (
             <Caption
                 className="pb_time_picker_kit_label"
-                color="lighter"
                 dark={dark}
                 marginBottom="xs"
                 size="md"
@@ -717,7 +716,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
           ) : (
             <Caption
                 className="pb_time_picker_kit_label"
-                color="lighter"
                 dark={dark}
                 marginBottom="xs"
                 size="md"
@@ -768,7 +766,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
                 <label htmlFor={`${uniqueId}-hour`}>
                   <Caption
                       className="time_input_label"
-                      color="lighter"
                       dark={dark}
                       size="sm"
                       text="Hour"
@@ -816,7 +813,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
                 <label htmlFor={`${uniqueId}-minute`}>
                   <Caption
                       className="time_input_label"
-                      color="lighter"
                       dark={dark}
                       size="sm"
                       text="Minute"
@@ -863,7 +859,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
                 <div className="meridiem">
                   <Caption
                       className="time_input_label"
-                      color="lighter"
                       dark={dark}
                       size="sm"
                       text="Period"
@@ -910,7 +905,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
               )}
               {showTimezone && (
                 <Caption
-                    color="lighter"
                     dark={dark}
                     lineHeight="tight"
                     marginTop="sm"

data/app/pb_kits/playbook/pb_time_picker/time_picker.test.jsx

@@ -71,14 +71,14 @@ describe('TimePicker', () => {
     render(<TimePicker data={{ testid: 'clickable-picker' }} />)
     const input = screen.getByPlaceholderText('Select Time')
     fireEvent.click(input)
-    expect(screen.getByText('Hour', { selector: '.pb_caption_kit_sm_lighter' })).toBeInTheDocument()
+    expect(screen.getByText('Hour', { selector: '.pb_caption_kit_sm' })).toBeInTheDocument()
   })
 
   test('does not open dropdown on input click when disabled', () => {
     render(<TimePicker disabled />)
     const input = screen.getByPlaceholderText('Select Time')
     fireEvent.click(input)
-    expect(screen.queryByText('Hour', { selector: '.pb_caption_kit_sm_lighter' })).not.toBeInTheDocument()
+    expect(screen.queryByText('Hour', { selector: '.pb_caption_kit_sm' })).not.toBeInTheDocument()
   })
 
   test('renders with required attribute', () => {

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -11,14 +11,11 @@ export default class PbTooltip extends PbEnhancedElement {
   }
 
   connect() {
-    this.triggerHandlers = new Map()
-    
     if (this.tooltipInteraction) {
-      this.mouseMoveHandler = (e) => {
+      document.addEventListener('mousemove', (e) => {
         this.lastMouseX = e.clientX
         this.lastMouseY = e.clientY
-      }
-      document.addEventListener('mousemove', this.mouseMoveHandler)
+      })
     }
     
     this.triggerElements.forEach((trigger) => {
@@ -26,7 +23,7 @@ export default class PbTooltip extends PbEnhancedElement {
       const interactionEnabled = this.tooltipInteraction
 
       if (method === 'click') {
-        const clickHandler = (e) => {
+        trigger.addEventListener('click', (e) => {
           if (this.useClickToOpen) {
             e.preventDefault()
             if (this.isTooltipVisible()) {
@@ -37,12 +34,10 @@ export default class PbTooltip extends PbEnhancedElement {
           } else {
             this.showTooltip(trigger)
           }
-        }
-        trigger.addEventListener('click', clickHandler)
-        this.triggerHandlers.set(trigger, { click: clickHandler })
+        })
       } else {
         if (!this.useClickToOpen) {
-          const mouseenterHandler = () => {
+          trigger.addEventListener('mouseenter', () => {
             clearSafeZoneListener(this)
             clearTimeout(this.mouseleaveTimeout)
             this.currentTrigger = trigger
@@ -53,9 +48,9 @@ export default class PbTooltip extends PbEnhancedElement {
                 this.checkCloseTooltip(trigger)
               }
             }, delayOpen)
-          }
+          })
 
-          const mouseleaveHandler = () => {
+          trigger.addEventListener('mouseleave', () => {
             clearTimeout(this.mouseenterTimeout)
             if (this.delayClose) {
               const delayClose = parseInt(this.delayClose)
@@ -73,62 +68,22 @@ export default class PbTooltip extends PbEnhancedElement {
                 this.hideTooltip()
               }
             }
-          }
-
-          trigger.addEventListener('mouseenter', mouseenterHandler)
-          trigger.addEventListener('mouseleave', mouseleaveHandler)
-          this.triggerHandlers.set(trigger, { mouseenter: mouseenterHandler, mouseleave: mouseleaveHandler })
+          })
 
           if (interactionEnabled) {
-            if (!this.tooltipMouseenterHandler) {
-              this.tooltipMouseenterHandler = () => {
-                clearSafeZoneListener(this)
-              }
-              this.tooltipMouseleaveHandler = () => {
-                this.attachSafeZoneListener()
-              }
-              this.tooltip.addEventListener('mouseenter', this.tooltipMouseenterHandler)
-              this.tooltip.addEventListener('mouseleave', this.tooltipMouseleaveHandler)
-            }
+            this.tooltip.addEventListener('mouseenter', () => {
+              clearSafeZoneListener(this)
+            })
+
+            this.tooltip.addEventListener('mouseleave', () => {
+              this.attachSafeZoneListener()
+            })
           }
         }
       }
     })
   }
 
-  disconnect() {
-    // Clean up timers
-    clearTimeout(this.mouseenterTimeout)
-    clearTimeout(this.mouseleaveTimeout)
-    clearTimeout(this.autoHideTimeout)
-    clearSafeZoneListener(this)
-
-    // Clean up autoUpdate
-    if (this.cleanup) {
-      this.cleanup()
-      this.cleanup = null
-    }
-
-    // Clean up document mousemove listener
-    if (this.mouseMoveHandler) {
-      document.removeEventListener('mousemove', this.mouseMoveHandler)
-    }
-
-    // Clean up trigger element listeners
-    this.triggerHandlers.forEach((handlers, trigger) => {
-      Object.entries(handlers).forEach(([event, handler]) => {
-        trigger.removeEventListener(event, handler)
-      })
-    })
-    this.triggerHandlers.clear()
-
-    // Clean up tooltip listeners
-    if (this.tooltipMouseenterHandler) {
-      this.tooltip.removeEventListener('mouseenter', this.tooltipMouseenterHandler)
-      this.tooltip.removeEventListener('mouseleave', this.tooltipMouseleaveHandler)
-    }
-  }
-
   isTooltipVisible() {
     return this.tooltip && this.tooltip.classList.contains('show')
   }

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -20,7 +20,7 @@ test('typeahead classname + label renders as expected', () => {
   )
 
   const kit = screen.getByTestId('typeahead-test')
-  const label = kit.querySelector(".pb_caption_kit_md_lighter.pb_text_input_kit_label")
+  const label = kit.querySelector(".pb_caption_kit_md.pb_text_input_kit_label")
   expect(kit).toHaveClass("pb_typeahead_kit")
   expect(label).toHaveTextContent("Colors")
 })

data/dist/chunks/{_pb_line_graph-BGY7jEks.js → _pb_line_graph-BSLb5VXP.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-CK2YuA9O.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-DspaUdlc.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-DyTB8IdV.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-9wz3x5jl.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};