@veracity/vui 2.1.0 → 2.3.0

package/dist/esm/tree/treeItem.js

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import { Box } from '../box';
+import { styled, useStyleConfig, vui } from '../core';
+import { cs, isArray, isReactText } from '../utils';
+import { useTreeContext } from './context';
+import TreeIcon from './treeIcon';
+import TreeText from './treeText';
+export const TreeItemBase = styled.divBox `
+  display: flex;
+  flex-direction: column;
+  line-height: normal;
+  outline: none;
+  align-content: flex-start;
+  align-items: flex-start;
+  overflow: visible;
+  height: auto;
+
+  & [aria-disabled='true'] {
+    cursor: not-allowed;
+    user-select: none;
+  }
+`;
+/**
+ * Displays a tree item with text and optional icons. Can be shown as selected.
+ */
+export const TreeItem = vui((props, ref) => {
+    const mergedProps = { ...useTreeContext(), ...props };
+    const { activeItemId, activeItemIndex, children, center, centerH, centerV = true, className, iconCollapse = 'falMinus', isCollapsed, disabled, iconExpand = 'falPlus', id, items, isActive, isTruncated, key, onClickTreeItem, onToggle, text, ...rest } = mergedProps;
+    const styles = useStyleConfig('Tree', useTreeContext());
+    const { activeBg, h, hoverBg, p, px, py, selectedBg, ...itemStyles } = styles.item;
+    const [collapsedInternal, setIsCollapsedInternal] = useState(false);
+    useEffect(() => {
+        setIsCollapsedInternal(!!isCollapsed);
+    }, [isCollapsed]);
+    const toggle = (e) => {
+        if (!disabled) {
+            onToggle?.({ id, collapsed: !collapsedInternal });
+            setIsCollapsedInternal(!collapsedInternal);
+        }
+        const target = e.target;
+        const active = target?.closest('.vui-tree')?.getElementsByClassName('vui-treeItem-active')[0];
+        active ? (active.style.backgroundColor = 'transparent') : null;
+        onClickTreeItem?.(id);
+        // Avoids triggering parent's onClick
+        e.stopPropagation();
+    };
+    const interactiveProps = !disabled
+        ? {
+            cursor: 'pointer',
+            focusVisibleRing: 2,
+            hoverBg: 'transparent',
+            activeBg: 'transparent',
+            userSelect: 'none'
+        }
+        : {};
+    const hoverTreeItem = (e, type) => {
+        const target = e.target;
+        if (target.classList.contains('vui-treeItem-permanent')) {
+            target.style.backgroundColor = type === 'over' ? '#e2f1ff' : 'transparent';
+            e.stopPropagation();
+        }
+        else {
+            e.preventDefault();
+            const permanent = target
+                .closest('.vui-treeItem')
+                ?.getElementsByClassName('vui-treeItem-permanent')[0];
+            const collapsible = target
+                .closest('.vui-treeItem')
+                ?.getElementsByClassName('vui-treeItem-collapsible')[0];
+            const active = target.closest('.vui-treeItem')?.getElementsByClassName('vui-treeItem-active')[0];
+            permanent ? (permanent.style.backgroundColor = type === 'over' ? '#e2f1ff' : 'transparent') : null;
+            collapsible ? (collapsible.style.backgroundColor = 'transparent') : null;
+            active ? (active.style.backgroundColor = 'hsl(139, 100%, 90%)') : null;
+        }
+    };
+    const isCollapsable = (isArray(children) && children.length > 0) || (isArray(items) && items.length > 0);
+    const isActiveInternal = (!activeItemIndex && isActive) || activeItemIndex === id;
+    return (React.createElement(TreeItemBase, { alignItems: "start", className: cs('vui-treeItem', className), h: collapsedInternal ? h : isCollapsable ? 'auto' : h, id: id, m: 0, onClick: !disabled ? (e) => toggle(e) : undefined, onMouseOut: !disabled ? (e) => hoverTreeItem(e, 'out') : undefined, onMouseOver: !disabled ? (e) => hoverTreeItem(e, 'over') : undefined, p: 0, ref: ref, w: 1, ...itemStyles, ...interactiveProps, ...rest, hoverBg: "transparent" },
+        React.createElement(Box, { flexDirection: "column", hoverBg: "transparent", m: 0, pl: 2, pr: 0, py: py, w: 1 },
+            React.createElement(Box, { alignItems: "center", bg: isActiveInternal ? 'hsl(139, 100%, 90%)' : 'transparent', className: isActiveInternal ? 'vui-treeItem-active' : 'vui-treeItem-permanent', flexDirection: "row", hoverBg: "transparent", m: 0, p: 0, w: 1 },
+                items && items?.length > 0 && (React.createElement(React.Fragment, null, collapsedInternal ? React.createElement(TreeIcon, { mr: 1, name: iconExpand }) : React.createElement(TreeIcon, { mr: 1, name: iconCollapse }))),
+                items?.length === 0 && React.createElement(TreeIcon, { mr: 1, name: "cusDotFullAlt" }),
+                isReactText(text) ? React.createElement(TreeText, { ...{ isTruncated, text } }) : text),
+            isCollapsable && !collapsedInternal && (React.createElement(Box, { className: "vui-treeItem-collapsible", flexDirection: "column", hoverBg: "transparent", m: 0, p: 0, w: 1 }, children ??
+                (isArray(items)
+                    ? items.map(({ key, ...props }, index) => {
+                        return (React.createElement(TreeItem, { activeItemIndex: activeItemIndex, iconCollapse: iconCollapse, iconExpand: iconExpand, key: key ?? index, onClickTreeItem: onClickTreeItem, ...props }));
+                    })
+                    : items))))));
+});
+export default TreeItem;

