@xqmsg/ui-core 0.17.2 → 0.18.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.17.2",
+  "version": "0.18.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/icons/checkmark/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7467 0.127888C12.0291 0.33708 12.0836 0.729242 11.8685 1.00381L5.01133 9.75378C4.89891 9.89724 4.72822 9.98649 4.54313 9.99859C4.35804 10.0107 4.17659 9.94447 4.04542 9.81694L0.188288 6.06695C-0.0627627 5.82288 -0.0627627 5.42715 0.188288 5.18307C0.439339 4.939 0.846372 4.939 1.09742 5.18307L4.43443 8.42738L10.8458 0.246255C11.0609 -0.0283092 11.4643 -0.0813041 11.7467 0.127888Z" fill="black"/>
+</svg>

package/src/components/icons/checkmark/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ReactComponent as CheckmarkIcon } from './checkmark.svg';
+
+export interface CheckmarkProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `Checkmark` icon component
+ */
+export const Checkmark: React.FC<CheckmarkProps> = ({ boxSize }) => {
+  return <CheckmarkIcon boxSize={boxSize} />;
+};

package/src/components/icons/chevron/down/chevron-down.svg

@@ -1,3 +1,3 @@
 <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.184136 0.767507C0.422999 0.537831 0.802824 0.545278 1.0325 0.784142L4 3.93434L6.9675 0.784142C7.19718 0.545279 7.577 0.537831 7.81587 0.767507C8.05473 0.997183 8.06218 1.37701 7.8325 1.61587L4.4325 5.21587C4.31938 5.33352 4.16321 5.40001 4 5.40001C3.83679 5.40001 3.68062 5.33352 3.5675 5.21587L0.167501 1.61587C-0.0621751 1.37701 -0.0547276 0.997183 0.184136 0.767507Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.184136 0.767507C0.422999 0.537831 0.802824 0.545278 1.0325 0.784142L4 3.93434L6.9675 0.784142C7.19718 0.545279 7.577 0.537831 7.81587 0.767507C8.05473 0.997183 8.06218 1.37701 7.8325 1.61587L4.4325 5.21587C4.31938 5.33352 4.16321 5.40001 4 5.40001C3.83679 5.40001 3.68062 5.33352 3.5675 5.21587L0.167501 1.61587C-0.0621751 1.37701 -0.0547276 0.997183 0.184136 0.767507Z" fill="#3C3C432E"/>
 </svg>

package/src/components/icons/chevron/right/chevron-right.svg

@@ -1,3 +1,3 @@
 <svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.767599 7.81586C0.537923 7.577 0.54537 7.19718 0.784233 6.9675L3.93443 4L0.784233 1.0325C0.54537 0.802823 0.537922 0.422997 0.767598 0.184134C0.997274 -0.0547285 1.3771 -0.0621767 1.61596 0.167499L5.21596 3.5675C5.33361 3.68062 5.4001 3.83679 5.4001 4C5.4001 4.16321 5.33361 4.31938 5.21596 4.4325L1.61596 7.8325C1.3771 8.06218 0.997275 8.05473 0.767599 7.81586Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.767599 7.81586C0.537923 7.577 0.54537 7.19718 0.784233 6.9675L3.93443 4L0.784233 1.0325C0.54537 0.802823 0.537922 0.422997 0.767598 0.184134C0.997274 -0.0547285 1.3771 -0.0621767 1.61596 0.167499L5.21596 3.5675C5.33361 3.68062 5.4001 3.83679 5.4001 4C5.4001 4.16321 5.33361 4.31938 5.21596 4.4325L1.61596 7.8325C1.3771 8.06218 0.997275 8.05473 0.767599 7.81586Z" fill="#3C3C432E"/>
 </svg>

