playbook_ui 16.2.0 → 16.3.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 30bb9f2e6d1d3ac26193857757c26d6e8cdcdd594907f1cb00f66a44d01b06fd
-  data.tar.gz: f3e563f423c8667d56863435a56d6628f2f74c5d1bb36685c77758583feff8d1
+  metadata.gz: 3629bc8a253f0631e1b54a8e3938931ae90e63c559c3a625672052bc0be318f7
+  data.tar.gz: 54c575a109980430cc5e2d4e3f63195fc1de9e2500a1ff1a2c6cebfc43093e7f
 SHA512:
-  metadata.gz: f3399019b7aea00c3793f9609e6223164845a79400635013acc22826b79e2150be832fe121472cc18d6974d9bb9cb7f03aa3d1ebf73cc7aae79ca7d6fcd4552d
-  data.tar.gz: 758485999cd223ddcf82d780c8684663b32b2a27c90a436ffc71acc416a81ae0a4ae2438b2e47b3f9a3a7dadacdb71ed3296cac0abb1c860aed7175d4b6d7fa2
+  metadata.gz: 4df5302f570f6cdf3adcfbbd22adad49dc36849417dff87ef46fb4f8d38265b83899b383d8d51ecb6d4d40d3c035931afeed7197b9bdd450502c7dba0836124a
+  data.tar.gz: f390fe264e647517425c11b609c5801cc36eae3db4751d0d174f6f42b167ec99d190e015e8520213eedf4693507c1140ca84dd92309bf0918bcf1f89b49db51a

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md

@@ -1,6 +1,7 @@
 Datepicker supports `position` options from [Flatpickr Options Documentation](https://flatpickr.js.org/options/). There are multiple positioning options to choose from.
 
 **Note:** In order for the above prop to work properly, you must also send `staticPosition={false}` to your Datepicker kit instance.
+If you are using the Datepicker within a Dialog, you cannot use the `staticPosition`/`static_position` prop.
 
 #### Affix Datepicker Upon Scrolling
 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md

@@ -1,4 +1,6 @@
 The dialog kit also supports customizing your dialog with a [compound component](https://kentcdodds.com/blog/compound-components-with-react-hooks) structure.
 This allows for greater flexibility and more complex dialogs.
 
-For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.
+For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.
+
+If you are using the datepicker within the Rails dialog, do not use the `static_position` prop on the datepicker.

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -38,6 +38,7 @@ type DropdownProps = {
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
     clearable?: boolean;
+    closeOnClick?: "outside" | "inside" | "any";
     constrainHeight?: boolean;
     customQuickPickDates?: CustomQuickPickDates;
     formPillProps?: GenericObject;
@@ -80,6 +81,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         children,
         className,
         clearable = true,
+        closeOnClick = "any",
         constrainHeight = false,
         customQuickPickDates,
         dark = false,
@@ -194,13 +196,14 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             setIsDropDownClosed,
             setFocusedOptionIndex,
             setIsInputFocused,
+            closeOnClick,
         });
 
         window.addEventListener("click", handleClick);
         return () => {
             window.removeEventListener("click", handleClick);
         };
-    }, []);
+    }, [closeOnClick]);
 
     useEffect(() => {
         setHasTriggerSubcomponent(!!trigger);
@@ -276,6 +279,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
 
       const handleOptionClick = (clickedItem: GenericObject) => {
+                const shouldCloseOnClick = closeOnClick === "any" || closeOnClick === "inside";
+                
                 if (multiSelect) {
                     setSelected((prev) => {
                        const list = prev as GenericObject[];
@@ -287,11 +292,15 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                        return next;
                    });
                    setFilterItem("");
-                   setIsDropDownClosed(true);
+                   if (shouldCloseOnClick) {
+                       setIsDropDownClosed(true);
+                   }
                } else {
                    setSelected(clickedItem);
                    setFilterItem("");
-                   setIsDropDownClosed(true);
+                   if (shouldCloseOnClick) {
+                       setIsDropDownClosed(true);
+                   }
                    onSelect && onSelect(clickedItem);
                    
                    // Sync with DatePickers if this is a quickpick variant

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Caption from '../../pb_caption/_caption'
+
+const DropdownClosingOptions = (props) => {
+    const options = [
+        {
+            label: "United States",
+            value: "unitedStates",
+            id: "us"
+        },
+        {
+            label: "Canada",
+            value: "canada",
+            id: "ca"
+        },
+        {
+            label: "Pakistan",
+            value: "pakistan",
+            id: "pk"
+        }
+    ];
+
+    return (
+        <>
+            <Caption 
+                marginBottom="xs" 
+                text="Any"
+            />
+            <Dropdown
+                closeOnClick='any'
+                options={options}
+                {...props}
+            />
+
+            <br />
+                
+            <Caption 
+                marginBottom="xs" 
+                text="Outside"
+            />
+            <Dropdown
+                closeOnClick='outside'
+                options={options}
+                {...props}
+            />
+
+            <br />
+
+            <Caption 
+                marginBottom="xs" 
+                text="Inside"
+            />
+            <Dropdown
+                closeOnClick='inside'
+                options={options}
+                {...props}
+            />
+        </>
+    )
+}
+
+export default DropdownClosingOptions

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.md

@@ -0,0 +1 @@
+The `closeOnClick` prop allows you to control when the Dropdown closes in response to click interactions. The value `any` reflects the default behavior, where the dropdown will close after any click. Set it to `outside` to ensure interactive elements as dropdown options are able to be interacted with or modified. Set it to `inside` for a dropdown that only closes when the input or dropdown menu is clicked.

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

@@ -62,6 +62,7 @@ examples:
   - dropdown_with_constrain_height: Constrain Height
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
+  - dropdown_closing_options: Closing Options
   - dropdown_quickpick: Quick Pick Variant
   - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)

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

@@ -31,4 +31,5 @@ export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpi
 export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
 export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'
 export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
+export { default as DropdownClosingOptions } from './_dropdown_closing_options.jsx'
 export { default as DropdownRequiredIndicator } from "./_dropdown_required_indicator.jsx";

data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx

@@ -4,6 +4,7 @@ type HandleClickOutsideType = {
   setIsDropDownClosed?: (value: boolean) => void;
   setFocusedOptionIndex?: (value: number) => void;
   setIsInputFocused?: (value: boolean) => void;
+  closeOnClick?: "outside" | "inside" | "any";
 };
 
 export const handleClickOutside =
@@ -13,6 +14,7 @@ export const handleClickOutside =
     setIsDropDownClosed,
     setFocusedOptionIndex,
     setIsInputFocused,
+    closeOnClick = "any",
   }: HandleClickOutsideType) =>
   (e: MouseEvent) => {
     let targetElement = e.target as HTMLElement;
@@ -33,12 +35,16 @@ export const handleClickOutside =
       }
       targetElement = targetElement.parentElement as HTMLElement;
     }
