@fibery/ui-kit 1.34.5 → 1.34.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.34.5",
+  "version": "1.34.7",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -33,7 +33,8 @@
     "src/toggle.tsx",
     "src/toggle-on-off.tsx",
     "src/use-is-support-hardware-keyboard.ts",
-    "src/use-is-phone.ts"
+    "src/use-is-phone.ts",
+    "src/use-is-media-query-matched.ts"
   ],
   "license": "UNLICENSED",
   "dependencies": {
@@ -76,9 +77,9 @@
     "screenfull": "6.0.1",
     "tabbable": "5.2.1",
     "ua-parser-js": "1.0.39",
-    "@fibery/react": "1.4.0",
     "@fibery/emoji-data": "2.6.0",
-    "@fibery/helpers": "1.3.0"
+    "@fibery/helpers": "1.3.0",
+    "@fibery/react": "1.4.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/design-system.ts

@@ -81,6 +81,7 @@ export const cardTypeColors = [
 const swatches = {
   "gray-light": cardTypeColors[1],
   yellow: cardTypeColors[14],
+  green: "#69AC5E",
 };
 
 // switch to chroma.valid once we start using 2.0.1
@@ -456,6 +457,8 @@ export const themeColors = {
 
   mySpaceIconColor: [swatches["gray-light"], swatches["gray-light"]],
   mySpaceIconBg: [getOpacities(swatches["gray-light"]).opacity20, getOpacities(swatches["gray-light"]).opacity20],
+  privateIconColor: [swatches.green, swatches.green],
+  privateIconBg: [getOpacities(swatches.green).opacity20, getOpacities(swatches.green).opacity20],
   favoritesIconColor: [swatches.yellow, swatches.yellow],
   favoritesIconBg: [getOpacities(swatches.yellow).opacity20, getOpacities(swatches.yellow).opacity20],
 

package/src/icons/ast/UserGroup.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const UserGroup: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.5 2A2.5 2.5 0 0 0 2 4.5v11A2.5 2.5 0 0 0 4.5 18h11a2.5 2.5 0 0 0 2.5-2.5v-11A2.5 2.5 0 0 0 15.5 2h-11Zm0 1.5c-.552 0-1 .557-1 1.11V15.5a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-11a1 1 0 0 0-1-1h-11Zm3.917 4.083a1.583 1.583 0 1 1 3.167 0 1.583 1.583 0 0 1-3.167 0ZM10 11.667c-.982 0-1.64.563-1.772 1.097a.75.75 0 1 1-1.456-.362c.34-1.367 1.742-2.235 3.228-2.235 1.486 0 2.888.868 3.228 2.235a.75.75 0 1 1-1.456.362c-.133-.534-.79-1.097-1.772-1.097Z"},"children":[]}],"metadata":""}]},"name":"user-group"};
+
+export default UserGroup;

package/src/icons/ast/index.tsx

@@ -317,6 +317,7 @@ export { default as UnlockFilled } from './UnlockFilled';
 export { default as UnlockOutline } from './UnlockOutline';
 export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
+export { default as UserGroup } from './UserGroup';
 export { default as UserRole } from './UserRole';
 export { default as ViewBoard } from './ViewBoard';
 export { default as ViewCalendar } from './ViewCalendar';

package/src/icons/react/UserGroup.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import UserGroupSvg from '../ast/UserGroup';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UserGroup = forwardRef<SVGSVGElement, IconBaseProps>(function UserGroup(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={UserGroupSvg} />});
+
+export default UserGroup;

package/src/icons/react/index.tsx

@@ -317,6 +317,7 @@ export { default as UnlockFilled } from './UnlockFilled';
 export { default as UnlockOutline } from './UnlockOutline';
 export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
+export { default as UserGroup } from './UserGroup';
 export { default as UserRole } from './UserRole';
 export { default as ViewBoard } from './ViewBoard';
 export { default as ViewCalendar } from './ViewCalendar';

package/src/use-is-media-query-matched.ts

@@ -0,0 +1,18 @@
+import {useEffect, useState} from "react";
+import {getMediaQueryList, subscribeOnChange} from "./media-query-utils";
+
+export function useIsMediaQueryMatched(mediaQuery: string) {
+  const [isMediaQueryMatched, setIsMediaQueryMatched] = useState(() => {
+    const mediaQueryList = getMediaQueryList(mediaQuery);
+    return mediaQueryList.matches;
+  });
+  useEffect(() => {
+    const unsubscribe = subscribeOnChange(getMediaQueryList(mediaQuery), (evt) => {
+      setIsMediaQueryMatched(evt.matches);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [mediaQuery]);
+  return isMediaQueryMatched;
+}