playbook_ui 16.8.0.pre.alpha.play299216890 → 16.8.0.pre.alpha.play301316889

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 55ce3fc93b65b84a7675452fc441dc46474669968c56a5170511fbab48f609a7
-  data.tar.gz: 3845a85642d2eca81306da516098d47e091e14c96f287b31cbaa9314371b23be
+  metadata.gz: edb2d6b1943796215222f43d5a667089909a292040708c227c91967e72f6f0bc
+  data.tar.gz: 1762487740450da1b7b322409360bdaefb03cf1c4b7f14b500817a5374453fd2
 SHA512:
-  metadata.gz: 6c35e16d11f45e25d82a5d945a755500eb142007a0d420f9b20c05f0941eb9a9629ddbc79c226e0eb996ec8a99dee17eb17a4115ebe40854a9bf15fa36367880
-  data.tar.gz: 53cef8d58713fd21817e3a37cc85f728610dc1700017a19e57e5abae1148b1d7a581fcc015023a32c5fe87b46756fb6292024deca70999605ee7be0116adc6b7
+  metadata.gz: e5e4c4a11408e787aa02ecf02ae3a815b92eb4c8010b1da263ae2a266da889d6b0364d38ee2471b58c9be08df653ee84d2999deed123f4979df84b15fe8c7c72
+  data.tar.gz: 3b23460679cd966247435ff055de878cdaceab02e5b6279bc8c8cb6bfd0071718f77bcfb82c710d4cdc7ed72a7607d272a78305d48b1b6bb079cc6f6559c735e

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -87,7 +87,6 @@ type DatePickerProps = {
   thisRangesEndToday?: boolean,
   timeFormat?: string,
   type?: string,
-  yearAscending?: boolean,
   yearRange?: number[],
   controlsStartId?: string,
     controlsEndId?: string,
@@ -141,7 +140,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     showTimezone = false,
     staticPosition = true,
     thisRangesEndToday = false,
-    yearAscending = false,
     yearRange = [1900, 2100],
     controlsStartId,
     controlsEndId,
@@ -201,7 +199,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       showTimezone,
       staticPosition,
       thisRangesEndToday,
-      yearAscending,
       yearRange,
       controlsStartId,
       controlsEndId,

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -89,8 +89,6 @@ module Playbook
                            default: ""
       prop :cursor, type: Playbook::Props::String,
                     default: "pointer"
-      prop :year_ascending, type: Playbook::Props::Boolean,
-                            default: false
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -124,7 +122,6 @@ module Playbook
           staticPosition: static_position,
           thisRangesEndToday: this_ranges_end_today,
           yearRange: year_range,
-          yearAscending: year_ascending,
           controlsStartId: controls_start_id,
           controlsEndId: controls_end_id,
           syncStartWith: sync_start_with,

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -7,7 +7,10 @@ import timeSelectPlugin from './plugins/timeSelect'
 import quickPickPlugin from './plugins/quickPick'
 import { getAllIcons } from '../utilities/icons/allicons';
 
-const angleDown = getAllIcons().angleDown.string
+const { angleDown, angleLeft, angleRight } = getAllIcons()
+const angleDownString = angleDown.string
+const angleLeftString = angleLeft.string
+const angleRightString = angleRight.string
 
 const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -32,7 +35,6 @@ type DatePickerConfig = {
   thisRangesEndToday?: boolean,
   timeCaption?: string,
   timeFormat?: string,
-  yearAscending?: boolean,
   yearRange: number[],
   controlsStartId?: string,
     controlsEndId?: string,
@@ -71,7 +73,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     thisRangesEndToday = false,
     timeCaption = 'Select Time',
     timeFormat = 'at h:i K',
-    yearAscending,
     yearRange,
     controlsStartId,
     controlsEndId,
@@ -367,7 +368,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     maxDate: effectiveMaxDate,
     minDate: effectiveMinDate,
     mode,
-    nextArrow: '<i class="far fa-angle-right"></i>',
+    nextArrow: `<div style="height: 14px;">${angleRightString}</div>`,
     onOpen: [(_selectedDates, _dateStr, fp) => {
       // If defaultDate was out of range of a dev set min/max date, restore it when calendar opens (in situation where the input was manually cleared or the calendar was closed without selection)
       if (hasOutOfRangeDefault) {
@@ -439,7 +440,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     plugins: setPlugins(thisRangesEndToday, customQuickPickDates),
     position,
     positionElement: getPositionElement(positionElement),
-    prevArrow: '<i class="far fa-angle-left"></i>',
+    prevArrow: `<div style="height: 14px;">${angleLeftString}</div>`,
     static: staticPosition,
   })
 
@@ -517,14 +518,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   // create html option tags for desired years
   let years = ''
-  if (yearAscending) {
-    for (let year = setMinYear; year <= setMaxYear; year++) {
-      years += `<option value="${year}">${year}</option>`
-    }
-  } else {
-    for (let year = setMaxYear; year >= setMinYear; year--) {
-      years += `<option value="${year}">${year}</option>`
-    }
+  for (let year = setMaxYear; year >= setMinYear; year--) {
+    years += `<option value="${year}">${year}</option>`
   }
 
   // variablize each dropdown selector
@@ -659,12 +654,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 
   // Adding dropdown icons to year and month select
-  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
+  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDownString}</i>`)
   if (picker.monthElements[0].parentElement) {
-    return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDown}</i>`)}
-  // if (picker.weekElements[0].parentElement){
-  //   return  picker.weekElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
-  // }
+    return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDownString}</i>`)}
 
   // Remove readonly attribute for validation and or text input
   if (allowInput){

data/app/pb_kits/playbook/pb_date_picker/docs/_playground.json

@@ -16,7 +16,6 @@
     "showTimezone": false,
     "staticPosition": true,
     "thisRangesEndToday": false,
-    "yearAscending": false,
     "controlsStartId": "",
     "controlsEndId": "",
     "syncStartWith": "",

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

@@ -23,7 +23,6 @@ examples:
   - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
-  - date_picker_year_asc: Year Ascending
   - date_picker_anti_patterns: Anti-Patterns
   - date_picker_margin_bottom: Margin Bottom
   - date_picker_inline: Inline
@@ -59,7 +58,6 @@ examples:
   - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
-  - date_picker_year_asc: Year Ascending
   - date_picker_margin_bottom: Margin Bottom
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only

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

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

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

@@ -257,14 +257,6 @@
         "react"
       ]
     },
-    "yearAscending": {
-      "type": "boolean",
-      "platforms": [
-        "react",
-        "rails"
-      ],
-      "default": false
-    },
     "yearRange": {
       "type": "array",
       "platforms": [

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb

@@ -32,7 +32,7 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx

@@ -19,18 +19,16 @@ const PopoverWithButton = (props) => {
         onClick={handleTogglePopover}
         variant="secondary"
     >
-      <Flex align="center">
+      <Flex 
+          align="center"
+          gap="xxs" 
+      >
         {"Filter By"}
-        <Flex
-            className={showPopover ? "fa-flip-vertical" : ""}
-            display="inline_flex"
-        >
-          <Icon
-              fixedWidth
-              icon="angle-down"
-              margin-left="xxs"
-          />
-        </Flex>
+        <Icon
+            fixedWidth
+            flip={showPopover ? "vertical" : "none"}
+            icon="angle-down"
+        />
       </Flex>
     </Button>
   )

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
 
-import { getAllIcons } from "../../utilities/icons/allicons"
-
 import Flex from '../../pb_flex/_flex'
 import PbReactPopover from '../../pb_popover/_popover'
 import Button from '../../pb_button/_button'
@@ -67,8 +65,6 @@ const toolbarDropdownItems = [
     },
 ]
 
-  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
-
   const handleTogglePopover = () => {
     setShowPopover(!showPopover)
   }
@@ -92,16 +88,12 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
             size="lg"
         />
         <div>{text}</div>
-        <Flex className={showPopover ? "fa-flip-vertical" : ""}
-            display="inline_flex"
-        >
-          <Icon 
-              className="svg-inline--fa"
-              customIcon={angleDown}
-              fixedWidth
-              margin-left="xs"
-          />
-        </Flex>
+        <Icon
+            fixedWidth
+            flip={showPopover ? "vertical" : "none"}
+            icon="angle-down"
+            margin-left="xs"
+        />
       </Flex>
     );
   }
@@ -127,16 +119,12 @@ const popoverReference = (
                 size="lg"
             />
             <div>Paragraph</div>
-            <Flex className={showPopover ? "fa-flip-vertical" : ""}
-                display="inline_flex"
-            >
-              <Icon 
-                  className="svg-inline--fa"
-                  customIcon={angleDown}
-                  fixedWidth
-                  margin-left="xs"
-              />
-            </Flex>
+            <Icon
+                fixedWidth
+                flip={showPopover ? "vertical" : "none"}
+                icon="angle-down"
+                margin-left="xs"
+            />
           </Flex>
         )
        )

data/app/pb_kits/playbook/utilities/icons/allicons.tsx

@@ -147,6 +147,36 @@ const angleDown = (
   </svg>
 )
 
+const angleLeft = (
+  <svg
+      fill="none"
+      height="25"
+      viewBox="0 0 31 25"
+      width="31"
+      xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+        d="M10.6074 11.3086L18.1074 3.85547C18.5293 3.38672 19.2324 3.38672 19.7012 3.85547C20.123 4.27734 20.123 4.98047 19.7012 5.40234L12.9512 12.1055L19.6543 18.8555C20.123 19.2773 20.123 19.9805 19.6543 20.4023C19.2324 20.8711 18.5293 20.8711 18.1074 20.4023L10.6074 12.9023C10.1387 12.4805 10.1387 11.7773 10.6074 11.3086Z"
+        fill="#242B42"
+    />
+  </svg>
+)
+
+const angleRight = (
+  <svg
+      fill="none"
+      height="25"
+      viewBox="0 0 31 25"
+      width="31"
+      xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+        d="M21.2012 11.3086C21.623 11.7773 21.623 12.4805 21.2012 12.9023L13.7012 20.4023C13.2324 20.8711 12.5293 20.8711 12.1074 20.4023C11.6387 19.9805 11.6387 19.2773 12.1074 18.8555L18.8105 12.1523L12.1074 5.40234C11.6387 4.98047 11.6387 4.27734 12.1074 3.85547C12.5293 3.38672 13.2324 3.38672 13.6543 3.85547L21.2012 11.3086Z"
+        fill="#242B42"
+    />
+  </svg>
+)
+
 export const getAllIcons = () => {
 
     return {
@@ -177,6 +207,14 @@ export const getAllIcons = () => {
         angleDown: {
             icon: angleDown,
             string: ReactDOMServer.renderToStaticMarkup(angleDown)
+        },
+        angleLeft: {
+            icon: angleLeft,
+            string: ReactDOMServer.renderToStaticMarkup(angleLeft)
+        },
+        angleRight: {
+            icon: angleRight,
+            string: ReactDOMServer.renderToStaticMarkup(angleRight)
         }
     }
 }

data/dist/chunks/{_pb_line_graph-D_5Qj7RV.js → _pb_line_graph-5ED4uF6R.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-4JfvDJOJ.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-LYU8yq_z.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-CNMeQljP.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-DD2WQ9Er.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};