package/src/components/icons/folder/add/outline/folder-add-outline.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 5V9M9 7H5M7.70711 2.20711L6.29289 0.792893C6.10536 0.605357 5.851 0.5 5.58579 0.5H2C1.17157 0.5 0.5 1.17157 0.5 2V10C0.5 10.8284 1.17157 11.5 2 11.5H12C12.8284 11.5 13.5 10.8284 13.5 10V4C13.5 3.17157 12.8284 2.5 12 2.5H8.41421C8.149 2.5 7.89464 2.39464 7.70711 2.20711Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 5V9M9 7H5M7.70711 2.20711L6.29289 0.792893C6.10536 0.605357 5.851 0.5 5.58579 0.5H2C1.17157 0.5 0.5 1.17157 0.5 2V10C0.5 10.8284 1.17157 11.5 2 11.5H12C12.8284 11.5 13.5 10.8284 13.5 10V4C13.5 3.17157 12.8284 2.5 12 2.5H8.41421C8.149 2.5 7.89464 2.39464 7.70711 2.20711Z" stroke="#3C3C4399" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/components/icons/google/index.tsx

@@ -9,5 +9,5 @@ export interface GoogleProps {
  * A functional React component utilized to render the `Google` icon component
  */
 export const Google: React.FC<GoogleProps> = ({ boxSize }) => {
-  return <GoogleLogo boxSize={boxSize} />;
+  return <GoogleLogo width={boxSize} height={boxSize} />;
 };

package/src/components/icons/index.tsx

@@ -1,3 +1,4 @@
+import { Checkmark } from './checkmark';
 import { ChevronDown } from './chevron/down';
 import { ChevronRight } from './chevron/right';
 import { Clock } from './clock';
@@ -27,6 +28,7 @@ import { Trash } from './trash';
 import { Warning } from './warning';
 
 export {
+  Checkmark,
   ChevronDown,
   ChevronRight,
   Clock,

package/src/components/icons/search/search.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.2001 1.8C3.77005 1.8 1.8001 3.76995 1.8001 6.2C1.8001 8.63005 3.77005 10.6 6.2001 10.6C7.41529 10.6 8.51447 10.1082 9.31137 9.31127C10.1083 8.51437 10.6001 7.41519 10.6001 6.2C10.6001 3.76995 8.63015 1.8 6.2001 1.8ZM0.600098 6.2C0.600098 3.10721 3.1073 0.6 6.2001 0.6C9.29289 0.6 11.8001 3.10721 11.8001 6.2C11.8001 7.53002 11.3358 8.75245 10.5615 9.71285L13.2244 12.3757C13.4587 12.6101 13.4587 12.9899 13.2244 13.2243C12.99 13.4586 12.6101 13.4586 12.3758 13.2243L9.71295 10.5614C8.75255 11.3358 7.53012 11.8 6.2001 11.8C3.1073 11.8 0.600098 9.29279 0.600098 6.2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.2001 1.8C3.77005 1.8 1.8001 3.76995 1.8001 6.2C1.8001 8.63005 3.77005 10.6 6.2001 10.6C7.41529 10.6 8.51447 10.1082 9.31137 9.31127C10.1083 8.51437 10.6001 7.41519 10.6001 6.2C10.6001 3.76995 8.63015 1.8 6.2001 1.8ZM0.600098 6.2C0.600098 3.10721 3.1073 0.6 6.2001 0.6C9.29289 0.6 11.8001 3.10721 11.8001 6.2C11.8001 7.53002 11.3358 8.75245 10.5615 9.71285L13.2244 12.3757C13.4587 12.6101 13.4587 12.9899 13.2244 13.2243C12.99 13.4586 12.6101 13.4586 12.3758 13.2243L9.71295 10.5614C8.75255 11.3358 7.53012 11.8 6.2001 11.8C3.1073 11.8 0.600098 9.29279 0.600098 6.2Z" fill="#3C3C4399"/>
 </svg>

package/src/components/icons/table/fill/table-fill.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.791992 2.19199C0.791992 1.19788 1.60589 0.400002 2.6 0.400002H13.4C14.3941 0.400002 15.2 1.20589 15.2 2.2L15.208 9.8C15.208 10.7941 14.4021 11.6 13.408 11.6C10.3413 11.6 5.67467 11.6 2.60801 11.6C1.6139 11.6 0.8 10.7861 0.8 9.79199L0.791992 2.19199ZM7.4 9.80801V9.30801C7.4 8.97664 7.13137 8.70801 6.8 8.70801H2.6C2.26863 8.70801 2 8.97664 2 9.30801V9.8C2 10.1314 2.26863 10.4 2.6 10.4H6.89827C7.18289 10.3531 7.4 10.1059 7.4 9.80801ZM8.6 9.80801C8.6 10.1059 8.81711 10.3531 9.10173 10.4H13.4C13.7314 10.4 14 10.1314 14 9.8V9.30801C14 8.97664 13.7314 8.70801 13.4 8.70801H9.2C8.86863 8.70801 8.6 8.97664 8.6 9.30801V9.80801ZM14 6.90401V6.40401C14 6.07264 13.7314 5.80401 13.4 5.80401H9.2C8.86863 5.80401 8.6 6.07264 8.6 6.40401V6.90401C8.6 7.23538 8.86863 7.50401 9.2 7.50401H13.4C13.7314 7.50401 14 7.23538 14 6.90401ZM7.4 6.90401V6.40401C7.4 6.07264 7.13137 5.80401 6.8 5.80401H2.6C2.26863 5.80401 2 6.07264 2 6.40401V6.90401C2 7.23538 2.26863 7.50401 2.6 7.50401H6.8C7.13137 7.50401 7.4 7.23538 7.4 6.90401ZM14 4V3.5C14 3.16863 13.7314 2.9 13.4 2.9H9.2C8.86863 2.9 8.6 3.16863 8.6 3.5V4C8.6 4.33137 8.86863 4.6 9.2 4.6H13.4C13.7314 4.6 14 4.33137 14 4ZM7.4 4V3.5C7.4 3.16863 7.13137 2.9 6.8 2.9H2.6C2.26863 2.9 2 3.16863 2 3.5V4C2 4.33137 2.26863 4.6 2.6 4.6H6.8C7.13137 4.6 7.4 4.33137 7.4 4Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.791992 2.19199C0.791992 1.19788 1.60589 0.400002 2.6 0.400002H13.4C14.3941 0.400002 15.2 1.20589 15.2 2.2L15.208 9.8C15.208 10.7941 14.4021 11.6 13.408 11.6C10.3413 11.6 5.67467 11.6 2.60801 11.6C1.6139 11.6 0.8 10.7861 0.8 9.79199L0.791992 2.19199ZM7.4 9.80801V9.30801C7.4 8.97664 7.13137 8.70801 6.8 8.70801H2.6C2.26863 8.70801 2 8.97664 2 9.30801V9.8C2 10.1314 2.26863 10.4 2.6 10.4H6.89827C7.18289 10.3531 7.4 10.1059 7.4 9.80801ZM8.6 9.80801C8.6 10.1059 8.81711 10.3531 9.10173 10.4H13.4C13.7314 10.4 14 10.1314 14 9.8V9.30801C14 8.97664 13.7314 8.70801 13.4 8.70801H9.2C8.86863 8.70801 8.6 8.97664 8.6 9.30801V9.80801ZM14 6.90401V6.40401C14 6.07264 13.7314 5.80401 13.4 5.80401H9.2C8.86863 5.80401 8.6 6.07264 8.6 6.40401V6.90401C8.6 7.23538 8.86863 7.50401 9.2 7.50401H13.4C13.7314 7.50401 14 7.23538 14 6.90401ZM7.4 6.90401V6.40401C7.4 6.07264 7.13137 5.80401 6.8 5.80401H2.6C2.26863 5.80401 2 6.07264 2 6.40401V6.90401C2 7.23538 2.26863 7.50401 2.6 7.50401H6.8C7.13137 7.50401 7.4 7.23538 7.4 6.90401ZM14 4V3.5C14 3.16863 13.7314 2.9 13.4 2.9H9.2C8.86863 2.9 8.6 3.16863 8.6 3.5V4C8.6 4.33137 8.86863 4.6 9.2 4.6H13.4C13.7314 4.6 14 4.33137 14 4ZM7.4 4V3.5C7.4 3.16863 7.13137 2.9 6.8 2.9H2.6C2.26863 2.9 2 3.16863 2 3.5V4C2 4.33137 2.26863 4.6 2.6 4.6H6.8C7.13137 4.6 7.4 4.33137 7.4 4Z" fill="#3C3C432E"/>
 </svg>

package/src/components/icons/table/outline/table-outline.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.25 11H12.75M1.25 11C0.835786 11 0.5 10.6642 0.5 10.25M1.25 11H6.25C6.66421 11 7 10.6642 7 10.25M0.5 10.25V1.75M0.5 10.25V9.25C0.5 8.83579 0.835787 8.5 1.25 8.5M13.5 10.25V1.75M13.5 10.25C13.5 10.6642 13.1642 11 12.75 11M13.5 10.25V9.25C13.5 8.83579 13.1642 8.5 12.75 8.5M12.75 11H7.75C7.33579 11 7 10.6642 7 10.25M13.5 1.75C13.5 1.33579 13.1642 1 12.75 1H1.25C0.835786 1 0.5 1.33579 0.5 1.75M13.5 1.75V2.75C13.5 3.16421 13.1642 3.5 12.75 3.5M0.5 1.75V2.75C0.5 3.16421 0.835786 3.5 1.25 3.5M1.25 3.5H12.75M1.25 3.5H6.25C6.66421 3.5 7 3.83579 7 4.25M1.25 3.5C0.835786 3.5 0.5 3.83579 0.5 4.25V5.25C0.5 5.66421 0.835787 6 1.25 6M12.75 3.5H7.75C7.33579 3.5 7 3.83579 7 4.25M12.75 3.5C13.1642 3.5 13.5 3.83579 13.5 4.25V5.25C13.5 5.66421 13.1642 6 12.75 6M1.25 6H6.25M1.25 6C0.835787 6 0.5 6.33579 0.5 6.75V7.75C0.5 8.16421 0.835787 8.5 1.25 8.5M7 5.25V4.25M7 5.25C7 5.66421 6.66421 6 6.25 6M7 5.25C7 5.66421 7.33579 6 7.75 6M6.25 6C6.66421 6 7 6.33579 7 6.75M7.75 6H12.75M7.75 6C7.33579 6 7 6.33579 7 6.75M12.75 6C13.1642 6 13.5 6.33579 13.5 6.75V7.75C13.5 8.16421 13.1642 8.5 12.75 8.5M1.25 8.5H6.25M7 7.75V6.75M7 7.75C7 8.16421 6.66421 8.5 6.25 8.5M7 7.75C7 8.16421 7.33579 8.5 7.75 8.5M6.25 8.5C6.66421 8.5 7 8.83579 7 9.25M7 10.25V9.25M7 9.25C7 8.83579 7.33579 8.5 7.75 8.5M7.75 8.5H12.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.25 11H12.75M1.25 11C0.835786 11 0.5 10.6642 0.5 10.25M1.25 11H6.25C6.66421 11 7 10.6642 7 10.25M0.5 10.25V1.75M0.5 10.25V9.25C0.5 8.83579 0.835787 8.5 1.25 8.5M13.5 10.25V1.75M13.5 10.25C13.5 10.6642 13.1642 11 12.75 11M13.5 10.25V9.25C13.5 8.83579 13.1642 8.5 12.75 8.5M12.75 11H7.75C7.33579 11 7 10.6642 7 10.25M13.5 1.75C13.5 1.33579 13.1642 1 12.75 1H1.25C0.835786 1 0.5 1.33579 0.5 1.75M13.5 1.75V2.75C13.5 3.16421 13.1642 3.5 12.75 3.5M0.5 1.75V2.75C0.5 3.16421 0.835786 3.5 1.25 3.5M1.25 3.5H12.75M1.25 3.5H6.25C6.66421 3.5 7 3.83579 7 4.25M1.25 3.5C0.835786 3.5 0.5 3.83579 0.5 4.25V5.25C0.5 5.66421 0.835787 6 1.25 6M12.75 3.5H7.75C7.33579 3.5 7 3.83579 7 4.25M12.75 3.5C13.1642 3.5 13.5 3.83579 13.5 4.25V5.25C13.5 5.66421 13.1642 6 12.75 6M1.25 6H6.25M1.25 6C0.835787 6 0.5 6.33579 0.5 6.75V7.75C0.5 8.16421 0.835787 8.5 1.25 8.5M7 5.25V4.25M7 5.25C7 5.66421 6.66421 6 6.25 6M7 5.25C7 5.66421 7.33579 6 7.75 6M6.25 6C6.66421 6 7 6.33579 7 6.75M7.75 6H12.75M7.75 6C7.33579 6 7 6.33579 7 6.75M12.75 6C13.1642 6 13.5 6.33579 13.5 6.75V7.75C13.5 8.16421 13.1642 8.5 12.75 8.5M1.25 8.5H6.25M7 7.75V6.75M7 7.75C7 8.16421 6.66421 8.5 6.25 8.5M7 7.75C7 8.16421 7.33579 8.5 7.75 8.5M6.25 8.5C6.66421 8.5 7 8.83579 7 9.25M7 10.25V9.25M7 9.25C7 8.83579 7.33579 8.5 7.75 8.5M7.75 8.5H12.75" stroke="#3C3C4399" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/components/input/Input.stories.tsx

@@ -142,6 +142,12 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         inputType="switch"
         setValue={form.setValue}
       />
+      <Input
+        {...args}
+        name="prop6"
+        inputType="checkbox"
+        setValue={form.setValue}
+      />
     </Form>
   );
 };