+    // Only close on outside click if closeOnClick is "outside" or "any"
+    const shouldCloseOnOutsideClick = closeOnClick === "outside" || closeOnClick === "any";
+    
     if (
       inputWrapperRef.current &&
       !inputWrapperRef.current.contains((e.target as HTMLElement)) &&
       dropdownContainerRef.current &&
       !dropdownContainerRef.current.contains((e.target as HTMLElement)) &&
-      shouldClose
+      shouldClose &&
+      shouldCloseOnOutsideClick
     ) {
       setIsDropDownClosed(true);
       setFocusedOptionIndex(-1);

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -92,7 +92,8 @@
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: true, hidden_inputs: true} %>
+  <%= form.intl_telephone :example_intl_telephone, props: { label: true, hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb

@@ -146,6 +146,8 @@
   <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
   <%= form.date_picker :example_date_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
   <%= form.date_picker :example_date_picker_required_indicator_custom, props: { label: "Custom Date Picker Label", required: true, required_indicator: true } %>
+  <%= form.select :example_select_required_indicator, [["Yes", 1], ["No", 2]], props: { label: true, required: true, required_indicator: true } %>
+  <%= form.select :example_select_required_indicator_2, [["Yes", 1], ["No", 2]], props: { label: "Example Select Field", required: true, required_indicator: true } %>
   <%= form.multi_level_select :example_multi_level_select_required_indicator, props: {
     label: true,
     margin_y: 'sm',

data/app/pb_kits/playbook/pb_link/_link.scss

@@ -4,7 +4,8 @@
 @import "../tokens/border_radius";
 
 // Base styles
-.pb_link_kit {
+.pb_link_kit,
+.pb_link_kit_underline {
   @include pb_link($primary);
   &:hover {
     color: $text_lt_default;
@@ -113,6 +114,20 @@
   }
 }
 
+// Dark mode color + underline combinations
+@each $dark_color_name, $dark_color_value in $pb_dark_link_colors {
+  .pb_link_kit_#{$dark_color_name}_underline.dark {
+    @include pb_link($dark_color_value);
+    &:hover {
+      color: map-get($pb_dark_link_hover_colors, $dark_color_name);
+    }
+    &:visited {
+      color: darken($primary_action, 10%);
+    }
+    text-decoration: underline;
+  }
+}
+
 // Color + disabled combinations
 @each $color_name, $color_value in $pb_link_colors {
   @if $color_name != "default" {

data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx

@@ -4,7 +4,37 @@ import Link from '../../pb_link/_link'
 const LinkUnderline = (props) => (
   <div>
     <Link
-        href="#underline"
+        href="#underline1"
+        text="link example"
+        underline
+        {...props}
+    />
+
+    <br />
+
+    <Link
+        color="body"
+        href="#underline2"
+        text="link example"
+        underline
+        {...props}
+    />
+
+    <br />
+
+    <Link
+        color="muted"
+        href="#underline3"
+        text="link example"
+        underline
+        {...props}
+    />
+
+    <br />
+
+    <Link
+        color="destructive"
+        href="#underline4"
         text="link example"
         underline
         {...props}

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
 import type { InputCallback } from '../types'
-import { getAllIcons } from "../utilities/icons/allicons"
+import { getAllIcons } from '../utilities/icons/allicons'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -38,6 +38,7 @@ type SelectProps = {
   onChange: InputCallback<HTMLSelectElement>,
   options: SelectOption[],
   required?: boolean,
+  requiredIndicator?: boolean,
   showArrow?: boolean,
   value?: string,
 } & GlobalProps
@@ -70,6 +71,7 @@ const Select = ({
   onChange = () => undefined,
   options = [],
   required = false,
+  requiredIndicator = false,
   showArrow = false,
   value,
   ...props
@@ -121,39 +123,45 @@ const Select = ({
   })()
 
   return (
-    <div
-        {...ariaProps}
+    <div {...ariaProps}
         {...dataProps}
         {...htmlProps}
         className={classes}
     >
-      {label &&
-        <label
-            className="pb_select_kit_label"
+      {label && (
+        <label className="pb_select_kit_label"
             htmlFor={selectId}
         >
-          <Caption 
-              dark={props.dark}
-              text={label} 
-          />
+          {requiredIndicator ? (
+            <Caption 
+                dark={props.dark}>
+              {label}
+              <span style={{ color: "#DA0014" }}> *</span>
+            </Caption>
+          ) : (
+            <Caption 
+                dark={props.dark}
+                text={label}
+            />
+          )}
         </label>
-      }
-      <label
+      )}
+      <label 
           className={selectWrapperClass}
           htmlFor={selectId}
       >
         {selectBody}
-        { multiple !== true ?
+        { multiple !== true ? 
           <Icon
               className="pb_select_kit_caret svg-inline--fa"
               customIcon={angleDown}
               fixedWidth
-          />
-          :
-          null
+         />
+         : 
+         null
         }
-        {error &&
-          <Body
+        {error && 
+          <Body 
               dark={props.dark}
               status="negative"
               text={error}

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Snacks",
+  name: "food",
+  required_indicator: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Popcorn",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Chips",
+    },
+    {
+      value: "3",
+      value_text: "Twizzlers",
+    },
+    {
+      value: "4",
+      value_text: "Cookies",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { Select } from "playbook-ui";
+
+const SelectRequiredIndicator = () => {
+  const options = [
+    {
+      value: "1",
+      text: "Popcorn",
+    },
+    {
+      value: "2",
+      text: "Chips",
+    },
+    {
+      value: "3",
+      text: "Twizzlers",
+    },
+  ];
+
+  return (
+    <div>
+      <Select
+          label="Favorite Snack"
+          name="food"
+          options={options}
+          requiredIndicator
+      />
+    </div>
+  );
+};
+
+export default SelectRequiredIndicator;

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.md

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (\*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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

@@ -16,7 +16,7 @@ examples:
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
   - select_input_options: Input Options
-
+  - select_required_indicator: Required Indicator
 
 
   react:
@@ -35,8 +35,9 @@ examples:
   - select_multiple: Select Multiple
   - select_react_hook: React Hook
   - select_input_options: Input Options
+  - select_required_indicator: Required Indicator
 
   swift:
   - select_default_swift: Default
   - select_error_swift: Error
-  - select_props_table: ""
+  - select_props_table: ""

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

@@ -13,3 +13,4 @@ export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
 export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'
 export { default as SelectInputOptions } from './_select_input_options.jsx'
+export { default as SelectRequiredIndicator } from './_select_required_indicator.jsx'

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -3,7 +3,13 @@
   class: object.classnames ) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.input_options[:id] || object.name %>">
-      <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
+      <% if object.required_indicator %>
+        <%= pb_rails("caption", props: { dark: object.dark }) do %>
+          <%= object.label %><span style="color: #DA0014;"> *</span>
+        <% end %>       
+      <% else %>
+        <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
+      <% end %>
     </label>
   <% end %>
   <label class="<%= object.select_wrapper_class %>" for="<%= object.input_options[:id] || object.name %>">

data/app/pb_kits/playbook/pb_select/select.rb

@@ -24,6 +24,8 @@ module Playbook
       prop :show_arrow, type: Playbook::Props::Boolean, default: false
       prop :required, type: Playbook::Props::Boolean, default: false
       prop :validation_message, type: Playbook::Props::String, default: ""
+      prop :required_indicator, type: Playbook::Props::Boolean,
+                                default: false
 
       def classnames
         ([classname] + [inline_class, compact_class, show_arrow_class])
@@ -37,6 +39,7 @@ module Playbook
           prompt: blank_selection,
           disabled: disabled,
           required: required,
+          requiredIndicator: required_indicator,
           multiple: multiple,
           onchange: onchange,
           include_blank: include_blank,

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_disabled.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("textarea", props: { label: "Disabled", rows: 4, id: "disabled-example-1", disabled: true }) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: {
+  label: "Disabled with Placeholder",
+  placeholder: "Placeholder text",
+  id: "disabled-example-2",
+  disabled: true
+}) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_disabled.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import Textarea from '../_textarea'
+
+const TextareaDefault = (props) => {
+  return (
+    <>
+      <Textarea
+          disabled
+          id="disabled-example"
+          label="Disabled"
+          {...props}
+          rows={4}
+      />
+      <Textarea
+          disabled
+          id="disabled-example-with-placeholder"
+          label="Disabled with Placeholder"
+          placeholder="Content goes here"
+          {...props}
+          rows={4}
+      />
+    </>
+  )
+}
+
+export default TextareaDefault

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

@@ -10,6 +10,7 @@ examples:
   - textarea_emoji_mask: Emoji Mask
   - textarea_required_indicator: Required Indicator
   - textarea_input_options: Input Options
+  - textarea_disabled: Disabled
 
   react:
   - textarea_default: Default
@@ -20,6 +21,7 @@ examples:
   - textarea_inline: Inline
   - textarea_emoji_mask: Emoji Mask
   - textarea_required_indicator: Required Indicator
+  - textarea_disabled: Disabled
 
   swift:
   - textarea_default_swift: Default

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

@@ -1,4 +1,5 @@
 export { default as TextareaDefault } from './_textarea_default.jsx'
+export { default as TextareaDisabled } from './_textarea_disabled.jsx'
 export { default as TextareaResize } from './_textarea_resize.jsx'
 export { default as TextareaCustom } from './_textarea_custom.jsx'
 export { default as TextareaError } from './_textarea_error.jsx'

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

@@ -25,6 +25,8 @@ module Playbook
       prop :max_characters
       prop :required_indicator, type: Playbook::Props::Boolean,
                                 default: false
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
 
       def classname
         generate_classname("pb_textarea_kit") + error_class + resize_class + inline_class
@@ -49,6 +51,7 @@ module Playbook
         base_attributes = {
           'aria-describedby': error.present? ? error_id : nil,
           'aria-invalid': error.present?,
+          disabled: disabled,
           id: input_options[:id] || id || "object_method",
           max_characters: max_characters,
           name: name,

data/dist/chunks/{_pb_line_graph-CsDClWC8.js → _pb_line_graph-CC2Ywwix.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-CW_a2wOO.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-DHuT-Q9y.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-DYr2qrIf.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-DgqmX9CF.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};