playbook_ui 14.25.0.pre.alpha.play1986inlineloadingsolidvariant9963 → 14.25.0.pre.alpha.testingcss9700

data/app/pb_kits/playbook/pb_date/date.test.js

@@ -1,506 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-import PbDate from './_date'
-import DateTime from '../pb_kit/dateTime'
-
-// Mock DateTime utility functions
-jest.mock('../pb_kit/dateTime', () => ({
-  toWeekday: jest.fn(),
-  toMonth: jest.fn(),
-  toDay: jest.fn(),
-  toYear: jest.fn(),
-}))
-
-// Set test date
-const TEST_DATE = new Date('2025-08-19T10:30:00Z') // Monday, August 19, 2025
-const CURRENT_YEAR = new Date().getFullYear()
-
-describe('PbDate Kit', () => {
-  beforeEach(() => {
-    // Reset mocks before each test
-    jest.clearAllMocks()
-
-    // Set up default mock returns
-    DateTime.toWeekday.mockReturnValue('Monday')
-    DateTime.toMonth.mockReturnValue('August')
-    DateTime.toDay.mockReturnValue('19')
-    DateTime.toYear.mockReturnValue(2025)
-
-    // Mock console.error to avoid noise in tests
-    jest.spyOn(console, 'error').mockImplementation(() => {})
-  })
-
-  afterEach(() => {
-    console.error.mockRestore()
-  })
-
-  // Default Props
-  describe('Default Props', () => {
-    test('renders with minimal required props', () => {
-      const testId = 'pb-date-default'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toBeInTheDocument()
-      expect(kit).toHaveClass('pb_date_kit_left')
-    })
-
-    test('displays date in default format without day of week', () => {
-      // Mock current year to test hiding logic
-      DateTime.toYear.mockReturnValue(CURRENT_YEAR)
-
-      const testId = 'pb-date-format'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveTextContent('August 19')
-      expect(kit).not.toHaveTextContent('Monday')
-      expect(kit).not.toHaveTextContent(`, ${CURRENT_YEAR}`)
-    })
-
-    test('applies default CSS classes', () => {
-      const testId = 'pb-date-css'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass('pb_date_kit_left')
-    })
-  })
-
-  // Prop Variations
-  describe('Prop Variations', () => {
-    test('renders with showDayOfWeek enabled', () => {
-      const testId = 'pb-date-weekday'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            showDayOfWeek
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveTextContent('Monday')
-      expect(kit).toHaveTextContent('•')
-      expect(kit).toHaveTextContent('August 19')
-    })
-
-    test('renders with showCurrentYear enabled', () => {
-      const testId = 'pb-date-current-year'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            showCurrentYear
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveTextContent(', 2025')
-    })
-
-    test('renders with showIcon enabled for medium size', () => {
-      const testId = 'pb-date-icon-md'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            showIcon
-            size="md"
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      const iconContainer = kit.querySelector('.pb_icon_kit_container')
-      expect(iconContainer).toBeInTheDocument()
-    })
-
-    test('renders with showIcon enabled for small size', () => {
-      const testId = 'pb-date-icon-sm'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            showIcon
-            size="sm"
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      const iconContainer = kit.querySelector('.pb_icon_kit_container')
-      expect(iconContainer).toBeInTheDocument()
-    })
-
-    test('renders different sizes correctly', () => {
-      const sizes = ['sm', 'md', 'lg']
-
-      sizes.forEach(size => {
-        const testId = `pb-date-size-${size}`
-        render(
-          <PbDate
-              data={{ testid: testId }}
-              size={size}
-              value={TEST_DATE}
-          />
-        )
-
-        const kit = screen.getByTestId(testId)
-        expect(kit).toBeInTheDocument()
-
-        expect(kit).toHaveTextContent('August 19')
-      })
-    })
-
-    test('renders different alignments correctly', () => {
-      const alignments = ['left', 'center', 'right']
-
-      alignments.forEach(alignment => {
-        const testId = `pb-date-align-${alignment}`
-        render(
-          <PbDate
-              alignment={alignment}
-              data={{ testid: testId }}
-              value={TEST_DATE}
-          />
-        )
-
-        const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass(`pb_date_kit_${alignment}`)
-      })
-    })
-
-    test('renders in dark mode', () => {
-      const testId = 'pb-date-dark'
-      render(
-        <PbDate
-            dark
-            data={{ testid: testId }}
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toBeInTheDocument()
-    })
-
-    test('renders in unstyled mode', () => {
-      const testId = 'pb-date-unstyled'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            showDayOfWeek
-            showIcon
-            unstyled
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveTextContent('Monday')
-      expect(kit).toHaveTextContent('•')
-      expect(kit).toHaveTextContent('August 19')
-
-      expect(kit.querySelector('.pb_title_kit')).not.toBeInTheDocument()
-      expect(kit.querySelector('.pb_caption_kit')).not.toBeInTheDocument()
-    })
-
-    test('applies custom className', () => {
-      const testId = 'pb-date-custom-class'
-      const customClass = 'my-custom-date-class'
-
-      render(
-        <PbDate
-            className={customClass}
-            data={{ testid: testId }}
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(customClass)
-    })
-
-    test('applies custom id', () => {
-      const customId = 'my-custom-date-id'
-
-      render(
-        <PbDate
-            id={customId}
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = document.getElementById(customId)
-      expect(kit).toBeInTheDocument()
-      expect(kit).toHaveAttribute('id', customId)
-    })
-  })
-
-  // Year Display
-  describe('Year Display Logic', () => {
-    test('hides current year by default', () => {
-      DateTime.toYear.mockReturnValue(CURRENT_YEAR)
-
-      const testId = 'pb-date-current-year-hidden'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).not.toHaveTextContent(`, ${CURRENT_YEAR}`)
-    })
-
-    test('shows current year when showCurrentYear is true', () => {
-      DateTime.toYear.mockReturnValue(CURRENT_YEAR)
-
-      const testId = 'pb-date-force-current-year'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            showCurrentYear
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveTextContent(`, ${CURRENT_YEAR}`)
-    })
-
-    test('shows non-current year automatically', () => {
-      const pastYear = CURRENT_YEAR - 1
-      DateTime.toYear.mockReturnValue(pastYear)
-
-      const testId = 'pb-date-past-year'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveTextContent(`, ${pastYear}`)
-    })
-
-    test('shows future year automatically', () => {
-      const futureYear = CURRENT_YEAR + 1
-      DateTime.toYear.mockReturnValue(futureYear)
-
-      const testId = 'pb-date-future-year'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveTextContent(`, ${futureYear}`)
-    })
-  })
-
-  // Edge Cases
-  describe('Edge Cases', () => {
-    test('handles leap year date', () => {
-      const leapYearDate = new Date('2024-02-29T12:00:00Z')
-      DateTime.toMonth.mockReturnValue('February')
-      DateTime.toDay.mockReturnValue('29')
-      DateTime.toYear.mockReturnValue(2024)
-      DateTime.toWeekday.mockReturnValue('Thursday')
-
-      const testId = 'pb-date-leap-year'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            value={leapYearDate}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveTextContent('February 29')
-    })
-
-    test('handles beginning of year', () => {
-      const newYearDate = new Date('2023-01-01T00:00:00Z')
-      DateTime.toMonth.mockReturnValue('January')
-      DateTime.toDay.mockReturnValue('1')
-      DateTime.toYear.mockReturnValue(2023)
-      DateTime.toWeekday.mockReturnValue('Sunday')
-
-      const testId = 'pb-date-new-year'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            value={newYearDate}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveTextContent('January 1')
-    })
-
-    test('handles end of year', () => {
-      const endYearDate = new Date('2023-12-31T23:59:59Z')
-      DateTime.toMonth.mockReturnValue('December')
-      DateTime.toDay.mockReturnValue('31')
-      DateTime.toYear.mockReturnValue(2023)
-      DateTime.toWeekday.mockReturnValue('Sunday')
-
-      const testId = 'pb-date-end-year'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            value={endYearDate}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveTextContent('December 31')
-    })
-
-    test('handles very old date', () => {
-      const oldDate = new Date('1900-01-01T00:00:00Z')
-      DateTime.toMonth.mockReturnValue('January')
-      DateTime.toDay.mockReturnValue('1')
-      DateTime.toYear.mockReturnValue(1900)
-      DateTime.toWeekday.mockReturnValue('Monday')
-
-      const testId = 'pb-date-old'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            value={oldDate}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveTextContent('January 1')
-      expect(kit).toHaveTextContent(', 1900')
-    })
-
-    test('handles far future date', () => {
-      const futureDate = new Date('2099-12-31T23:59:59Z')
-      DateTime.toMonth.mockReturnValue('December')
-      DateTime.toDay.mockReturnValue('31')
-      DateTime.toYear.mockReturnValue(2099)
-      DateTime.toWeekday.mockReturnValue('Friday')
-
-      const testId = 'pb-date-future'
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            value={futureDate}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveTextContent('December 31')
-      expect(kit).toHaveTextContent(', 2099')
-    })
-  })
-
-  // Accessibility and HTML
-  describe('Accessibility and HTML Attributes', () => {
-    test('applies aria attributes correctly', () => {
-      const testId = 'pb-date-aria'
-      const ariaLabel = 'Custom date label'
-
-      render(
-        <PbDate
-            aria={{ label: ariaLabel }}
-            data={{ testid: testId }}
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveAttribute('aria-label', ariaLabel)
-    })
-
-    test('applies data attributes correctly', () => {
-      const testId = 'pb-date-data'
-      const customData = 'custom-value'
-
-      render(
-        <PbDate
-            data={{ testid: testId, custom: customData }}
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveAttribute('data-custom', customData)
-    })
-
-    test('applies HTML options correctly', () => {
-      const testId = 'pb-date-html'
-      const title = 'Custom title'
-
-      render(
-        <PbDate
-            data={{ testid: testId }}
-            htmlOptions={{ title }}
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveAttribute('title', title)
-    })
-  })
-
-  // Componenet Integration
-  describe('Component Integration', () => {
-    test('calls DateTime utility functions correctly', () => {
-      render(
-        <PbDate value={TEST_DATE} />
-      )
-
-      expect(DateTime.toWeekday).toHaveBeenCalledWith(TEST_DATE)
-      expect(DateTime.toMonth).toHaveBeenCalledWith(TEST_DATE)
-      expect(DateTime.toDay).toHaveBeenCalledWith(TEST_DATE)
-      expect(DateTime.toYear).toHaveBeenCalledWith(TEST_DATE)
-    })
-
-    test('renders all components together correctly', () => {
-      const testId = 'pb-date-full-featured'
-      render(
-        <PbDate
-            alignment="center"
-            data={{ testid: testId }}
-            showDayOfWeek
-            showIcon
-            size="lg"
-            value={TEST_DATE}
-        />
-      )
-
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass('pb_date_kit_center')
-      expect(kit).toHaveTextContent('Monday')
-      expect(kit).toHaveTextContent('•')
-      expect(kit).toHaveTextContent('August 19')
-
-      const iconContainer = kit.querySelector('.pb_icon_kit_container')
-      expect(iconContainer).toBeInTheDocument()
-    })
-  })
-})

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_rails.md

@@ -1,11 +0,0 @@
-##### Prop
-
-`gap` | `row_gap` | `column_gap` | **Type**: String | Hash | **Values**: xxs | xs | sm | md | lg | xl | none
-
-Setting the gap prop sets the `row_gap` and the `column_gap` props to the same size and creates equal space within a flex container.
-
-Setting the `row_gap` prop creates space between rows in a flex container.
-
-Setting the `column_gap` prop creates space between columns in a flex container.
-
-You can also set responsive values by passing a hash with device sizes and values. 

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md

@@ -1,11 +0,0 @@
-##### Prop
-
-`gap` | `rowGap` | `columnGap` | **Type**: String | Object | **Values**: xxs | xs | sm | md | lg | xl | none
-
-Setting the gap prop sets the `rowGap` and the `columnGap` props to the same size and creates equal space within a flex container.
-
-Setting the `rowGap` prop creates space between rows in a flex container.
-
-Setting the `columnGap` prop creates space between columns in a flex container.
-
-You can also set responsive values by passing an object with device sizes and values. 

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("loading_inline", props: {text: "Dotted Spinner", variant: "dotted"}) %>
-
-<br/>
-
-<%= pb_rails("loading_inline", props: {text: "Solid Spinner", variant: "solid"}) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { LoadingInline } from 'playbook-ui'
-
-const LoadingInlineVariant = (props) => {
-  return (
-    <div>
-      <LoadingInline 
-          text=" Dotted Spinner" 
-          variant="dotted" 
-          {...props}
-      />
-
-      <br />
-  
-      <LoadingInline
-          text=" Solid Spinner"
-          variant="solid"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default LoadingInlineVariant

data/dist/chunks/_line_graph-CiVc-Cod.js

@@ -1 +0,0 @@
-import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,c as buildDataProps,d as buildHtmlProps,H as HighchartsReact,e as Highcharts,f as classnames,g as globalProps,h as HighchartsMore,S as SolidGauge,i as buildCss}from"./_typeahead-BQnvz-Ks.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-CY5ZPzic.js";const mapColors=array=>{const regex=/(data)\-[1-8]/;const newArray=array.map((item=>regex.test(item)?`${colors[`data_${item[item.length-1]}`]}`:item));return newArray};const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors2,htmlOptions:htmlOptions={},customOptions:customOptions={},axisFormat:axisFormat,id:id,pointStart:pointStart,stacking:stacking,subTitle:subTitle,type:type="column",title:title="Title",xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,legend:legend=false,toggleLegendClick:toggleLegendClick=true,height:height,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:[{labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat&&axisFormat[0]?axisFormat[0].format:""},min:yAxisMin,max:yAxisMax,opposite:false,title:{text:Array.isArray(axisTitle)?axisTitle.length>0?axisTitle[0].name:null:axisTitle},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]}],xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{stacking:stacking,pointStart:pointStart,borderWidth:stacking?0:"",events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(Array.isArray(axisTitle)&&axisTitle.length>1&&axisTitle[1].name){staticOptions.yAxis.push({labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat[1].format},min:yAxisMin,max:yAxisMax,opposite:true,title:{text:axisTitle[1].name},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]})}if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const alignBlockElement=event=>{const itemToMove=document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`);const chartContainer=document.querySelector(`#${event.target.renderTo.id}`);if(itemToMove!==null&&chartContainer!==null){itemToMove.style.height=`${event.target.chartHeight}px`;itemToMove.style.width=`${event.target.chartWidth}px`;if(chartContainer.firstChild!==null){chartContainer.firstChild.before(itemToMove)}}};const CircleChart=({align:align="center",aria:aria={},rounded:rounded=false,borderColor:borderColor=(rounded?null:""),borderWidth:borderWidth=(rounded?20:null),chartData:chartData,children:children,className:className,colors:colors2=[],customOptions:customOptions={},dark:dark=false,data:data={},dataLabelHtml:dataLabelHtml="<div>{point.name}</div>",dataLabels:dataLabels=false,height:height,htmlOptions:htmlOptions={},id:id,innerSize:innerSize="md",legend:legend=false,maxPointSize:maxPointSize=null,minPointSize:minPointSize=null,startAngle:startAngle=null,style:style="pie",title:title,tooltipHtml:tooltipHtml,useHtml:useHtml=false,zMin:zMin=null,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{headerFormat:null,pointFormat:tooltipHtml?tooltipHtml:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',useHTML:useHtml}});const innerSizes={sm:"35%",md:"50%",lg:"85%",none:"0%"};const innerSizeFormat=size=>innerSizes[size];const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={title:{text:title},chart:{height:height,type:style,events:{render:event=>alignBlockElement(event),redraw:event=>alignBlockElement(event)}},legend:{align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},plotOptions:{pie:{colors:colors2.length>0?mapColors(colors2):highchartsTheme.colors,dataLabels:{enabled:dataLabels,connectorShape:"straight",connectorWidth:3,format:dataLabelHtml},showInLegend:legend}},series:[{minPointSize:minPointSize,maxPointSize:maxPointSize,innerSize:borderWidth==20?"100%":innerSizeFormat(innerSize),data:formattedChartData,zMin:zMin,startAngle:startAngle,borderWidth:borderWidth,borderColor:borderColor}],credits:false};setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(Fragment,{children:children?jsxs("div",{id:`wrapper-circle-chart-${id}`,children:[jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options}),jsx("div",{className:"pb-circle-chart-block",children:children})]}):jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})})};const Gauge=({aria:aria={},chartData:chartData,customOptions:customOptions={},dark:dark=false,data:data={},disableAnimation:disableAnimation=false,fullCircle:fullCircle=false,height:height=null,htmlOptions:htmlOptions={},id:id,max:max=100,min:min=0,prefix:prefix="",showLabels:showLabels=false,style:style="solidgauge",suffix:suffix="",title:title="",tooltipHtml:tooltipHtml='<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',colors:colors$1=[],minorTickInterval:minorTickInterval=null,circumference:circumference=(fullCircle?[0,360]:[-100,100]),...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);SolidGauge(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{pointFormat:tooltipHtml,followPointer:true}});const css=buildCss({pb_gauge_kit:true});const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={chart:{events:{load(){setTimeout(this.reflow.bind(this),0)}},type:style,height:height},title:{text:title},yAxis:{min:min,max:max,lineWidth:0,tickWidth:0,minorTickInterval:minorTickInterval,tickAmount:2,tickPositions:[min,max],labels:{y:26,enabled:showLabels}},credits:false,series:[{data:formattedChartData}],pane:{center:["50%","50%"],size:"90%",startAngle:circumference[0],endAngle:circumference[1],background:{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane"}},colors:colors$1!==void 0&&colors$1.length>0?mapColors(colors$1):highchartsTheme.colors,plotOptions:{series:{animation:!disableAnimation},solidgauge:{borderColor:colors$1!==void 0&&colors$1.length===1?mapColors(colors$1).join():highchartsTheme.colors[0],borderWidth:20,radius:90,innerRadius:"90%",dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:`<span class="prefix${dark?" dark":""}">${prefix}</span><span class="fix${dark?" dark":""}">{y:,f}</span><span class="suffix${dark?" dark":""}">${suffix}</span>`,style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}}};setOptions(merge(staticOptions,customOptions));if(document.querySelector(".prefix")){document.querySelectorAll(".prefix").forEach((prefix2=>{prefix2.setAttribute("y","28")}));document.querySelectorAll(".fix").forEach((fix=>fix.setAttribute("y","38")))}}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(css,globalProps(props)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const LineGraph=({aria:aria={},data:data={},align:align="center",className:className="pb_bar_graph",customOptions:customOptions={},dark:dark=false,gradient:gradient=false,type:type="line",htmlOptions:htmlOptions={},id:id,legend:legend=false,toggleLegendClick:toggleLegendClick=true,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,axisTitle:axisTitle,xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,chartData:chartData,pointStart:pointStart,subTitle:subTitle,title:title,height:height,colors:colors2=[],...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:{min:yAxisMin,max:yAxisMax,title:{text:axisTitle}},xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{pointStart:pointStart,events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};export{BarGraph as B,CircleChart as C,Gauge as G,LineGraph as L};