package/src/components/input/index.tsx

@@ -244,7 +244,6 @@ export function Input<T extends FieldValues>({
           isInvalid={isInvalid}
           position="relative"
           py={label || helperText || isInvalid ? 6 : 0}
-          pb={inputType === 'checkbox' ? 6 : 0}
         >
           {label && inputType !== 'checkbox' && (
             <Label

package/src/components/navigation/index.tsx

@@ -41,7 +41,7 @@ export const NavigationMenu: React.FC<NavigationMenuProps> = ({
       width="220px"
     >
       {sortedGroupedMenuItems?.map(menuItemGroup => (
-        <Box>
+        <Box _notLast={{ paddingBottom: '8px' }}>
           {menuItemGroup.groupHeader && (
             <NavigationMenuHeader label={menuItemGroup.groupHeader} />
           )}

package/src/components/toolbar/Toolbar.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { Box } from '@chakra-ui/react';
+import { Toolbar, ToolbarProps } from '.';
+import { useState } from '@storybook/addons';
+import { Button } from '../button';
+
+const meta: Meta<ToolbarProps> = {
+  title: 'Toolbar example',
+  component: Toolbar,
+  argTypes: {},
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<ToolbarProps> = args => {
+  const [currentPage, setCurrentPage] = useState('howdy');
+  const [searchValue, setSearchValue] = useState('');
+  const pageList = [
+    { label: 'hi', handler: () => setCurrentPage('hi') },
+    { label: 'hey', handler: () => setCurrentPage('hey') },
+    { label: 'hello', handler: () => setCurrentPage('hello') },
+    { label: 'howdy', handler: () => setCurrentPage('howdy') },
+  ];
+
+  const sortOptions = [
+    { label: 'Sort by', value: 'section_header', sortValue: 0 },
+    { label: 'Name', value: 'name', sortValue: 1 },
+    { label: 'Type', value: 'type', sortValue: 2 },
+    { label: 'Date Last Opened', value: 'date_last_opened', sortValue: 3 },
+    { label: 'Date Added', value: 'date_added', sortValue: 4 },
+    { label: 'Date Modified', value: 'date_modified', sortValue: 5 },
+    { label: 'Date Created', value: 'date_created', sortValue: 5 },
+    { label: 'Size', value: 'size', sortValue: 5 },
+  ];
+
+  return (
+    <Box>
+      <Toolbar
+        {...args}
+        pageList={pageList}
+        currentPage={currentPage}
+        searchValue={searchValue}
+        onChangeSearch={(value: string) => setSearchValue(value)}
+      >
+        <Button
+          variant="secondary"
+          text="Sign Out"
+          width="variable"
+          ariaLabel="button"
+        />
+      </Toolbar>
+    </Box>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/toolbar/components/actions/add/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import { FolderAddOutline } from 'src/components/icons';
+
+export interface AddProps {
+  onClick: () => void;
+}
+
+/**
+ * A functional React component utilized to render the `Add` component
+ */
+export const Add: React.FC<AddProps> = ({ onClick }) => {
+  return (
+    <Box mx="8px" cursor="pointer" onClick={onClick}>
+      <FolderAddOutline boxSize="16px" />
+    </Box>
+  );
+};

package/src/components/toolbar/components/actions/search/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Box, useMediaQuery } from '@chakra-ui/react';
+import { Search as SearchIcon } from '../../../../icons';
+import StackedInput from '../../../..//input/StackedInput/StackedInput';
+
+export interface SearchProps {
+  searchValue: string;
+  onClick: () => void;
+  onChange: (value: string) => void;
+}
+
+/**
+ * A functional React component utilized to render the `Search` component
+ */
+export const Search: React.FC<SearchProps> = ({
+  searchValue,
+  onClick,
+  onChange,
+}) => {
+  const [breakpoint600] = useMediaQuery('(max-width: 600px)');
+
+  return (
+    <Box>
+      {breakpoint600 ? (
+        <Box cursor="pointer" onClick={onClick}>
+          <SearchIcon boxSize="16px" />
+        </Box>
+      ) : (
+        <StackedInput
+          placeholder="Search..."
+          name="search"
+          value={searchValue}
+          onChange={e => onChange(e.target.value)}
+        />
+      )}
+    </Box>
+  );
+};

package/src/components/toolbar/components/actions/sort/index.tsx

@@ -0,0 +1,49 @@
+import React, { useRef, useState } from 'react';
+import { Box, Flex, useOutsideClick } from '@chakra-ui/react';
+import { ChevronDown, TableOutline } from '../../../../icons';
+import { Dropdown } from '../../dropdown';
+import { FieldOption, FieldOptions } from '../../../../input/InputTypes';
+
+export interface SortProps {
+  onSelectItem: (option: FieldOption) => void;
+  sortOptions: FieldOptions;
+}
+
+/**
+ * A functional React component utilized to render the `Sort` component
+ */
+export const Sort: React.FC<SortProps> = ({ onSelectItem, sortOptions }) => {
+  const dropdownMenuRef = useRef<HTMLDivElement>(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [optionIndex, setOptionIndex] = useState<number | null>(null);
+
+  useOutsideClick({
+    ref: dropdownMenuRef,
+    handler: () => setShowDropdown(false),
+  });
+
+  return (
+    <Box onClick={() => setShowDropdown(!showDropdown)} position="relative">
+      <Flex
+        alignItems="center"
+        cursor="pointer"
+        onClick={() => setShowDropdown(!showDropdown)}
+      >
+        <TableOutline boxSize="16px" />
+        <Box ml="2px">
+          <ChevronDown boxSize="12px" />
+        </Box>
+        {showDropdown && (
+          <Dropdown
+            onSelectItem={onSelectItem}
+            options={sortOptions}
+            position="top"
+            dropdownRef={dropdownMenuRef}
+            optionIndex={optionIndex}
+            setOptionIndex={setOptionIndex}
+          />
+        )}
+      </Flex>
+    </Box>
+  );
+};

package/src/components/toolbar/components/breadcrumbs/index.tsx

@@ -0,0 +1,63 @@
+import React, { useMemo, useCallback } from 'react';
+import { Box, Flex, useMediaQuery } from '@chakra-ui/react';
+import { ToolbarBreadcrumbItem } from './item';
+import { ToolbarLabelAndHandler } from '../..';
+import { ChevronRight } from '../../../../components/icons';
+
+export interface ToolbarBreadcrumbsProps {
+  pageList: ToolbarLabelAndHandler[];
+  currentPage: string;
+}
+
+/**
+ * A functional React component utilized to render the `ToolbarBreadcrumbs` component
+ */
+export const ToolbarBreadcrumbs: React.FC<ToolbarBreadcrumbsProps> = ({
+  pageList,
+  currentPage,
+}) => {
+  const [breakpoint400] = useMediaQuery('(max-width: 400px)');
+
+  const filteredPageList = useMemo(() => {
+    if (breakpoint400)
+      return pageList.filter(page => page.label === currentPage);
+
+    const sliceIndex = pageList.findIndex(page => page.label === currentPage);
+    return pageList.slice(0, sliceIndex + 1);
+  }, [breakpoint400, currentPage, pageList]);
+
+  const getPageType = useCallback(
+    (index: number) => {
+      switch (index) {
+        case filteredPageList.length - 1:
+          return 'current';
+        case filteredPageList.length - 2:
+          return 'previous';
+        case 0:
+          return 'initial';
+        default:
+          return 'other';
+      }
+    },
+    [filteredPageList]
+  );
+
+  return (
+    <Flex height="26px">
+      {filteredPageList.map((page, i) => (
+        <Flex alignItems="center">
+          <ToolbarBreadcrumbItem
+            page={getPageType(i)}
+            pageLabel={page.label}
+            onClick={page.handler}
+          />
+          {i !== filteredPageList.length - 1 && (
+            <Box mx="8px">
+              <ChevronRight boxSize="16px" />
+            </Box>
+          )}
+        </Flex>
+      ))}
+    </Flex>
+  );
+};

package/src/components/toolbar/components/breadcrumbs/item/index.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+import { Box, useMediaQuery } from '@chakra-ui/react';
+import colors from '../../../../../theme/foundations/colors';
+
+export interface ToolbarBreadcrumbItemProps {
+  pageLabel: string;
+  page: 'current' | 'previous' | 'initial' | 'other';
+  onClick: () => void;
+}
+
+/**
+ * A functional React component utilized to render the `ToolbarBreadcrumbItem` component
+ */
+export const ToolbarBreadcrumbItem: React.FC<ToolbarBreadcrumbItemProps> = ({
+  page,
+  pageLabel,
+  onClick,
+}) => {
+  const [breakpoint400] = useMediaQuery('(max-width: 400px)');
+  const [breakpoint600] = useMediaQuery('(max-width: 600px)');
+  const [breakpoint800] = useMediaQuery('(max-width: 800px)');
+  const [breakpoint1512] = useMediaQuery('(max-width: 1512px)');
+
+  const getPageLabel = useMemo(() => {
+    if (breakpoint400) {
+      if (page === 'current') {
+        console.log('hi');
+        return pageLabel;
+      }
+    }
+
+    if (breakpoint600) {
+      if (page === 'current' || page === 'previous') {
+        return pageLabel;
+      }
+
+      return '...';
+    }
+
+    if (breakpoint800 || breakpoint1512) {
+      if (page !== 'other') {
+        return pageLabel;
+      }
+
+      return '...';
+    }
+
+    return pageLabel;
+  }, [
+    breakpoint1512,
+    breakpoint400,
+    breakpoint600,
+    breakpoint800,
+    page,
+    pageLabel,
+  ]);
+
+  return (
+    <Box
+      color={
+        page === 'current'
+          ? colors.label.primary.light
+          : colors.label.secondary.light
+      }
+      fontSize="13px"
+      letterSpacing="0.02em"
+      onClick={onClick}
+      cursor="pointer"
+    >
+      {getPageLabel}
+    </Box>
+  );
+};

package/src/components/toolbar/components/dropdown/index.tsx

@@ -0,0 +1,107 @@
+import React, { RefObject, useMemo } from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import colors from '../../../../theme/foundations/colors';
+import { FieldOption, FieldOptions } from '../../../input/InputTypes';
+import { Checkmark } from '../../../icons';
+
+export interface DropdownProps {
+  onSelectItem: (option: FieldOption) => void;
+  options: FieldOptions;
+  dropdownRef: RefObject<HTMLDivElement>;
+  position: 'top' | 'bottom';
+  optionIndex: number | null;
+  setOptionIndex: React.Dispatch<React.SetStateAction<number | null>>;
+}
+
+/**
+ * A functional React component utilized to render the `Dropdown` component
+ */
+export const Dropdown: React.FC<DropdownProps> = ({
+  onSelectItem,
+  options,
+  dropdownRef,
+  position,
+  optionIndex,
+  setOptionIndex,
+}) => {
+  const DropdownContent = useMemo(() => {
+    return options.map((option, idx) => (
+      <>
+        {option.value === 'section_header' &&
+          options[idx + 1] &&
+          options[idx + 1].value !== 'section_header' && (
+            <Box
+              color={colors.label.secondary.light}
+              fontSize="13px"
+              width="fit-content"
+              fontWeight="bold"
+              px="8px"
+              pl="26px"
+              whiteSpace="nowrap"
+            >
+              {idx > 0 && (
+                <Box
+                  width="100%"
+                  my="3px"
+                  borderTop="2px solid"
+                  borderColor={colors.border.default}
+                />
+              )}
+              {option.label}
+            </Box>
+          )}
+        {option.value !== 'section_header' && (
+          <Flex
+            alignItems="center"
+            cursor="pointer"
+            onClick={() => {
+              setOptionIndex(idx);
+              onSelectItem(option);
+            }}
+            key={option.value}
+            fontSize="13px"
+            px="8px"
+            py="4px"
+            width="100%"
+            color={colors.label.primary.light}
+            whiteSpace="nowrap"
+            id={option.value}
+          >
+            <Box mr="8px" width="12px">
+              {optionIndex === idx && <Checkmark boxSize="12px" />}
+            </Box>
+
+            {option.label}
+          </Flex>
+        )}
+      </>
+    ));
+  }, [onSelectItem, optionIndex, options, setOptionIndex]);
+
+  return (
+    <Flex
+      flexDirection="column"
+      ref={dropdownRef}
+      scrollMargin="15px"
+      backdropFilter="auto"
+      backdropBlur="64px"
+      borderRadius="4px"
+      bg={colors.fill.light.tertiary}
+      mt="3px"
+      maxH="240px"
+      overflowY="auto"
+      px="8px"
+      py="4px"
+      position="absolute"
+      top={position === 'top' ? 26 : undefined}
+      bottom={position === 'bottom' ? 30 : undefined}
+      right={0}
+      width="fit-content"
+      minWidth="100%"
+      zIndex={100}
+      tabIndex={-2000}
+    >
+      {DropdownContent}
+    </Flex>
+  );
+};

package/src/components/toolbar/index.tsx

@@ -0,0 +1,37 @@
+import React, { PropsWithChildren } from 'react';
+import { Flex } from '@chakra-ui/react';
+import { ToolbarBreadcrumbs } from './components/breadcrumbs';
+
+export type ToolbarLabelAndHandler = { label: string; handler: () => void };
+
+export interface ToolbarProps extends PropsWithChildren {
+  pageList: ToolbarLabelAndHandler[];
+  currentPage: string;
+  searchValue: string;
+
+  onChangeSearch: (value: string) => void;
+}
+
+/**
+ * A functional React component utilized to render the `Toolbar` component
+ */
+export const Toolbar: React.FC<ToolbarProps> = ({
+  children,
+  pageList,
+  currentPage,
+}) => {
+  return (
+    <Flex flexDirection="column">
+      <Flex
+        height="52px"
+        px="13px"
+        alignItems="center"
+        justifyContent="space-between"
+        background="white"
+      >
+        <ToolbarBreadcrumbs pageList={pageList} currentPage={currentPage} />
+        <Flex alignItems="center">{children} </Flex>
+      </Flex>
+    </Flex>
+  );
+};

package/src/index.tsx

@@ -51,6 +51,9 @@ export * from './components/text';
 // Theme Provider
 export * from './theme/provider';
 
+// Toolbar
+export * from './components/toolbar';
+
 // Hooks
 
 //Utils