package/dist/esm/tree/treeText.d.ts

@@ -0,0 +1,5 @@
+import { TProps } from '../t';
+/** Displays text within the TreeItem. */
+export declare const TreeText: import("../core").VuiComponent<"span", TProps>;
+export default TreeText;
+//# sourceMappingURL=treeText.d.ts.map

package/dist/esm/tree/treeText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeText.d.ts","sourceRoot":"","sources":["../../../src/tree/treeText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,yCAAyC;AACzC,eAAO,MAAM,QAAQ,gDAenB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/esm/tree/treeText.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useStyleConfig, vui } from '../core';
+import T from '../t';
+import { cs, ellipsisOverflow } from '../utils';
+import { useTreeContext } from './context';
+/** Displays text within the TreeItem. */
+export const TreeText = vui((props, ref) => {
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('Tree', useTreeContext());
+    return (React.createElement(T, { className: cs('vui-treeText', className), fontSize: "inherit", py: styles.item.py, ref: ref, ...ellipsisOverflow, ...styles.text, ...rest }));
+});
+export default TreeText;

package/dist/esm/tree/useTreeState.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TreeItemId, TreeItemProps } from './tree.types';
+export declare const useTreeState: (activeItemId?: TreeItemId) => {
+    itemsInternal: TreeItemProps[];
+    setItemsInternal: import("react").Dispatch<import("react").SetStateAction<TreeItemProps[]>>;
+    activeItemIndex: TreeItemId;
+    setActiveItemIndex: import("react").Dispatch<import("react").SetStateAction<TreeItemId>>;
+};
+//# sourceMappingURL=useTreeState.d.ts.map

package/dist/esm/tree/useTreeState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTreeState.d.ts","sourceRoot":"","sources":["../../../src/tree/useTreeState.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAExD,eAAO,MAAM,YAAY,kBAAmB,UAAU;;;;;CAKrD,CAAA"}

package/dist/esm/tree/useTreeState.js

