playbook_ui_docs 14.15.0.pre.rc.4 → 14.16.0.pre.alpha.PBNTR924reacttablecustomheaders6846

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx

@@ -1,14 +1,13 @@
 import React, { useState } from "react";
-import {
-  Flex,
-  Badge,
-  Title,
-  Icon,
-  Draggable,
-  DraggableProvider,
-  Card,
-  Caption,
-} from "playbook-ui";
+
+import Flex from '../../pb_flex/_flex'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+import Badge from '../../pb_badge/_badge'
+import Title from '../../pb_title/_title'
+import Icon from '../../pb_icon/_icon'
+import Caption from '../../pb_caption/_caption'
+import Card from '../../pb_card/_card'
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { DraggableProvider, List, ListItem } from "playbook-ui";
+
+import { DraggableProvider } from '../../pb_draggable/context'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
-import { SelectableList, DraggableProvider } from "playbook-ui";
+
+import SelectableList from '../../pb_selectable_list/_selectable_list'
+import { DraggableProvider } from '../../pb_draggable/context'
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx

@@ -1,5 +1,10 @@
 import React, { useState } from "react";
-import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
+
+import Flex from '../../pb_flex/_flex'
+import { DraggableProvider } from '../../pb_draggable/context'
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
+import Table from '../../pb_table/_table'
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react"
-import { Button, Drawer, Flex } from "playbook-ui"
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const useDrawer = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const DrawerBorders = () => {
   // Individual state variables for each drawer size
@@ -41,7 +44,7 @@ const DrawerBorders = () => {
           onClose={toggleBRightDrawer}
           opened={openedBRightDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border right  
@@ -52,7 +55,7 @@ const DrawerBorders = () => {
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border left
@@ -63,7 +66,7 @@ const DrawerBorders = () => {
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border full

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb

@@ -0,0 +1,3 @@
+
+<%= pb_rails("body", props: { text: " The breakpoint prop determines when the Drawer is always visible. Above the specified breakpoint, the Drawer remains open on the page. Below it, only the trigger element is shown, allowing you to toggle the drawer open and closed. To see this in action, click the button below and resize your window.", padding_bottom: "md" }) %>
+<%= pb_rails("button", props: { text: "Open Doc Example in New Tab", new_window: true, link: "/drawer_page", margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -1,42 +1,26 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
-
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible);
-  const toggle = () => setOpened(!opened);
-
-  return [opened, toggle];
-};
-
-const DrawerBreakpoints = () => {
-  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
+import React from "react"
+import Button from '../../pb_button/_button'
+import Body from "../../pb_body/_body"
 
+const DrawerMenu = () => {
   return (
     <>
-      <Flex wrap>
-        <Button
-            id="sm"
-            marginRight="md"
-            onClick={toggleSmallDrawer}
-        >
-          {"Will open at small breakpoint"}
-        </Button>
-      </Flex>
-      <Flex>
-        <Drawer
-            behavior={"push"}
-            breakpoint="sm"
-            onClose={toggleSmallDrawer}
-            opened={smallDrawerOpened}
-            overlay={false}
-            placement={"right"}
-            size={"lg"}
-        >
-          Open because small breakpoint 
-        </Drawer>
-      </Flex>
+      <Body>
+        The breakpoint prop determines when the Drawer is always visible. Above
+        the specified breakpoint, the Drawer remains open on the page. Below it,
+        only the trigger element is shown, allowing you to toggle the drawer
+        open and closed. To see this in action, click the button below and
+        resize your window.
+      </Body>
+      <Button
+          link='https://8njdkc.csb.app/'
+          marginTop='md' 
+          newWindow 
+      >
+        Open Doc Example in New Tab
+      </Button>
     </>
-  );
-};
+  )
+}
 
-export default DrawerBreakpoints;
+export default DrawerMenu

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const useDrawer = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx

@@ -1,5 +1,10 @@
 import React, { useState, useEffect } from "react"
-import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Icon from '../../pb_icon/_icon'
+import Nav from '../../pb_nav/_nav'
+import NavItem from '../../pb_nav/_item'
 
 const DrawerMenu = () => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
@@ -8,8 +13,8 @@ const DrawerMenu = () => {
     const mediaQuery = window.matchMedia("(max-width: 600px)")
     setIsSmallScreen(mediaQuery.matches)
     const handler = (e) => setIsSmallScreen(e.matches)
-    mediaQuery.addEventListener('change', handler)
-    return () => mediaQuery.removeEventListener('change', handler)
+    mediaQuery.addEventListener("change", handler)
+    return () => mediaQuery.removeEventListener("change", handler)
   }, [])
 
   return (
@@ -22,17 +27,17 @@ const DrawerMenu = () => {
         />
       </Button>
       <Drawer
-          breakpoint="md"
+          breakpoint='md'
           placement='bottom'
           size='full'
           triggerId='menuButton'
           withinElement
       >
-        <Nav 
+        <Nav
             highlight={false}
             link='#'
-            orientation={isSmallScreen ? 'vertical' : 'horizontal'} 
-            padding={isSmallScreen ? 'none' : 'sm'}
+            orientation={isSmallScreen ? "vertical" : "horizontal"}
+            padding={isSmallScreen ? "none" : "sm"}
         >
           <NavItem link='#'
               text='About'

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react"
-import { Button, Drawer, Flex } from "playbook-ui"
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const DrawerSizes = () => {
   // Individual state variables for each drawer size
@@ -31,6 +34,7 @@ const DrawerSizes = () => {
           onClose={toggleNoOverlayDrawer}
           opened={openedNoOverlayDrawer}
           overlay={false}
+          placement='right'
           size='lg'
       >
         This is a Drawer with no overlay

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const DrawerSizes = () => {
   // Individual state variables for each drawer size

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

@@ -6,6 +6,7 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 
   
   
@@ -15,4 +16,5 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownBlankSelection = (props) => {
   const options = [

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

@@ -1,5 +1,7 @@
 import React, { useRef } from 'react'
-import { Button, Dropdown } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const options = [
     {

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownDefault = (props) => {
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownDefaultValue = (props) => {
   const options = [

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownError = (props) => {
     const [selectedOption, setSelectedOption] = useState()

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownSeparatorsHidden = (props) => {
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownSubcomponentStructure = (props) => {
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownSubtleVariant = (props) => {
 

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

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Dropdown, User, Badge, FlexItem } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import FlexItem from '../../pb_flex/_flex_item'
+import User from '../../pb_user/_user'
 
 const DropdownWithAutocomplete = (props) => {
 

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

@@ -1,5 +1,11 @@
 import React, { useState } from 'react'
-import { Dropdown, User, Badge, FlexItem, Avatar } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import User from '../../pb_user/_user'
+
 
 const DropdownWithAutocompleteAndCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();

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

@@ -1,5 +1,11 @@
 import React, { useState } from 'react'
-import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+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'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();

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

@@ -1,5 +1,11 @@
 import React from 'react'
-import { Dropdown, Icon, Body, FlexItem, Flex } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+
 
 const DropdownWithCustomOptions = (props) => {
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownWithCustomPadding = (props) => {
 

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

@@ -1,5 +1,11 @@
 import React, { useState } from 'react'
-import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+import IconCircle from '../../pb_icon_circle/_icon_circle'
 
 const DropdownWithCustomTrigger = (props) => {
 

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

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Dropdown, useDropdown, Button } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import useDropdown from '../../pb_dropdown/hooks/useDropdown'
+
+import Button from '../../pb_button/_button'
 
 const DropdownWithExternalControl = (props) => {
 const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);

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

@@ -1,5 +1,12 @@
 import React, { useRef } from 'react'
-import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex  } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import useDropdown from '../../pb_dropdown/hooks/useDropdown'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
 
 const DropdownWithHook = (props) => {
 const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownDefault = (props) => {
 

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { EmptyState, Flex } from 'playbook-ui'
+
+const EmptyStateAlignment = (props) => (
+  <Flex align="center"
+      spacing="evenly"
+  >
+      <EmptyState
+          {...props}
+          alignment="left"
+          description="Body text goes into detail with possible steps for user to take"
+          header="Title Explains"
+          image="default"
+          primaryButton="Next Action"
+          size="md"
+      />
+      <EmptyState
+          {...props}
+          alignment="center"
+          description="Body text goes into detail with possible steps for user to take"
+          header="Title Explains"
+          image="default"
+          primaryButton="Next Action"
+          size="md"
+      />
+      <EmptyState
+          {...props}
+          alignment="right"
+          description="Body text goes into detail with possible steps for user to take"
+          header="Title Explains"
+          image="default"
+          primaryButton="Next Action"
+          size="md"
+      />
+  </Flex>
+)
+
+export default EmptyStateAlignment

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { EmptyState, Flex } from 'playbook-ui'
+
+const EmptyStateDefault = (props) => (
+  <Flex align="center"
+      orientation="column"
+  >
+    <EmptyState
+        {...props}
+        description="Body text goes into detail with possible steps for user to take"
+        header="Title Explains"
+        image="default"
+    />
+  </Flex>
+)
+
+export default EmptyStateDefault

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { EmptyState, Flex } from 'playbook-ui'
+
+const EmptyStateOrientation = (props) => (
+  <Flex align="center"
+      orientation="column"
+  >
+    <EmptyState
+        {...props}
+        alignment="left"
+        description="Body text goes into detail with possible steps for user to take"
+        header="Title Explains"
+        image="default"
+        orientation="horizontal"
+        primaryButton="Next Action"
+        size="lg"
+    />
+  </Flex>
+)
+
+export default EmptyStateOrientation

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { EmptyState, Flex } from 'playbook-ui'
+
+const EmptyStateSize = (props) => (
+  <Flex align="center"
+      spacing="evenly"
+  >
+      <EmptyState
+          {...props}
+          alignment="center"
+          description="Body text goes into detail with possible steps for user to take"
+          header="Title Explains"
+          image="default"
+          linkButton="Alt Action"
+          onLinkButtonClick={() => alert("link button clicked!")}
+          onPrimaryButtonClick={() => alert("primary button clicked!")}
+          primaryButton="Next Action"
+          size="sm"
+      />
+      <EmptyState
+          {...props}
+          alignment="center"
+          description="Body text goes into detail with possible steps for user to take"
+          header="Title Explains"
+          image="default"
+          linkButton="Alt Action"
+          onLinkButtonClick={() => alert("link button clicked!")}
+          onPrimaryButtonClick={() => alert("primary button clicked!")}
+          primaryButton="Next Action"
+          size="lg"
+      />
+  </Flex>
+)
+
+export default EmptyStateSize

data/app/pb_kits/playbook/pb_empty_state/docs/default_image/computer_fly_no_branding.svg

@@ -0,0 +1,21 @@
+<svg width="341" height="251" viewBox="0 0 341 251" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1313 233.77C21.94 231.747 31.6491 231.91 39.5575 227.702C56.9777 218.433 60.9184 182.571 50.3011 169.333C34.3751 149.475 16.4759 166.95 24.5771 179.675C27.3943 184.1 33.7848 186.935 38.6891 188.18C78.9114 198.392 100.955 166.769 129.901 144.801C138.226 138.483 146.873 132.512 155.877 127.089C163.474 122.514 171.448 118.481 179.602 114.869C188.038 111.131 196.468 106.974 205.556 105.078C224.677 101.089 236.173 98.6398 255.712 97.8855C262.58 97.6204 277.133 100.039 283.642 102.064C288.211 103.484 292.636 105.371 296.804 107.625C301.093 109.944 305.182 112.643 308.894 115.718C312.887 119.025 316.534 122.729 319.806 126.678C322.7 130.169 325.327 133.915 327.309 137.936C329.482 142.346 331.21 147.008 332.182 151.791C333.078 156.199 331.253 169.896 330.164 174.281C327.718 184.135 304.022 184.256 296.804 179.675C279.554 168.727 298.876 138.498 305.389 130.376C320.884 111.048 335.049 101.555 330.164 75.5071C329.954 74.386 324.327 52.1211 318.598 47.6126C312.869 43.104 302.552 30.5147 289.885 30.1272" stroke="#DFE3E8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 9"/>
+<rect x="12.0342" y="231.969" width="240.667" height="16.9791" fill="white"/>
+<path opacity="0.397871" fill-rule="evenodd" clip-rule="evenodd" d="M24.0396 232C25.6294 241.986 74.6993 250 135 250C195.3 250 244.37 241.986 245.96 232H24.0396Z" fill="#EFEFEF"/>
+<path d="M12.0283 233.803H252.754V230.543L12.0283 230.543V233.803Z" fill="#DFE3E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M111.452 145.308H235.589C238.589 145.308 241.021 147.74 241.021 150.741V233.985C241.021 236.986 238.589 239.418 235.589 239.418H111.452C108.452 239.418 106.02 236.986 106.02 233.985V150.741C106.02 147.74 108.452 145.308 111.452 145.308Z" fill="#E6EBEF"/>
+<mask id="mask0_5923_12806" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="106" y="145" width="136" height="95">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M111.452 145.308H235.589C238.589 145.308 241.021 147.74 241.021 150.741V233.985C241.021 236.986 238.589 239.418 235.589 239.418H111.452C108.452 239.418 106.02 236.986 106.02 233.985V150.741C106.02 147.74 108.452 145.308 111.452 145.308Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_5923_12806)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M233.81 130.202L135.323 256.455H90.7475L80.9556 100.717L233.81 130.202Z" fill="#EFF3F6"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M190.054 195.575L174.18 206.901V211.604C174.18 211.951 173.792 212.153 173.511 211.952L158.305 201.104L158.287 201.091C158.13 200.979 158.038 200.798 158.038 200.605V200.6V189.57V189.566C158.038 189.373 158.131 189.191 158.288 189.08L158.305 189.067L174.18 177.741V173.038C174.18 172.691 174.567 172.489 174.848 172.69L190.054 183.538L190.072 183.551C190.229 183.662 190.322 183.844 190.322 184.036V184.042V195.071V195.076C190.322 195.269 190.228 195.451 190.071 195.562L190.054 195.575Z" fill="#F9F9F9"/>
+<path d="M174.18 206.901L173.308 205.679C172.914 205.961 172.68 206.416 172.68 206.901H174.18ZM190.054 195.575L190.925 196.796C190.932 196.791 190.938 196.787 190.945 196.782L190.054 195.575ZM173.511 211.952L174.383 210.732L174.382 210.731L173.511 211.952ZM158.305 201.104L157.425 202.319L157.434 202.325L158.305 201.104ZM158.287 201.091L159.167 199.876L159.159 199.87L158.287 201.091ZM158.288 189.08L159.158 190.302C159.165 190.297 159.172 190.292 159.179 190.286L158.288 189.08ZM158.305 189.067L157.434 187.846C157.427 187.85 157.421 187.855 157.414 187.86L158.305 189.067ZM174.18 177.741L175.051 178.962C175.445 178.681 175.68 178.226 175.68 177.741H174.18ZM174.848 172.69L173.976 173.91L173.977 173.911L174.848 172.69ZM190.054 183.538L190.934 182.323L190.925 182.317L190.054 183.538ZM190.072 183.551L189.192 184.766L189.203 184.774L190.072 183.551ZM190.071 195.562L189.201 194.34C189.194 194.345 189.188 194.35 189.181 194.355L190.071 195.562ZM175.051 208.122L190.925 196.796L189.183 194.354L173.308 205.679L175.051 208.122ZM175.68 211.604V206.901H172.68V211.604H175.68ZM172.639 213.173C173.929 214.094 175.68 213.15 175.68 211.604H172.68C172.68 210.751 173.654 210.211 174.383 210.732L172.639 213.173ZM157.434 202.325L172.64 213.173L174.382 210.731L159.176 199.883L157.434 202.325ZM157.407 202.305L157.425 202.319L159.185 199.889L159.167 199.876L157.407 202.305ZM156.538 200.605C156.538 201.281 156.863 201.917 157.415 202.312L159.159 199.87C159.398 200.041 159.538 200.316 159.538 200.605H156.538ZM156.538 200.6V200.605H159.538V200.6H156.538ZM156.538 189.57V200.6H159.538V189.57H156.538ZM156.538 189.566V189.57H159.538V189.566H156.538ZM157.418 187.857C156.864 188.252 156.538 188.889 156.538 189.566H159.538C159.538 189.856 159.398 190.131 159.158 190.302L157.418 187.857ZM157.414 187.86L157.397 187.873L159.179 190.286L159.196 190.274L157.414 187.86ZM173.308 176.52L157.434 187.846L159.176 190.288L175.051 178.962L173.308 176.52ZM172.68 173.038V177.741H175.68V173.038H172.68ZM175.72 171.469C174.43 170.548 172.68 171.492 172.68 173.038H175.68C175.68 173.891 174.705 174.431 173.976 173.91L175.72 171.469ZM190.925 182.317L175.719 171.469L173.977 173.911L189.183 184.759L190.925 182.317ZM190.953 182.337L190.934 182.323L189.174 184.753L189.192 184.766L190.953 182.337ZM191.822 184.036C191.822 183.363 191.498 182.724 190.941 182.328L189.203 184.774C188.96 184.601 188.822 184.324 188.822 184.036H191.822ZM191.822 184.042V184.036H188.822V184.042H191.822ZM191.822 195.071V184.042H188.822V195.071H191.822ZM191.822 195.076V195.071H188.822V195.076H191.822ZM190.941 196.785C191.495 196.39 191.822 195.752 191.822 195.076H188.822C188.822 194.786 188.961 194.511 189.201 194.34L190.941 196.785ZM190.945 196.782L190.962 196.769L189.181 194.355L189.164 194.368L190.945 196.782Z" fill="#DFE3E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M236.947 145.308H111.452C108.452 145.308 106.02 147.74 106.02 150.741V233.985C106.02 236.986 108.452 239.418 111.452 239.418H236.947C239.947 239.418 242.38 236.986 242.38 233.985V150.741C242.38 147.74 239.947 145.308 236.947 145.308ZM109.279 150.741C109.279 149.541 110.252 148.568 111.452 148.568H236.947C238.147 148.568 239.12 149.541 239.12 150.741V233.985C239.12 235.185 238.147 236.158 236.947 236.158H111.452C110.252 236.158 109.279 235.185 109.279 233.985V150.741Z" fill="#DFE3E8"/>
+<circle cx="272.814" cy="31.0862" r="6.5" transform="rotate(-58 272.814 31.0862)" stroke="#DFE3E8" stroke-width="3"/>
+<path d="M269.32 17.8078L270.476 15.9575C270.911 15.2615 271.76 15.0988 272.345 15.4639L287.909 25.1895C288.493 25.5546 288.72 26.3898 288.285 27.0858L287.129 28.9361C286.694 29.6321 285.844 29.7949 285.259 29.4297L269.695 19.7042C269.111 19.339 268.885 18.5038 269.32 17.8078Z" stroke="#DFE3E8" stroke-width="3"/>
+<path d="M271.277 14.9443L270.425 8.22099" stroke="#DFE3E8" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M268.414 18.3138L262.372 20.4343L268.414 18.3138Z" stroke="#DFE3E8" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="283.883" cy="13.9734" r="6.5" transform="rotate(-58 283.883 13.9734)" stroke="#DFE3E8" stroke-width="3"/>
+</svg>