playbook_ui 14.19.0.pre.alpha.PLAY21297675 → 14.19.0.pre.alpha.play1997dropdownenablepillsinselection7702

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93df013c8d48a5c077ccdb15133ab4682b05d667db94eba9bdd6e8accba7d472
-  data.tar.gz: '085bc5dffd842ea4fc4fe35f8579b517523ad0e02f6b9692fe33faecbf6b9284'
+  metadata.gz: 5e1acc819228475b290eaea87ff0b86b2b62cea0c8d53baa8527c2bab9714a3a
+  data.tar.gz: 6ae3b6b23aae3dd4f27fc2b4ffd1c575f6bdfe51710fe5814661e81a36d8d810
 SHA512:
-  metadata.gz: 463d71189c32e8500ca647672d4202ffbfb23e0d73c068eaf50a0779752a0f91d9151bcfce121cc3050066a1a0897eb13b86b05328630aa6f5e3ee80baa50586
-  data.tar.gz: 00d153cdde95a0761c7515b5fb5de2dff87d10cb7f7e1e16e2f092bee31f1110ed713c6c3599fb57fb11bc347800f6bb1510798990904ad84629580d42a427e4
+  metadata.gz: a60e87407b7cdc3186cc515e4a0e783343b7e7257278f8dc3fa711c91447a5c3711911371121e4c3075799c305dc2da709b18f87e10cb9d51825c528ad797dec
+  data.tar.gz: '05912e775970c5b43a34112f4338c7269863c251a10cac6078c1a263db1a11b4d8207e363ab6377f1ea598fb8528bcc23a7d6e73a72c5f930f0b7fc15a276278'

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -93,17 +93,7 @@ export const RegularTableView = ({
 
               {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
                 const isPinnedLeft = columnPinning.left.includes(cell.column.id);
-                const isLastCell = (() => {
-                  const parent = cell.column.parent;
-                    if (!parent) {
-                      const last = row.getVisibleCells().at(-1);
-                      return last?.column.id === cell.column.id;
-                    }
-                  
-                    const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
-                    return visibleSiblings.at(-1)?.id === cell.column.id;
-                   })();
-
+                const isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
                 const { column } = cell;
                 return (
                   <td

data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx

@@ -1,112 +1,25 @@
-import React, { useEffect, useRef, useContext } from "react";
-
-import AdvancedTableContext from "../Context/AdvancedTableContext";
-import { buildVisibilityTree } from "../Utilities/VisibilityTree";
-
+import React, { useEffect, useRef } from "react";
 import Card from "../../pb_card/_card";
 import Caption from "../../pb_caption/_caption";
 import Flex from "../../pb_flex/_flex";
 import FlexItem from "../../pb_flex/_flex_item";
-import Dropdown from "../../pb_dropdown/_dropdown";
-import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer";
-import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger";
-import Icon from "../../pb_icon/_icon";
-import Checkbox from "../../pb_checkbox/_checkbox";
-import SectionSeparator from "../../pb_section_separator/_section_separator";
-import Tooltip from "../../pb_tooltip/_tooltip";
-
-import {
-  showActionBar,
-  hideActionBar,
-} from "../Utilities/ActionBarAnimationHelper";
-import { GenericObject } from "../../types";
+import { showActionBar, hideActionBar } from "../Utilities/ActionBarAnimationHelper";
 
 interface TableActionBarProps {
-  isVisible: boolean | GenericObject | undefined;
+  isVisible: boolean;
   selectedCount: number;
   actions?: React.ReactNode[] | React.ReactNode;
-  type?: string;
-}
-
-interface VisibilityNode {
-  id?: string | undefined;
-  label?: string | undefined;
-  children?: VisibilityNode[];
 }
 
 const TableActionBar: React.FC<TableActionBarProps> = ({
   isVisible,
   selectedCount,
-  actions,
-  type = "row-selection",
+  actions
 }) => {
   const cardRef = useRef(null);
-  const { table, columnVisibilityControl, columnDefinitions } =
-    useContext(AdvancedTableContext);
-
-  // ----------- Column visibility logic -----------
-  const includeIds = columnVisibilityControl?.includeIds;
-  const firstLeafId = table.getAllLeafColumns()[0]?.id;
-  // Get the first leaf column ID to exclude it from the visibility tree
-  // This is to avoid showing the first column in the dropdown
-  // as toggling it's visibility breaks the expanded row functionality
-  const tree = buildVisibilityTree(columnDefinitions, includeIds).filter(node => node.id !== firstLeafId);
-
-  const renderLeaf = (id: string, label: string) => {
-    const col   = table.getColumn(id);
-    const show  = col.getIsVisible();
-
-    return (
-      <Checkbox
-          checked={show}
-          key={id}
-          onChange={() => col.toggleVisibility()}
-          paddingBottom="xs"
-          text={label}
-      />
-    );
-  };
-
-  const gatherLeafIds = (node: VisibilityNode): string[] =>
-    node.children && node.children.length
-      ? node.children.flatMap(gatherLeafIds)
-      : node.id
-      ? [node.id]
-      : [];
-
-  const renderGroup = (node: VisibilityNode ) => {
-     const leaves = gatherLeafIds(node);
-    const visibleArray   = leaves.map((id) => table.getColumn(id).getIsVisible());
-    const allOn    = visibleArray.every(Boolean);
-    const someOn   = visibleArray.some(Boolean);
-
-    return (
-      <>
-        <Checkbox
-            checked={allOn}
-            indeterminate={!allOn && someOn}
-            onChange={() =>
-              leaves.forEach((id) =>
-                table.getColumn(id).toggleVisibility(!allOn),
-              )
-            }
-            paddingBottom="xs"
-            text={node.label}
-        />
-        <Flex flexDirection="column" 
-            paddingLeft="lg"
-        >
-          {node?.children?.map((child) =>
-            child.children ? renderGroup(child) : renderLeaf(child.id, child.label),
-          )}
-        </Flex>
-      </>
-    );
-  };
-// ------------ End of column visibility logic --------
 
   useEffect(() => {
-    if (cardRef.current && type === "row-selection") {
+    if (cardRef.current) {
       if (isVisible) {
         showActionBar(cardRef.current);
       } else {
@@ -118,68 +31,22 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
   return (
     <Card
         borderNone={!isVisible}
-        className={`${
-          isVisible && "show-action-card row-selection-actions-card"
-        }`}
+        className={`${isVisible && "show-action-card row-selection-actions-card"}`}
         htmlOptions={{ ref: cardRef as any }}
         padding={`${isVisible ? "xs" : "none"}`}
     >
       <Flex
           alignItems="center"
-          justify={type === "row-selection" ? "between" : "end"}
+          justify="between"
       >
-        {type === "row-selection" ? (
-          <>
-            <Caption color="light" 
-                paddingLeft="xs" 
-                size="xs"
-            >
-              {selectedCount} Selected
-            </Caption>
-            <FlexItem>{actions}</FlexItem>
-          </>
-        ) : (
-          <Dropdown
-              className="column-visibility-dropdown-wrapper"
-              options={columnDefinitions}
-          >
-            <DropdownTrigger>
-            <Tooltip 
-                placement='top' 
-                text="Column Configuration" 
-                zIndex={10}
-            >
-                <Icon 
-                    color="primary" 
-                    cursor="pointer" 
-                    icon="sliders-h" 
-                />
-            </Tooltip>
-            </DropdownTrigger>
-            <DropdownContainer
-                className="column-visibility-dropdown"
-                paddingTop="sm"
-            >
-              <>
-              <Caption 
-                  paddingBottom="sm" 
-                  text="Columns Config"
-                  textAlign="center" 
-              />
-              <SectionSeparator paddingBottom="xs" />
-              {tree.map((node: VisibilityNode) => (
-                <Flex cursor="pointer" 
-                    flexDirection="column" 
-                    key={node.id}
-                    paddingX="xs"
-                >
-                  {node.children ? renderGroup(node) : renderLeaf(node.id, node.label)}
-                </Flex>
-              ))}
-              </>
-            </DropdownContainer>
-          </Dropdown>
-        )}
+        <Caption
+            color="light"
+            paddingLeft="xs"
+            size="xs"
+        >
+          {selectedCount} Selected
+        </Caption>
+        <FlexItem>{actions}</FlexItem>
       </Flex>
     </Card>
   );

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -79,26 +79,9 @@ export const TableHeaderCell = ({
   header?.column.getLeafColumns().length === 1 &&
   header?.column.getLeafColumns()[0].id === header.column.id
 
-  const columnHasVisibleLeaf = (col: any): boolean =>
-    col.getIsVisible?.() ||
-    (Array.isArray(col.columns) &&
-      col.columns.some((child: any) => columnHasVisibleLeaf(child)));
-      
-   // Check on column position in stack + visibility to add the vertical border 
-  const isLastHeaderCell = (() => {
-    if (!header) return false;
-  
-    if (header.colSpan > 1 && header.column.parent !== undefined) return true;
-  
-    const parent = header.column.parent;
-  
-    if (!parent) {
-      const topHeaders = table?.getHeaderGroups()[0].headers.filter((h: any) => columnHasVisibleLeaf(h.column));
-      return topHeaders?.at(-1)?.id === header.id;
-    }
-    const visibleSiblings = parent.columns.filter(columnHasVisibleLeaf);
-    return visibleSiblings.at(-1) === header.column;
-  })();
+  const isLastHeaderCell =
+    header?.column.parent?.columns.at(-1) === header?.column ||
+    (header?.colSpan > 1 && header?.column.parent !== undefined);
  
 const cellClassName = classnames(
   "table-header-cells",

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -26,8 +26,6 @@ interface UseTableStateProps {
   virtualizedRows?: boolean;
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
-  columnVisibilityControl?: GenericObject;
-
 }
 
 export function useTableState({
@@ -42,19 +40,16 @@ export function useTableState({
   pagination = false,
   paginationProps,
   virtualizedRows = false,
-  tableOptions,
-  columnVisibilityControl
+  tableOptions
 }: UseTableStateProps) {
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [localColumnVisibility, setLocalColumnVisibility] = useState({});
+
   // Determine whether to use the prop or the local state
   const expanded = expandedControl ? expandedControl.value : localExpanded;
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
-  const columnVisibility = (columnVisibilityControl && columnVisibilityControl.value) ? columnVisibilityControl.value : localColumnVisibility;
-  const setColumnVisibility = (columnVisibilityControl && columnVisibilityControl.onChange) ? columnVisibilityControl.onChange : setLocalColumnVisibility;
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -109,21 +104,17 @@ export function useTableState({
   }]), [columnDefinitions, sortControl]);
 
   // Custom state based on features enabled
-  const customState = useCallback(() => ({
-    state: {
-      expanded,
-      ...(sortControl     && { sorting }),
-      ...(selectableRows  && { rowSelection }),
-      ...(columnVisibility && { columnVisibility }),
-    },
-  }), [
-    expanded,
-    sortControl,
-    sorting,
-    selectableRows,
-    rowSelection,
-    columnVisibility,
-  ]);
+  const customState = useCallback(() => {
+    if (sortControl && selectableRows) {
+      return { state: { expanded, sorting, rowSelection } };
+    } else if (sortControl) {
+      return { state: { expanded, sorting } };
+    } else if (selectableRows) {
+      return { state: { expanded, rowSelection } };
+    } else {
+      return { state: { expanded } };
+    }
+  }, [expanded, rowSelection, sortControl, selectableRows, sorting]);
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
@@ -154,7 +145,6 @@ export function useTableState({
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
     getRowId: selectableRows ? row => row.id : undefined,
-    onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions
     },

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -53,15 +53,6 @@
     width: 100%;
   }
 
-  .column-visibility-dropdown-wrapper {
-    position: unset !important;
-  }
-  .column-visibility-dropdown {
-    width: unset !important;
-    right: $space_xxs;
-    text-align: left;
-  }
-
   // Virtualized table styles
   .virtualized-table-row {
     display: table !important;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -35,7 +35,6 @@ type AdvancedTableProps = {
   className?: string
   columnDefinitions: GenericObject[]
   columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
-  columnVisibilityControl?: GenericObject
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
@@ -74,7 +73,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     className,
     columnDefinitions,
     columnGroupBorderColor,
-    columnVisibilityControl,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -134,8 +132,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     paginationProps,
     virtualizedRows,
     tableOptions,
-    onRowSelectionChange,
-    columnVisibilityControl,
+    onRowSelectionChange
   });
 
   // Initialize table actions
@@ -255,7 +252,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     : {};
 
   // Visibility flag for action bar
-  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
 
   return (
     <>
@@ -289,7 +286,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         <AdvancedTableProvider
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
-            columnVisibilityControl={columnVisibilityControl}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -320,7 +316,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 actions={actions}
                 isVisible={isActionBarVisible}
                 selectedCount={selectedRowsLength}
-                type={columnVisibilityControl ? "column-visibility" : "row-selection"}
             />
 
             {/* Main Table */}

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

@@ -47,7 +47,3 @@ examples:
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing
   - advanced_table_fullscreen: Fullscreen
-  - advanced_table_column_visibility: Column Visibility Control
-  - advanced_table_column_visibility_with_state: Column Visibility Control With State
-  - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
-  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns

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

@@ -27,8 +27,4 @@ export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
 export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
-export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
-export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
-export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
-export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
-export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
+export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -77,7 +77,6 @@
     top: 0;
     left: 0;
     border-radius: unset;
-    z-index: 5;
   }
 
   .checkbox-cell {

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

@@ -6,6 +6,7 @@ import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
 import Avatar from '../../pb_avatar/_avatar'
 import User from '../../pb_user/_user'
+import Body from '../../pb_body/_body'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();
@@ -50,10 +51,20 @@ const DropdownWithCustomDisplay = (props) => {
       <>
       {
         selectedOption && (
+          <Flex align="center">
             <Avatar
                 name={selectedOption.label}
                 size="xs"
             />
+            <Body 
+                marginX="xs"
+                text={selectedOption.label} 
+            />
+            <Badge 
+                text={selectedOption.status} 
+                variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
+            />
+          </Flex>
         )
       }
     </>

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

@@ -1,4 +1,4 @@
-Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `customDisplay` will display as the selected option.
 
 The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`. 
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -38,7 +38,11 @@
 
 <%
   custom_display = capture do
-    pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
+    pb_rails("flex", props: { align: "center" }) do
+      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
+      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
+      concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
+    end
   end
 %>
 
@@ -62,4 +66,31 @@
             <% end %>
         <% end %>
     <% end %>
-<% end %>
+<% end %>
+
+
+<script>
+  document.addEventListener("pb:dropdown:selected", (e) => {
+    const option   = e.detail;
+    const dropdown = e.target;
+
+    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
+    if (!display) return;
+
+    const nameEl = display.querySelector("#dropdown-avatar-name");
+    if (nameEl) nameEl.textContent = option.label;
+
+    const avatarEl = display.querySelector("#dropdown-avatar").querySelector(".avatar_wrapper");
+    const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
+    if (avatarEl) {
+      avatarEl.dataset.name = option.label;
+      avatarEl.setAttribute("data-initials", initials);
+    }
+    const badgeEl   = display.querySelector("#dropdown-avatar-status");
+    const variant = option.status === "Online"  ? "success" : option.status === "Offline" ? "neutral" : "warning";
+    if (badgeEl) {
+      badgeEl.querySelector("span").textContent = option.status;
+      badgeEl.className = 'pb_badge_kit_' + variant;
+    }
+  });
+</script>

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

@@ -1,4 +1,6 @@
-Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `custom_display` will display as the selected option.
+
+Make use of a script to help set the custom_display with the correct value. By using the pb:dropdown:selected event listener, you can target the kits with a querySelector and update them dynamically with the values needed to match the selected option. Make sure to add an ID to the kits being passed in.
 
 The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`. 
 

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

@@ -142,9 +142,22 @@ export default class PbDropdown extends PbEnhancedElement {
     const customDisplayElement = this.element.querySelector(
       "#dropdown_trigger_custom_display"
     );
+
     if (triggerElement) {
       const selectedLabel = JSON.parse(value).label;
-      triggerElement.textContent = selectedLabel;
+      if (customDisplayElement) {
+        triggerElement.textContent = ""
+        this.element.setAttribute("data-option-selected", value);
+        const selectedObj = JSON.parse(value);
+        this.element.dispatchEvent(
+          new CustomEvent("pb:dropdown:selected", {
+            detail: selectedObj,
+            bubbles: true,
+          })
+        );
+      } else {
+        triggerElement.textContent = selectedLabel
+      }
       if (customDisplayElement) {
         customDisplayElement.style.display = "block";
         customDisplayElement.style.paddingRight = "8px";

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx

@@ -6,7 +6,7 @@ import {
   buildDataProps,
   buildHtmlProps
 } from "../../utilities/props";
-import { globalProps, GlobalProps } from "../../utilities/globalProps";
+import { globalProps } from "../../utilities/globalProps";
 
 import DropdownContext from "../context";
 
@@ -24,7 +24,7 @@ type DropdownContainerProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   searchbar?: boolean;
-} & GlobalProps;
+};
 
 const DropdownContainer = (props: DropdownContainerProps) => {
   const {

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
   );
 
   const customDisplayPlaceholder = selected?.label ? (
-    <b>{selected.label}</b>
+    ""
   ) : autocomplete ? (
     ""
   ) : placeholder ? (

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -19,7 +19,7 @@ type SectionSeparatorProps = {
   orientation?: "horizontal" | "vertical",
   text?: string,
   variant?: "card" | "background",
-} & GlobalProps
+}
 
 const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const {