@@ -0,0 +1,6 @@
+import { useState } from 'react';
+export const useTreeState = (activeItemId) => {
+    const [itemsInternal, setItemsInternal] = useState([]);
+    const [activeItemIndex, setActiveItemIndex] = useState(activeItemId ?? '');
+    return { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/avatar/avatar.tsx

@@ -3,10 +3,19 @@ import React from 'react'
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
 import Icon from '../icon'
 import Image from '../image'
-import { cs } from '../utils'
+import { cs, filterUndefined } from '../utils'
 import { AvatarProps } from './avatar.types'
 import { defaultGetInitials } from './helpers'
 
+function imageExists(image_url: string) {
+  const http = new XMLHttpRequest()
+
+  http.open('HEAD', image_url, false)
+  http.send()
+
+  return http.status !== 404
+}
+
 export const AvatarBase = styled.spanBox`
   align-items: center;
   display: inline-flex;
@@ -21,6 +30,12 @@ export const AvatarBase = styled.spanBox`
   &:focus {
     border-color: transparent;
   }
+
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    user-select: none;
+  }
 `
 
 /** Displays user data, such as name initials or profile image. */
@@ -28,6 +43,7 @@ export const Avatar = vui<'span', AvatarProps>((props, ref) => {
   const {
     children,
     className,
+    disabled,
     getInitials = defaultGetInitials,
     icon,
     isInteractive = props.onClick !== undefined,
@@ -38,19 +54,29 @@ export const Avatar = vui<'span', AvatarProps>((props, ref) => {
   } = omitThemingProps(props)
   const { activeBg, h, hoverBg, iconSize, ...styles } = useStyleConfig('Avatar', props)
 
-  const borderRadius = isSquare ? 'none' : '50%'
+  const borderRadius = isSquare ? (props.size === 'sm' ? '3px' : '6px') : '50%'
   const initials = getInitials(name)
 
-  const interactiveProps = isInteractive
-    ? ({
-        cursor: 'pointer',
-        hoverBg,
-        activeBg,
-        focusRing: 3,
-        tabIndex: 0,
-        userSelect: 'none'
-      } as const)
-    : {}
+  const internalIcon = src && !imageExists(src) ? 'falUser' : icon
+
+  const interactiveProps =
+    !disabled && isInteractive
+      ? ({
+          cursor: 'pointer',
+          hoverBg,
+          hoverOpacity: src ? 0.85 : 1,
+          activeOpacity: src ? 0.7 : 1,
+          activeBg,
+          focusRing: 3,
+          tabIndex: 0,
+          userSelect: 'none'
+        } as const)
+      : {}
+
+  const aliasedProps = filterUndefined({
+    borderRadius: borderRadius,
+    'aria-disabled': disabled
+  })
 
   return (
     <AvatarBase
@@ -61,14 +87,15 @@ export const Avatar = vui<'span', AvatarProps>((props, ref) => {
       w={h}
       {...styles}
       {...interactiveProps}
+      {...aliasedProps}
       {...rest}
     >
       {children ? (
         children
-      ) : src ? (
+      ) : src && imageExists(src) ? (
         <Image {...{ borderRadius, src }} />
-      ) : icon ? (
-        <Icon name={icon} size={iconSize} />
+      ) : internalIcon ? (
+        <Icon name={internalIcon} size={iconSize} />
       ) : initials ? (
         initials
       ) : null}

package/src/avatar/avatar.types.ts

@@ -4,8 +4,10 @@ import { ThemingProps } from '../theme'
 
 export type AvatarProps = SystemProps &
   ThemingProps<'Avatar'> & {
-    /** Available theme colors for this component. @default blue */
+    /** Available theme colors for this component. @deprecated */
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow'
+    /** Displays avatar in disabled state with appropriate styling. */
+    disabled?: boolean
     /** Custom function to compute initials based on the provided name. */
     getInitials?: (name: string) => string
     /** Renders an icon as the only content. */

package/src/avatar/theme.ts

@@ -1,99 +1,154 @@
-import { Dict } from '../utils'
-
-function variantSolid(props: Dict) {
-  const { colorScheme: c } = props
-
-  const styles = {
-    hoverBg: `${c}.90`,
-    activeBg: `${c}.100`,
-    bg: `${c}.80`,
-    color: 'white'
-  }
-
-  // Special cases
-  if (c === 'prussian') {
-    styles.activeBg = 'prussian.50'
-    styles.hoverBg = 'prussian.60'
-  }
-
-  if (c === 'yellow') {
-    styles.hoverBg = `${c}.80`
-    styles.activeBg = `${c}.90`
-    styles.bg = `${c}.70`
-  }
-
-  return styles
-}
-
-function variantSubtle(props: Dict) {
-  const { colorScheme: c } = props
-
-  const colors = {
-    hoverBg: `${c}.30`,
-    activeBg: `${c}.40`,
-    bg: `${c}.20`,
-    color: `${c}.80`
-  }
-
-  // Special cases
-  if (c === 'green') {
-    colors.color = `${c}.90`
-  }
-
-  if (c === 'grey') {
-    colors.color = `prussian.80`
-  }
-
-  if (c === 'red') {
-    colors.color = `${c}.90`
-  }
-
-  if (c === 'yellow') {
-    colors.color = `${c}.100`
-  }
-
-  return colors
-}
-
 const baseStyle = {}
 
 const defaultProps = {
-  colorScheme: 'blue',
   size: 'md',
-  variant: 'subtle'
+  variant: 'subtleGrey',
+  fontWeight: 'medium'
 }
 
 const sizes = {
-  xs: {
+  sm: {
     fontSize: 'xs',
     h: 24,
     iconSize: 'xs'
   },
-  sm: {
+  md: {
     fontSize: 'sm',
     h: 32,
     iconSize: 'sm'
   },
-  md: {
+  lg: {
     fontSize: 'md',
     h: 40,
     iconSize: 'md'
   },
-  lg: {
+  xl: {
     fontSize: 'lg',
     h: 48,
-    iconSize: 'lg'
+    iconSize: 'xl'
   },
-  xl: {
+  xxl: {
     fontSize: 'lg',
-    h: 64,
-    iconSize: 'lg'
+    h: 56,
+    iconSize: 'xxl'
   }
 }
 
 const variants = {
-  solid: variantSolid,
-  subtle: variantSubtle
+  subtleGrey: {
+    bg: 'sandstone.90',
+    hoverBg: 'sandstone.85',
+    borderColor: 'sandstone.90',
+    color: 'sandstone.20',
+    activeBg: 'sandstone.79'
+  },
+  subtleBlue: {
+    bg: 'skyBlue.95',
+    hoverBg: 'skyBlue.90',
+    activeBg: 'skyBlue.85',
+    borderColor: 'skyBlue.95',
+    color: 'seaBlue.28'
+  },
+  subtleRed: {
+    bg: 'energyRed.95',
+    borderColor: 'energyRed.95',
+    hoverBg: 'energyRed.90',
+    activeBg: 'energyRed.85',
+    color: 'energyRed.45'
+  },
+  subtleYellow: {
+    bg: 'sunflower.85',
+    hoverBg: 'sunflower.70',
+    activeBg: 'sunflower.65',
+    borderColor: 'sunflower.85',
+    color: 'sunflower.20'
+  },
+  subtleGreen: {
+    bg: 'landGreen.95',
+    hoverBg: 'landGreen.90',
+    borderColor: 'landGreen.95',
+    color: 'landGreen.30',
+    activeBg: 'landGreen.85'
+  },
+  subtleLavender: {
+    bg: 'hsl(232, 58%, 90%)',
+    hoverBg: 'hsl(232, 58%, 85%)',
+    borderColor: 'hsl(232, 58%, 90%)',
+    color: 'hsl(232, 58%, 50%)',
+    activeBg: 'hsl(232, 58%, 80%)'
+  },
+  subtleEucalyptus: {
+    bg: 'hsl(178, 80%, 85%)',
+    hoverBg: 'hsl(178, 80%, 80%)',
+    borderColor: 'hsl(178, 80%, 85%)',
+    color: 'hsl(178, 80%, 20%)',
+    activeBg: 'hsl(178, 80%, 75%)'
+  },
+  subtleTerracotta: {
+    bg: 'hsl(34, 100%, 85%)',
+    hoverBg: 'hsl(34, 100%, 80%)',
+    borderColor: 'hsl(34, 100%, 85%)',
+    color: 'hsl(34, 100%, 20%)',
+    activeBg: 'hsl(34, 100%, 75%)'
+  },
+
+  /** solids next */
+  solidBlue: {
+    bg: 'seaBlue.28',
+    hoverBg: 'seaBlue.35',
+    activeBg: 'seaBlue.40',
+    borderColor: 'seaBlue.28',
+    color: 'white'
+  },
+  solidDarkBlue: {
+    bg: 'darkBlue.18',
+    hoverBg: 'darkBlue.25',
+    activeBg: 'darkBlue.35',
+    borderColor: 'darkBlue.18',
+    color: 'white'
+  },
+  solidRed: {
+    bg: 'energyRed.45',
+    hoverBg: 'energyRed.54',
+    activeBg: 'energyRed.60',
+    borderColor: 'energyRed.45',
+    color: 'white'
+  },
+  solidYellow: {
+    bg: 'sunflower.50',
+    hoverBg: 'sunflower.80',
+    activeBg: 'sunflower.85',
+    borderColor: 'sunflower.50',
+    color: 'sunflower.15'
+  },
+  solidGreen: {
+    bg: 'landGreen.35',
+    hoverBg: 'landGreen.41',
+    activeBg: 'landGreen.45',
+    borderColor: 'landGreen.35',
+    color: 'white'
+  },
+  solidLavender: {
+    bg: 'hsl(232, 58%, 60%)',
+    hoverBg: 'hsl(232, 58%, 65%)',
+    borderColor: 'hsl(232, 58%, 60%)',
+    color: 'white',
+    activeBg: 'hsl(232, 58%, 70%)'
+  },
+  solidEucalyptus: {
+    bg: 'hsl(178, 80%, 25%)',
+    hoverBg: 'hsl(178, 80%, 35%)',
+    borderColor: 'hsl(178, 80%, 25%)',
+    color: 'white',
+    activeBg: 'hsl(178, 80%, 42%)'
+  },
+  solidTerracotta: {
+    bg: 'hsl(34, 100%, 35%)',
+    hoverBg: 'hsl(34, 100%, 40%)',
+    borderColor: 'hsl(34, 100%, 35%)',
+    color: 'white',
+    activeBg: 'hsl(34, 100%, 45%)'
+  }
 }
 
 export default {

package/src/badge/theme.ts

@@ -2,7 +2,8 @@ const baseStyle = {}
 
 const defaultProps = {
   size: 'md',
-  variant: 'subtleSandstone'
+  variant: 'subtleSandstone',
+  fontWeight: 'medium'
 }
 
 const parts = ['container', 'icon', 'text']

package/src/button/theme.ts

@@ -2,7 +2,8 @@ const baseStyle = {}
 
 const defaultProps = {
   size: 'md',
-  variant: 'primaryDark'
+  variant: 'primaryDark',
+  fontWeight: 'medium'
 }
 
 const parts = ['container', 'icon', 'text']

package/src/divider/divider.tsx

@@ -5,7 +5,7 @@ import { cs, filterUndefined } from '../utils'
 import { DividerProps } from './divider.types'
 
 export const DividerBase = styled.hrBox`
-  border-color: grey.30;
+  border-color: sandstone.90;
 `
 
 /** Visually separates content with a horizontal or vertical line. */

package/src/dragAndDrop/dragAndDrop.tsx

@@ -17,7 +17,7 @@ const DragAndDropBase = styled.labelBox`
   justify-content: center;
 `
 
-/** [Beta] Prepares uploading files by selecting or dragging. */
+/** Prepares uploading files by selecting or dragging. */
 export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
   const {
     accept,
@@ -51,12 +51,12 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
 
   return (
     <DragAndDropBase
-      bg={disabled ? 'grey.20' : 'blue.20'}
       className={cs('vui-drag-and-drop', className)}
       cursor={disabled ? 'not-allowed' : 'pointer'}
       onDragEnter={e => e.preventDefault()}
       onDragOver={e => e.preventDefault()}
       onDrop={e => handleDrop(e)}
+      opacity={disabled ? 0.5 : 1}
       p={5}
       pointerEvents={disabled ? 'none' : 'auto'}
       ref={ref}
@@ -64,7 +64,7 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
       {...rest}
     >
       {children || (
-        <T color={disabled ? 'grey.50' : 'auto'} display="flex">
+        <T display="flex">
           <Icon mr={1} name={icon} />
           {text}
         </T>

package/src/dragAndDrop/dragAndDrop.types.ts

@@ -2,7 +2,7 @@ import { BoxProps } from '../box'
 import { IconProp } from '../icon'
 import { ThemingProps } from '../theme'
 
-export type DragAndDropProps = BoxProps &
+export type DragAndDropProps = Omit<BoxProps, 'variant'> &
   ThemingProps<'DragAndDrop'> & {
     /** A string that defines the file types the file input should accept. This string is a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
     accept?: string

package/src/dragAndDrop/theme.ts

@@ -1,10 +1,31 @@
-const baseStyle = {}
+const colors = {
+  bg: 'skyBlue.95',
+  main: 'seaBlue.28',
+  hover: 'skyBlue.90'
+}
 
-const defaultProps = {}
+const baseStyle = {
+  borderWidth: 2,
+  borderStyle: 'solid',
+  borderColor: 'transparent',
+  bg: colors.bg,
+  color: colors.main,
+  hoverBg: colors.hover
+}
+
+const defaultProps = {
+  variant: 'default'
+}
 
 const sizes = {}
 
-const variants = {}
+const variants = {
+  default: {},
+  outlined: {
+    borderColor: colors.main,
+    borderStyle: 'dashed'
+  }
+}
 
 export default {
   baseStyle,

package/src/header/headerAccountUserInfo.tsx

@@ -27,10 +27,10 @@ export const HeaderAccountUserInfo = vui<'div', HeaderAccountUserInfoProps>((pro
         <>
           <Avatar
             className="vui-headerAccountUserInfoAvatar"
-            colorScheme="prussian"
+            // colorScheme="prussian"
             name={displayName}
             size="lg"
-            variant="solid"
+            // variant="solid"
           />
           <Box column>
             {displayName && (

package/src/icon/theme.ts

@@ -21,10 +21,16 @@ const sizes = {
     height: 28,
     width: 28
   },
-  /** the xl size is introduced for the xxl tabs; should not be listed. */
+  /** the xl size is introduced for the xxl-tabs and xl-avatars; should not be listed. */
   xl: {
     height: 32,
     width: 32
+  },
+
+  /** the xxl size is introduced for the xxl-avatars; should not be listed. */
+  xxl: {
+    height: 40,
+    width: 40
   }
 }
 

package/src/icons/baseIcons/cul/culCreateReport.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', 'M7.4 14C7.73137 14 8 13.7314 8 13.4V0.5C8 0.22375 7.77625 0 7.5 0H6.5C6.22375 0 6 0.22375 6 0.5V13.4C6 13.7314 6.26863 14 6.6 14H7.4Z M17 24.6C17 24.2686 17.2686 24 17.6 24H31.5C31.7763 24 32 24.2237 32 24.5V25.5C32 25.7763 31.7763 26 31.5 26H17.6C17.2686 26 17 25.7314 17 25.4V24.6Z M6.5 32H7.5C7.775 32 8 31.775 8 31.5V26H13.5C13.775 26 14 25.775 14 25.5V24.5C14 24.225 13.775 24 13.5 24H8V18.5C8 18.225 7.775 18 7.5 18H6.5C6.225 18 6 18.225 6 18.5V24H0.5C0.225 24 0 24.225 0 24.5V25.5C0 25.775 0.225 26 0.5 26H6V31.5C6 31.775 6.225 32 6.5 32Z M20.5 20H21.5C21.775 20 22 19.775 22 19.5V3.5C22 3.225 21.775 3 21.5 3H20.5C20.225 3 20 3.225 20 3.5V19.5C20 19.775 20.225 20 20.5 20Z M28.5 20H27.5C27.225 20 27 19.775 27 19.5V7.5C27 7.225 27.225 7 27.5 7H28.5C28.775 7 29 7.225 29 7.5V19.5C29 19.775 28.775 20 28.5 20Z M14.5 20H13.5C13.225 20 13 19.775 13 19.5V10.5C13 10.225 13.225 10 13.5 10H14.5C14.775 10 15 10.225 15 10.5V19.5C15 19.775 14.775 20 14.5 20Z'],
+  name: 'culCreateReport'
+} as IconDefinition

package/src/icons/baseIcons/cul/culDatacatalogue.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', 'M28 7.5C28 9.33335 27.3422 11.0131 26.2497 12.316L30.1346 16.2009C30.5251 16.5914 30.5251 17.2246 30.1346 17.6151C29.7441 18.0056 29.1109 18.0056 28.7204 17.6151L24.7711 13.6658C23.5591 14.507 22.0871 15 20.5 15C19.1363 15 17.8577 14.6361 16.7558 14H8C7.44771 14 7 13.5523 7 13C7 12.4477 7.44772 12 8 12H14.4995C13.5579 10.7465 13 9.18841 13 7.5C13 6.62341 13.1504 5.78195 13.4268 5H5C4.44771 5 4 5.44772 4 6V28.93C4 29.4823 4.44772 29.93 5 29.93H22C22.5523 29.93 23 29.4823 23 28.93V17.7776C23 17.4173 23.248 17.1167 23.5888 17C24.1947 16.7925 25 17.1801 25 17.8205V28.93C25 30.5869 23.6569 31.93 22 31.93H5C3.34315 31.93 2 30.5869 2 28.93V6C2 4.34314 3.34315 3 5 3H14C14.1533 3 14.2986 3.0345 14.4284 3.09616C15.7916 1.2199 18.0034 0 20.5 0C24.6421 0 28 3.35787 28 7.5ZM20.5 13C23.5376 13 26 10.5376 26 7.5C26 4.46243 23.5376 2 20.5 2C17.4624 2 15 4.46243 15 7.5C15 10.5376 17.4624 13 20.5 13Z M7 23C7 22.4477 7.44772 22 8 22H19C19.5523 22 20 22.4477 20 23C20 23.5523 19.5523 24 19 24H8C7.44772 24 7 23.5523 7 23Z M8 17C7.44772 17 7 17.4477 7 18C7 18.5523 7.44772 19 8 19H19C19.5523 19 20 18.5523 20 18C20 17.4477 19.5523 17 19 17H8Z'],
+  name: 'culDatacatalogue'
+} as IconDefinition

package/src/icons/baseIcons/cul/culDataset.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+import {IconDefinition} from '../../types'
+
+export default {
+    details: [32, 32, [], '', 'M13 3C13 1.34315 14.3431 0 16 0C17.6569 0 19 1.34315 19 3C19 4.30622 18.1652 5.41746 17 5.82929V8.02584C18.6375 8.11113 20.136 8.40415 21.3087 8.85521C22.0093 9.12467 22.6449 9.47003 23.1227 9.90449C23.6007 10.3392 24 10.9419 24 11.6923V15H26.1707C26.5825 13.8348 27.6938 13 29 13C30.6569 13 32 14.3431 32 16C32 17.6569 30.6569 19 29 19C27.6938 19 26.5825 18.1652 26.1707 17H24V20.3077C24 21.0581 23.6007 21.6608 23.1227 22.0955C22.6449 22.53 22.0093 22.8753 21.3087 23.1448C20.136 23.5959 18.6375 23.8889 17 23.9742V26.1707C18.1652 26.5825 19 27.6938 19 29C19 30.6569 17.6569 32 16 32C14.3431 32 13 30.6569 13 29C13 27.6938 13.8348 26.5825 15 26.1707V23.9742C13.3625 23.8889 11.864 23.5959 10.6913 23.1448C9.99068 22.8753 9.3551 22.53 8.87732 22.0955C8.39926 21.6608 8 21.0581 8 20.3077V17H5.82929C5.41746 18.1652 4.30622 19 3 19C1.34315 19 0 17.6569 0 16C0 14.3431 1.34315 13 3 13C4.30622 13 5.41746 13.8348 5.82929 15H8V11.6923C8 10.9419 8.39926 10.3392 8.87732 9.90449C9.3551 9.47003 9.99068 9.12467 10.6913 8.85521C11.864 8.40415 13.3625 8.11113 15 8.02584V5.82929C13.8348 5.41746 13 4.30622 13 3ZM16 2C15.4477 2 15 2.44772 15 3C15 3.55228 15.4477 4 16 4C16.5523 4 17 3.55228 17 3C17 2.44772 16.5523 2 16 2ZM29 15C28.4477 15 28 15.4477 28 16C28 16.5523 28.4477 17 29 17C29.5523 17 30 16.5523 30 16C30 15.4477 29.5523 15 29 15ZM2 16C2 15.4477 2.44772 15 3 15C3.55228 15 4 15.4477 4 16C4 16.5523 3.55228 17 3 17C2.44772 17 2 16.5523 2 16ZM16 28C15.4477 28 15 28.4477 15 29C15 29.5523 15.4477 30 16 30C16.5523 30 17 29.5523 17 29C17 28.4477 16.5523 28 16 28ZM10 16.486V14.4172C10.2274 14.524 10.4667 14.6212 10.7139 14.7095C12.1144 15.2097 13.9834 15.5 16 15.5C18.0166 15.5 19.8856 15.2097 21.2861 14.7095C21.5333 14.6212 21.7726 14.524 22 14.4172V16.486C21.9909 16.5096 21.9514 16.5852 21.8048 16.709C21.5754 16.9027 21.1843 17.1221 20.6134 17.326C19.4804 17.7307 17.8494 18 16 18C14.1506 18 12.5196 17.7307 11.3866 17.326C10.8157 17.1221 10.4246 16.9027 10.1952 16.709C10.0486 16.5852 10.0091 16.5096 10 16.486ZM10.1952 12.209C10.0486 12.0852 10.0091 12.0096 10 11.986V11.6923C10 11.6881 9.99997 11.6665 10.025 11.6194C10.0528 11.5672 10.1106 11.4863 10.2229 11.3842C10.4535 11.1744 10.8431 10.9397 11.4092 10.7219C12.5349 10.289 14.1577 10 16 10C17.8423 10 19.4651 10.289 20.5908 10.7219C21.1569 10.9397 21.5465 11.1744 21.7771 11.3842C21.8894 11.4863 21.9472 11.5672 21.975 11.6194C22 11.6665 22 11.6881 22 11.6923V11.986C21.9909 12.0096 21.9514 12.0852 21.8048 12.209C21.5754 12.4027 21.1843 12.6221 20.6134 12.826C19.4804 13.2307 17.8494 13.5 16 13.5C14.1506 13.5 12.5196 13.2307 11.3866 12.826C10.8157 12.6221 10.4246 12.4027 10.1952 12.209ZM10 18.9173V20.3077C10 20.3119 9.99997 20.3335 10.025 20.3806C10.0528 20.4328 10.1106 20.5137 10.2229 20.6158C10.4535 20.8256 10.8431 21.0603 11.4092 21.2781C12.5349 21.711 14.1577 22 16 22C17.8423 22 19.4651 21.711 20.5908 21.2781C21.1569 21.0603 21.5465 20.8256 21.7771 20.6158C21.8894 20.5137 21.9472 20.4328 21.975 20.3806C22 20.3335 22 20.312 22 20.3078V18.9172C21.7726 19.024 21.5333 19.1212 21.2861 19.2095C19.8856 19.7097 18.0166 20 16 20C13.9834 20 12.1144 19.7097 10.7139 19.2095C10.4667 19.1212 10.2274 19.024 10 18.9173Z'],
+    name: 'culDataset',
+    pathProps: {fillRule: 'evenodd', clipRule: 'evenodd'}
+} as IconDefinition