playbook_ui 15.8.0.pre.rc.0 → 16.0.0.pre.alpha.HFH3979Applydepwarningfixtoplaybook13635

data/app/pb_kits/playbook/utilities/test/globalProps/shadow.test.js

@@ -0,0 +1,33 @@
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import TextInput from '../../../pb_text_input/_text_input'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+testGlobalProp(
+  'shadow',
+  ['none', 'deep', 'deeper', 'deepest'],
+  (v) => `shadow_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+
+testGlobalPropAbsence(
+  'shadow',
+  ['shadow_none', 'shadow_deep', 'shadow_deeper', 'shadow_deepest'],
+  undefined,
+  { skipNull: true }
+)
+
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'shadow',
+  ['invalid', 'bad_value', 'not_a_shadow', 'special-chars!@#'],
+  ['shadow_invalid', 'shadow_bad_value', 'shadow_not_a_shadow', 'shadow_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/textAlign.test.js

@@ -0,0 +1,41 @@
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import { camelToSnakeCase } from '../../../utilities/text'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+// NOTE: TextInput excluded - textAlign is not a valid prop for input elements
+testGlobalProp(
+  'textAlign',
+  ['start', 'end', 'left', 'right', 'center', 'justify', 'justifyAll', 'matchParent'],
+  (v) => `text_align_${v}`,
+  (size, v) => `text_align_${size}_${camelToSnakeCase(v)}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+testGlobalPropResponsiveWithDefault(
+  'textAlign',
+  { default: 'center', xs: 'left', sm: 'center', md: 'right' },
+  (v) => `text_align_${camelToSnakeCase(v)}`,
+  (size, v) => `text_align_${size}_${camelToSnakeCase(v)}`
+)
+
+testGlobalPropAbsence(
+  'textAlign',
+  ['text_align_start', 'text_align_end', 'text_align_center', 'text_align_left', 'text_align_right'],
+  undefined,
+  { skipNull: true }
+)
+
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'textAlign',
+  ['invalid', 'bad_value', 'not_an_alignment', 'special-chars!@#'],
+  ['text_align_invalid', 'text_align_bad_value', 'text_align_not_an_alignment', 'text_align_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/top.test.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import { render, screen } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+const validSizes = ['xs', 'sm', 'md', 'lg', 'xl']
+
+// NOTE: TextInput excluded - positioning props are not valid for input elements
+// Test top prop with string values
+testGlobalProp(
+  'top',
+  validSizes,
+  (v) => `top_${v}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+// Test top prop with object values (inset) - tested separately due to object value complexity
+test('Global Props: top returns proper class name with object values (inset)', () => {
+  const testCases = [
+    { value: { value: 'md', inset: true }, expected: 'top_md_inset' },
+    { value: { value: 'lg', inset: false }, expected: 'top_lg' },
+    { value: { value: 'sm', inset: true }, expected: 'top_sm_inset' }
+  ]
+  
+  testCases.forEach(({ value, expected }) => {
+    const testId = `body-top-object-${value.value}-${value.inset}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          text="Hi"
+          top={value}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(expected)
+  })
+})
+
+testGlobalPropAbsence(
+  'top',
+  ['top_xs', 'top_sm', 'top_md', 'top_lg', 'top_xl'],
+  undefined,
+  { skipNull: true }
+)
+
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'top',
+  ['invalid', 'bad_value', 'not_a_size', 'special-chars!@#'],
+  ['top_invalid', 'top_bad_value', 'top_not_a_size', 'top_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js

@@ -1,21 +1,33 @@
-import React from 'react'
-import { render, screen } from '../../test-utils'
-
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
 import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import TextInput from '../../../pb_text_input/_text_input'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+testGlobalProp(
+  'truncate',
+  [1, 2, 3, 4, 5],
+  (v) => `truncate_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
 
-const testSubject = 'body'
+testGlobalPropAbsence(
+  'truncate',
+  ['truncate_0', 'truncate_1', 'truncate_2', 'truncate_3', 'truncate_4', 'truncate_5'],
+  undefined,
+  { excludeZero: true, skipNull: true }
+)
 
-test('Global Props: Returns corrrect truncate class name', () => {
-  for(let x = 1, y = 5; x <= y; ++x) {
-    const testId = `${testSubject}-${x}`
-    render(
-      <Body
-          data={{ testid: testId }}
-          text="Hi"
-          truncate={`${x}`}
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`truncate_${x}`)
-  }
-})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'truncate',
+  [0, 6, 999, -1, 'invalid', 'bad_value', 'special-chars!@#'],
+  ['truncate_0', 'truncate_6', 'truncate_999', 'truncate_-1', 'truncate_invalid', 'truncate_bad_value', 'truncate_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/verticalAlign.test.js

@@ -0,0 +1,40 @@
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+// NOTE: TextInput excluded - verticalAlign is not a valid prop for input elements
+testGlobalProp(
+  'verticalAlign',
+  ['baseline', 'super', 'top', 'middle', 'bottom', 'sub', 'text-top', 'text-bottom'],
+  (v) => `vertical_align_${v}`,
+  (size, v) => `vertical_align_${size}_${v}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+testGlobalPropResponsiveWithDefault(
+  'verticalAlign',
+  { default: 'middle', xs: 'top', sm: 'middle', md: 'bottom' },
+  (v) => `vertical_align_${v}`,
+  (size, v) => `vertical_align_${size}_${v}`
+)
+
+testGlobalPropAbsence(
+  'verticalAlign',
+  ['vertical_align_baseline', 'vertical_align_top', 'vertical_align_middle', 'vertical_align_bottom'],
+  undefined,
+  { skipNull: true }
+)
+
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'verticalAlign',
+  ['invalid', 'bad_value', 'not_an_alignment', 'special-chars!@#'],
+  ['vertical_align_invalid', 'vertical_align_bad_value', 'vertical_align_not_an_alignment', 'vertical_align_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/width.test.js

@@ -0,0 +1,66 @@
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+// NOTE: TextInput excluded - width properties are not valid props for input elements
+// Test width prop
+testGlobalProp(
+  'width',
+  ['100%', '50%', '25%', 'auto', '100px'],
+  (v) => `width_${v.replace('%', '_percent')}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+testGlobalPropAbsence(
+  'width',
+  ['width_100_percent', 'width_50_percent', 'width_auto', 'width_100px'],
+  undefined,
+  { skipNull: true }
+)
+
+// Test minWidth prop
+testGlobalProp(
+  'minWidth',
+  ['100%', '50%', '25%', 'auto', '100px'],
+  (v) => `min_width_${v.replace('%', '_percent')}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+testGlobalPropAbsence(
+  'minWidth',
+  ['min_width_100_percent', 'min_width_50_percent', 'min_width_auto', 'min_width_100px'],
+  undefined,
+  { skipNull: true }
+)
+
+// Test maxWidth prop
+testGlobalProp(
+  'maxWidth',
+  ['100%', '50%', '25%', 'auto', '100px'],
+  (v) => `max_width_${v.replace('%', '_percent')}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+testGlobalPropAbsence(
+  'maxWidth',
+  ['max_width_100_percent', 'max_width_50_percent', 'max_width_auto', 'max_width_100px'],
+  undefined,
+  { skipNull: true }
+)
+
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'width',
+  ['invalid', 'bad_value', 'not_a_width', 'special-chars!@#'],
+  ['width_invalid', 'width_bad_value', 'width_not_a_width', 'width_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/zIndex.test.js

@@ -0,0 +1,50 @@
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+// NOTE: TextInput excluded - zIndex is not a valid prop for input elements
+// Test numeric values (1-10)
+testGlobalProp(
+  'zIndex',
+  Array.from({ length: 10 }, (_, i) => i + 1),
+  (v) => `z_index_${v}`,
+  (size, v) => `z_index_${size}_${v}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+// Test 'max' value
+testGlobalProp(
+  'zIndex',
+  ['max'],
+  (v) => `z_index_${v}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+testGlobalPropResponsiveWithDefault(
+  'zIndex',
+  { default: 3, xs: 1, sm: 3, md: 5 },
+  (v) => `z_index_${v}`,
+  (size, v) => `z_index_${size}_${v}`
+)
+
+testGlobalPropAbsence(
+  'zIndex',
+  ['z_index_1', 'z_index_5', 'z_index_10', 'z_index_max'],
+  undefined,
+  { skipNull: true }
+)
+
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'zIndex',
+  [0, 11, 999, -1, 'invalid', 'bad_value', 'special-chars!@#'],
+  ['z_index_0', 'z_index_11', 'z_index_999', 'z_index_-1', 'z_index_invalid', 'z_index_bad_value', 'z_index_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/dist/chunks/_pb_line_graph-hxi01lk7.js

@@ -0,0 +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-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};