@react-native-ohos/native-base 3.4.29-rc.1

package/src/components/primitives/Flex/index.tsx

@@ -0,0 +1,47 @@
+import React, { memo, forwardRef } from 'react';
+import Box from '../Box';
+import type { IFlexProps } from './types';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const Flex = (props: IFlexProps, ref: any) => {
+  const {
+    align,
+    justify,
+    wrap,
+    basis,
+    grow,
+    shrink,
+    direction,
+    ...resolvedProps
+  } = usePropsResolution('Flex', props);
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return (
+    <Box
+      {...resolvedProps}
+      flexDirection={direction || resolvedProps.flexDirection}
+      alignItems={align || resolvedProps.alignItems}
+      justifyContent={justify || resolvedProps.justifyContent}
+      flexGrow={grow || resolvedProps.flexGrow}
+      flexBasis={basis || resolvedProps.flexBasis}
+      flexShrink={shrink || resolvedProps.flexShrink}
+      flexWrap={wrap || resolvedProps.flexWrap}
+      ref={ref}
+    />
+  );
+};
+
+//Spacer Component that adds space between components where it is placed
+export const Spacer = (props: any) => {
+  const resolvedProps = usePropsResolution('Spacer', props);
+
+  return <Box {...resolvedProps} />;
+};
+
+export type { IFlexProps };
+export default memo(forwardRef(Flex));

package/src/components/primitives/Flex/types.ts

@@ -0,0 +1,24 @@
+import type * as CSS from 'csstype';
+import type { CustomProps } from '../../types/utils';
+import type { InterfaceBoxProps } from '../Box/types';
+
+// export type IFlexProps = IBoxProps<IFlexProps> & {
+//   direction?: CSS.Property.FlexDirection;
+//   align?: CSS.Property.AlignItems;
+//   justify?: CSS.Property.JustifyContent;
+//   wrap?: CSS.Property.FlexWrap;
+//   basis?: CSS.Property.FlexBasis;
+//   grow?: CSS.Property.FlexGrow;
+//   shrink?: CSS.Property.FlexShrink;
+// };
+
+export type IFlexProps = (InterfaceBoxProps<IFlexProps> & {
+  direction?: CSS.Property.FlexDirection;
+  align?: CSS.Property.AlignItems;
+  justify?: CSS.Property.JustifyContent;
+  wrap?: CSS.Property.FlexWrap;
+  basis?: CSS.Property.FlexBasis;
+  grow?: CSS.Property.FlexGrow;
+  shrink?: CSS.Property.FlexShrink;
+}) &
+  CustomProps<'Flex'>;

package/src/components/primitives/GridItem/props.ts

@@ -0,0 +1,27 @@
+import type * as CSS from 'csstype';
+import type { CustomProps } from '../../types/utils';
+import type { InterfaceBoxProps } from '../Box/types';
+// import type { IBoxProps } from '../Box';
+
+// export type IGridItemProps = IBoxProps<IGridItemProps> & {
+//   gap?: CSS.Property.Gap;
+//   rowSpan?: number;
+//   colSpan?: number;
+//   colStart?: CSS.Property.GridColumnStart;
+//   colEnd?: CSS.Property.GridColumnEnd;
+//   rowStart?: CSS.Property.GridColumnStart;
+//   rowEnd?: CSS.Property.GridColumnEnd;
+//   area?: string;
+// };
+
+export type IGridItemProps = (InterfaceBoxProps<IGridItemProps> & {
+  gap?: CSS.Property.Gap;
+  rowSpan?: number;
+  colSpan?: number;
+  colStart?: CSS.Property.GridColumnStart;
+  colEnd?: CSS.Property.GridColumnEnd;
+  rowStart?: CSS.Property.GridColumnStart;
+  rowEnd?: CSS.Property.GridColumnEnd;
+  area?: string;
+}) &
+  CustomProps<'Box'>;

package/src/components/primitives/Heading/index.tsx

@@ -0,0 +1,17 @@
+import React, { memo, forwardRef } from 'react';
+import Text from '../Text';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import type { IHeadingProps } from './types';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const Heading = (props: IHeadingProps, ref: any) => {
+  const resolvedProps = usePropsResolution('Heading', props);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return <Text {...resolvedProps} ref={ref} />;
+};
+
+export default memo(forwardRef(Heading));
+export type { IHeadingProps };

package/src/components/primitives/Heading/types.ts

@@ -0,0 +1,14 @@
+import type { InterfaceTextProps } from '../Text/types';
+
+import type { CustomProps, ThemeComponentSizeType } from '../../types/utils';
+
+export interface IterfaceHeadingProps
+  extends InterfaceTextProps<IHeadingProps> {
+  /**
+   * The size of the heading.
+   * @default xl
+   */
+  size?: ThemeComponentSizeType<'Heading'>;
+}
+
+export type IHeadingProps = IterfaceHeadingProps & CustomProps<'Heading'>;

package/src/components/primitives/Hidden/HiddenSSR.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useTheme } from 'native-base';
+import { Platform } from 'react-native';
+import type { IHiddenProps } from './types';
+import { useColorMode } from '../../../core/color-mode/hooks';
+
+export const HiddenSSR = React.memo(({ children, ...props }: IHiddenProps) => {
+  const theme = useTheme();
+  const breakPoints = Object.keys(theme.breakpoints);
+  const currentColorMode = useColorMode();
+
+  const { from, till, only, colorMode, platform } = props;
+
+  if (children === null) return null;
+  if (!from && !till && !only && !colorMode && !platform) {
+    return null;
+  } else if (
+    (Array.isArray(platform) && platform.includes(Platform.OS)) ||
+    platform === Platform.OS
+  ) {
+    return null;
+  } else if (colorMode === currentColorMode.colorMode) {
+    return null;
+  }
+  const display: any = {};
+
+  if (till) {
+    let flag = false;
+    for (const i in breakPoints) {
+      if (breakPoints[i] === till) {
+        display[breakPoints[i]] = 'flex';
+        flag = true;
+      } else {
+        display[breakPoints[i]] = flag ? 'flex' : 'none';
+      }
+    }
+  }
+
+  if (from) {
+    let flag = false;
+    for (const i in breakPoints) {
+      if (breakPoints[i] === from || flag) {
+        display[breakPoints[i]] = 'none';
+        flag = true;
+      } else {
+        display[breakPoints[i]] = 'flex';
+      }
+    }
+  }
+  if (only) {
+    if (Array.isArray(only)) {
+      for (const i in breakPoints) {
+        if (only.includes(breakPoints[i])) {
+          display[breakPoints[i]] = 'none';
+        } else {
+          display[breakPoints[i]] = 'flex';
+        }
+      }
+    } else {
+      display[only] = 'none';
+    }
+  }
+
+  return React.cloneElement(children, {
+    display: display,
+  });
+});

package/src/components/primitives/Hidden/index.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { memo } from 'react';
+import type { IHiddenProps } from './types';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useBreakpointValue, useTheme, useToken } from '../../../hooks';
+import { useColorMode } from '../../../core/color-mode/hooks';
+import { Platform } from 'react-native';
+import { useNativeBaseConfig } from '../../../core/NativeBaseContext';
+import { HiddenSSR } from './HiddenSSR';
+export function Hidden({ isSSR, ...props }: IHiddenProps) {
+  const {
+    from,
+    till,
+    only,
+    platform,
+    colorMode,
+    children,
+  } = usePropsResolution(
+    'Hidden',
+    props,
+    {},
+    {
+      ignoreProps: ['only', 'platform'],
+    }
+  );
+  const { breakpoints } = useTheme();
+  const currentColorMode = useColorMode();
+
+  const breakpointValueObject = Object.keys(breakpoints).reduce(
+    (obj: any, val: string) => {
+      obj[val] = val;
+      return obj;
+    },
+    {}
+  );
+  const breakpointValue = useBreakpointValue(breakpointValueObject);
+  const [currentBreakpointValue] = useToken('breakpoints', [breakpointValue]);
+  const [fromBreakPointValue] = useToken('breakpoints', [from]);
+  const [tillBreakPointValue] = useToken('breakpoints', [till]);
+  const isSSRProvider = useNativeBaseConfig('useBreakpointResolvedProps').isSSR;
+
+  if (isSSR && isSSRProvider) return <HiddenSSR {...props} />;
+  //if no prop is passed, it will hide the element wrapped with hidden
+  if (!from && !till && !only && !colorMode && !platform) {
+    return null;
+  }
+
+  //if from and till prop exists, it will hide the element wrapped accordingly
+  else if (
+    from &&
+    till &&
+    currentBreakpointValue >= fromBreakPointValue &&
+    currentBreakpointValue < tillBreakPointValue
+  ) {
+    return null;
+  }
+
+  //if from prop exists, it will hide the element wrapped starting from that breakpoint.
+  else if (from && !till && currentBreakpointValue >= fromBreakPointValue) {
+    return null;
+  }
+
+  //if till prop exists, it will hide the element wrapped starting from  0 till that breakpoint.
+  else if (till && !from && currentBreakpointValue < tillBreakPointValue) {
+    return null;
+  }
+
+  //if only prop exists and is array, check that array consists current breakpoint value, and if that exists, hide on that breakpoint to next breakpoint.
+  // if only prop is string, hide on that breakpoint to next breakpoint.
+  else if (
+    (Array.isArray(only) && only.includes(breakpointValue)) ||
+    only === breakpointValue
+  ) {
+    return null;
+  }
+  //if platform prop exists and is array, check that array consists current platform value, and if that exists, hide on that platform.
+  // if platform prop is string, hide on that platform.
+  else if (
+    (Array.isArray(platform) && platform.includes(Platform.OS)) ||
+    platform === Platform.OS
+  ) {
+    return null;
+  }
+  //if colormode prop is valid string, hide on that colormode.
+  else if (colorMode === currentColorMode.colorMode) {
+    return null;
+  }
+  return children;
+}
+
+export default memo(Hidden);
+export type { IHiddenProps };

package/src/components/primitives/Hidden/types.ts

@@ -0,0 +1,39 @@
+type LiteralUnion<T extends U, U = string> = T | (U & {});
+
+export interface InterfaceHiddenProps {
+  /**
+   * The from prop takes breakpoint from which the wrapped component is hidden.
+   */
+  from?: LiteralUnion<'base' | 'sm' | 'md' | 'lg' | 'xl'>;
+  /**
+   * The till prop takes breakpoint till which the wrapped component is hidden.
+   */
+  till?: LiteralUnion<'base' | 'sm' | 'md' | 'lg' | 'xl'>;
+  /**
+   * The only prop takes array of breakpoints on which the wrapped component is hidden.
+   * It hides the component starting from that breakpoint to the next breakpoint.
+   */
+  only?:
+    | LiteralUnion<'base' | 'sm' | 'md' | 'lg' | 'xl'>
+    | Array<LiteralUnion<'base' | 'sm' | 'md' | 'lg' | 'xl'>>;
+  /**
+   * The colormode takes the mode on which the wrapped component must be hidden.
+   */
+  colorMode?: 'light' | 'dark';
+  /**
+   * The platform takes the platform as string or array for the multiple on which the wrapped component must be hidden.
+   */
+  platform?:
+    | LiteralUnion<'ios' | 'android' | 'web'>
+    | Array<LiteralUnion<'ios' | 'android' | 'web'>>;
+  /**
+   *
+   */
+  children: React.ReactElement | null;
+  /**
+   *
+   */
+  isSSR?: boolean;
+}
+
+export type IHiddenProps = InterfaceHiddenProps;

package/src/components/primitives/Icon/Icon.tsx

@@ -0,0 +1,41 @@
+import React, { memo, forwardRef } from 'react';
+import { useToken, usePropsResolution } from '../../../hooks';
+import type { IIconProps } from './types';
+import SVGIcon from './SVGIcon';
+import { Factory } from '../../../factory';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const Icon = (props: IIconProps, ref?: any) => {
+  const { as, size, ...resolvedProps } = usePropsResolution('Icon', props);
+  const tokenizedFontSize = useToken('space', size);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  if (!as) {
+    return <SVGIcon size={size} {...resolvedProps} ref={ref} />;
+  }
+  const isJSX = React.isValidElement(as);
+  const StyledAs = Factory(
+    isJSX
+      ? (resolvedProps) =>
+          React.cloneElement(as, {
+            ...resolvedProps,
+            //@ts-ignore
+            ...as.props,
+          })
+      : as
+  );
+
+  return (
+    <StyledAs
+      {...resolvedProps}
+      fontSize={tokenizedFontSize}
+      lineHeight={tokenizedFontSize}
+      size={size}
+      ref={ref}
+    />
+  );
+};
+
+export default memo(forwardRef(Icon));

package/src/components/primitives/Icon/Icons/Add.tsx

@@ -0,0 +1,6 @@
+import { createIcon } from '../createIcon';
+
+export const AddIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d: 'M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z',
+});

package/src/components/primitives/Icon/Icons/Arrow.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { createIcon } from '../createIcon';
+import { G, Path } from '../nbSvg';
+
+export const ArrowUpIcon = createIcon({
+  viewBox: '0 0 24 24',
+  path: (
+    <G>
+      <Path
+        d="M20.2362 13.0666L13.6036 6.43395L12.75 5.58039V6.7875L12.75 21.5H11.25L11.25 6.7875V5.58192L10.3968 6.43363L3.76282 13.0557L2.70711 12L12 2.70711L21.2941 12.0012L20.2362 13.0666Z"
+        stroke="currentColor"
+      />
+    </G>
+  ),
+});
+
+export const ArrowDownIcon = createIcon({
+  viewBox: '0 0 24 24',
+  path: (
+    <G>
+      <Path
+        d="M3.76375 10.9334L10.3964 17.5661L11.25 18.4196V17.2125L11.25 2.5H12.75L12.75 17.2125V18.4181L13.6032 17.5664L20.2372 10.9443L21.2929 12L12 21.2929L2.70586 11.9988L3.76375 10.9334Z"
+        stroke="currentColor"
+      />
+    </G>
+  ),
+});
+
+export const ArrowForwardIcon = createIcon({
+  viewBox: '0 0 24 24',
+  path: (
+    <G>
+      <Path
+        d="M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 20.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z"
+        stroke="currentColor"
+      />
+    </G>
+  ),
+});
+
+export const ArrowBackIcon = createIcon({
+  viewBox: '0 0 24 24',
+  path: (
+    <G>
+      <Path
+        d="M13.0666 3.76375L6.43395 10.3964L5.58039 11.25H6.7875H21.5V12.75H6.7875H5.58192L6.43363 13.6032L13.0557 20.2372L12 21.2929L2.70711 12L12.0012 2.70586L13.0666 3.76375Z"
+        stroke="currentColor"
+      />
+    </G>
+  ),
+});

package/src/components/primitives/Icon/Icons/Check.tsx

@@ -0,0 +1,13 @@
+import { createIcon } from '../createIcon';
+
+export const CheckIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z',
+});
+
+export const CheckCircleIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z',
+});

package/src/components/primitives/Icon/Icons/Chevron.tsx

@@ -0,0 +1,25 @@
+import { createIcon } from '../createIcon';
+
+export const ChevronUpIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M20.2286 18L11.9973 9.62148L3.76862 17.9973L2 16.1971L12 6L22 16.1971L20.2286 18Z',
+});
+
+export const ChevronDownIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z',
+});
+
+export const ChevronLeftIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M18 3.77141L9.62148 12.0027L17.9973 20.2314L16.1971 22L6 12L16.1971 2L18 3.77141Z',
+});
+
+export const ChevronRightIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M6 3.77141L14.3785 12.0027L6.00268 20.2314L7.80293 22L18 12L7.80293 2L6 3.77141Z',
+});

package/src/components/primitives/Icon/Icons/Circle.tsx

@@ -0,0 +1,7 @@
+import { createIcon } from '../createIcon';
+
+export const CircleIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z',
+});

package/src/components/primitives/Icon/Icons/Close.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { createIcon } from '../createIcon';
+import { Path } from '../nbSvg';
+
+export const CloseIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z',
+});
+
+export const SmallCloseIcon = createIcon({
+  viewBox: '0 0 16 16',
+  path: (
+    <Path
+      d="M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z"
+      fillRule="evenodd"
+      fill="currentColor"
+    />
+  ),
+});

package/src/components/primitives/Icon/Icons/Delete.tsx

@@ -0,0 +1,7 @@
+import { createIcon } from '../createIcon';
+
+export const DeleteIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M5.11111 19.7778C5.11111 21 6.11111 22 7.33333 22H16.2222C17.4444 22 18.4444 21 18.4444 19.7778V6.44444H5.11111V19.7778ZM19.5556 3.11111H15.6667L14.5556 2H9L7.88889 3.11111H4V5.33333H19.5556V3.11111Z',
+});

package/src/components/primitives/Icon/Icons/Favourite.tsx

@@ -0,0 +1,7 @@
+import { createIcon } from '../createIcon';
+
+export const FavouriteIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M1.75143 3.371C2.87321 2.22206 4.39447 1.57662 5.98067 1.57662C7.56686 1.57662 9.08812 2.22206 10.2099 3.371L11.9626 5.16516L13.7153 3.371C14.2671 2.78565 14.9272 2.31876 15.657 1.99756C16.3869 1.67637 17.1718 1.5073 17.9661 1.50023C18.7604 1.49316 19.5481 1.64823 20.2832 1.95638C21.0184 2.26453 21.6863 2.7196 22.2479 3.29504C22.8096 3.87047 23.2538 4.55474 23.5545 5.30793C23.8553 6.06112 24.0067 6.86813 23.9998 7.68189C23.9929 8.49564 23.8279 9.29984 23.5143 10.0476C23.2008 10.7953 22.7451 11.4715 22.1738 12.0369L11.9626 22.5L1.75143 12.0369C0.629991 10.8876 0 9.32904 0 7.70394C0 6.07885 0.629991 4.52029 1.75143 3.371Z',
+});

package/src/components/primitives/Icon/Icons/Hamburger.tsx

@@ -0,0 +1,7 @@
+import { createIcon } from '../createIcon';
+
+export const HamburgerIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z',
+});

package/src/components/primitives/Icon/Icons/Info.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { createIcon } from '../createIcon';
+import { G, Path } from '../nbSvg';
+
+export const InfoOutlineIcon = createIcon({
+  viewBox: '0 0 24 24',
+  path: (
+    <G>
+      <Path d="M11.9442 8.24C12.5628 8.24 13.0642 7.73856 13.0642 7.12C13.0642 6.50144 12.5628 6 11.9442 6C11.3257 6 10.8242 6.50144 10.8242 7.12C10.8242 7.73856 11.3257 8.24 11.9442 8.24Z" />
+      <Path d="M14.4008 15.9996H12.8008V9.59961H10.4008C10.1886 9.59961 9.98513 9.68389 9.8351 9.83392C9.68507 9.98395 9.60078 10.1874 9.60078 10.3996C9.60078 10.6118 9.68507 10.8153 9.8351 10.9653C9.98513 11.1153 10.1886 11.1996 10.4008 11.1996H11.2008V15.9996H9.60078C9.38861 15.9996 9.18513 16.0839 9.0351 16.2339C8.88507 16.384 8.80078 16.5874 8.80078 16.7996C8.80078 17.0118 8.88507 17.2153 9.0351 17.3653C9.18513 17.5153 9.38861 17.5996 9.60078 17.5996H14.4008C14.613 17.5996 14.8164 17.5153 14.9665 17.3653C15.1165 17.2153 15.2008 17.0118 15.2008 16.7996C15.2008 16.5874 15.1165 16.384 14.9665 16.2339C14.8164 16.0839 14.613 15.9996 14.4008 15.9996Z" />
+      <Path d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17316C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8078C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 9.34783 20.9464 6.80429 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2ZM12 20.3333C10.3518 20.3333 8.74066 19.8446 7.37025 18.9289C5.99984 18.0132 4.93174 16.7117 4.30101 15.189C3.67028 13.6663 3.50525 11.9908 3.82679 10.3742C4.14834 8.75774 4.94201 7.27288 6.10745 6.10744C7.27288 4.942 8.75774 4.14833 10.3743 3.82679C11.9908 3.50525 13.6663 3.67027 15.189 4.301C16.7117 4.93173 18.0132 5.99984 18.9289 7.37025C19.8446 8.74066 20.3333 10.3518 20.3333 12C20.3333 13.0943 20.1178 14.178 19.699 15.189C19.2802 16.2001 18.6664 17.1187 17.8926 17.8926C17.1187 18.6664 16.2001 19.2802 15.189 19.699C14.178 20.1178 13.0944 20.3333 12 20.3333Z" />
+    </G>
+  ),
+});
+
+export const InfoIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z',
+});

package/src/components/primitives/Icon/Icons/Minus.tsx

@@ -0,0 +1,6 @@
+import { createIcon } from '../createIcon';
+
+export const MinusIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d: 'M22 10.5H2V13H22V10.5Z',
+});

package/src/components/primitives/Icon/Icons/Moon.tsx

@@ -0,0 +1,7 @@
+import { createIcon } from '../createIcon';
+
+export const MoonIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z',
+});

package/src/components/primitives/Icon/Icons/Play.tsx

@@ -0,0 +1,7 @@
+import { createIcon } from '../createIcon';
+
+export const PlayIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M12 0C5.376 0 0 5.376 0 12C0 18.624 5.376 24 12 24C18.624 24 24 18.624 24 12C24 5.376 18.624 0 12 0ZM9.6 17.4V6.6L16.8 12L9.6 17.4Z',
+});

package/src/components/primitives/Icon/Icons/Question.tsx

@@ -0,0 +1,13 @@
+import { createIcon } from '../createIcon';
+import { questionOutlineIconPath } from './questionIconPath';
+
+export const QuestionIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M12 0C9.62663 0 7.30655 0.703787 5.33316 2.02236C3.35977 3.34094 1.8217 5.21508 0.913451 7.4078C0.00519943 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6688 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6934 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0V0ZM12 19C11.7033 19 11.4133 18.912 11.1666 18.7472C10.92 18.5824 10.7277 18.3481 10.6142 18.074C10.5007 17.7999 10.4709 17.4983 10.5288 17.2074C10.5867 16.9164 10.7296 16.6491 10.9393 16.4393C11.1491 16.2296 11.4164 16.0867 11.7074 16.0288C11.9983 15.9709 12.2999 16.0006 12.574 16.1142C12.8481 16.2277 13.0824 16.42 13.2472 16.6666C13.412 16.9133 13.5 17.2033 13.5 17.5C13.5 17.8978 13.342 18.2794 13.0607 18.5607C12.7794 18.842 12.3978 19 12 19ZM13.6 12.92C13.4216 12.9979 13.2698 13.1261 13.1632 13.289C13.0566 13.4519 12.9999 13.6423 13 13.837C13 14.1022 12.8946 14.3566 12.7071 14.5441C12.5196 14.7316 12.2652 14.837 12 14.837C11.7348 14.837 11.4804 14.7316 11.2929 14.5441C11.1054 14.3566 11 14.1022 11 13.837C10.9999 13.2532 11.1702 12.682 11.4899 12.1936C11.8096 11.7051 12.2649 11.3205 12.8 11.087C13.1305 10.9427 13.4159 10.7118 13.6259 10.4186C13.8359 10.1255 13.9627 9.78099 13.993 9.42163C14.0232 9.06228 13.9557 8.70144 13.7976 8.37731C13.6396 8.05317 13.3968 7.77781 13.095 7.58037C12.7932 7.38292 12.4437 7.27074 12.0834 7.25571C11.7231 7.24067 11.3654 7.32333 11.0482 7.49495C10.7311 7.66656 10.4662 7.92074 10.2817 8.23057C10.0971 8.54041 9.99982 8.89437 10 9.255C10 9.52021 9.89465 9.77457 9.70711 9.9621C9.51957 10.1496 9.26522 10.255 9 10.255C8.73479 10.255 8.48043 10.1496 8.2929 9.9621C8.10536 9.77457 8 9.52021 8 9.255C7.99999 8.53384 8.19495 7.82608 8.56423 7.20665C8.93352 6.58721 9.4634 6.07913 10.0978 5.73618C10.7322 5.39324 11.4475 5.22817 12.168 5.25847C12.8886 5.28876 13.5875 5.51329 14.1909 5.90828C14.7942 6.30327 15.2796 6.85404 15.5956 7.50229C15.9116 8.15054 16.0464 8.87216 15.9859 9.59077C15.9253 10.3094 15.6716 10.9983 15.2516 11.5845C14.8316 12.1707 14.261 12.6325 13.6 12.921V12.92Z',
+});
+
+export const QuestionOutlineIcon = createIcon({
+  viewBox: '0 0 24 24',
+  path: questionOutlineIconPath,
+});

package/src/components/primitives/Icon/Icons/Search.tsx

@@ -0,0 +1,7 @@
+import { createIcon } from '../createIcon';
+
+export const SearchIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M21.9399 20.5624L15.4474 14.0699C16.4549 12.7675 16.9999 11.175 16.9999 9.49997C16.9999 7.49498 16.2174 5.61498 14.8024 4.19749C13.3874 2.78 11.5025 2 9.49997 2C7.49748 2 5.61248 2.7825 4.19749 4.19749C2.78 5.61248 2 7.49498 2 9.49997C2 11.5025 2.7825 13.3874 4.19749 14.8024C5.61248 16.2199 7.49498 16.9999 9.49997 16.9999C11.175 16.9999 12.765 16.4549 14.0674 15.4499L20.5599 21.9399C20.579 21.959 20.6016 21.9741 20.6264 21.9844C20.6513 21.9947 20.678 22 20.7049 22C20.7318 22 20.7585 21.9947 20.7834 21.9844C20.8083 21.9741 20.8309 21.959 20.8499 21.9399L21.9399 20.8524C21.959 20.8334 21.9741 20.8108 21.9844 20.7859C21.9947 20.761 22 20.7343 22 20.7074C22 20.6805 21.9947 20.6538 21.9844 20.6289C21.9741 20.6041 21.959 20.5815 21.9399 20.5624ZM13.46 13.46C12.4 14.5174 10.995 15.0999 9.49997 15.0999C8.00497 15.0999 6.59998 14.5174 5.53998 13.46C4.48249 12.4 3.89999 10.995 3.89999 9.49997C3.89999 8.00497 4.48249 6.59748 5.53998 5.53998C6.59998 4.48249 8.00497 3.89999 9.49997 3.89999C10.995 3.89999 12.4025 4.47999 13.46 5.53998C14.5174 6.59998 15.0999 8.00497 15.0999 9.49997C15.0999 10.995 14.5174 12.4025 13.46 13.46Z',
+});

package/src/components/primitives/Icon/Icons/Share.tsx

@@ -0,0 +1,7 @@
+import { createIcon } from '../createIcon';
+
+export const ShareIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M18.0621 16.1487C17.2993 16.1487 16.6113 16.4451 16.0895 16.9223L8.93445 12.7495C8.98988 12.523 9.02482 12.2868 9.02482 12.0458C9.02482 11.8048 8.98988 11.5698 8.93445 11.3433L16.0136 7.21147C16.5679 7.73368 17.3006 8.02461 18.0621 8.02482C19.7237 8.02482 21.0745 6.67406 21.0745 5.01241C21.0745 3.35076 19.7237 2 18.0621 2C16.4004 2 15.0496 3.35076 15.0496 5.01241C15.0496 5.2534 15.0846 5.48958 15.14 5.71491L8.06085 9.84673C7.50628 9.32504 6.7738 9.0342 6.01241 9.03338C4.35077 9.03338 3 10.3841 3 12.0458C3 13.7074 4.35077 15.0582 6.01241 15.0582C6.77392 15.058 7.50661 14.7671 8.06085 14.2449L15.2159 18.4176C15.1632 18.633 15.1361 18.8538 15.1352 19.0756C15.1354 19.6541 15.3072 20.2196 15.6288 20.7005C15.9503 21.1814 16.4073 21.5562 16.9418 21.7775C17.4764 21.9988 18.0645 22.0567 18.6319 21.9437C19.1993 21.8308 19.7205 21.5522 20.1296 21.1431C20.5387 20.734 20.8173 20.2128 20.9302 19.6454C21.0432 19.078 20.9853 18.4898 20.764 17.9553C20.5427 17.4208 20.1679 16.9638 19.687 16.6423C19.2061 16.3207 18.6406 16.1489 18.0621 16.1487Z',
+});

package/src/components/primitives/Icon/Icons/Sun.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { createIcon } from '../createIcon';
+import { G, Path } from '../nbSvg';
+
+export const SunIcon = createIcon({
+  viewBox: '0 0 24 24',
+  path: (
+    <G>
+      <Path d="M11.9996 7.21094C9.36096 7.21094 7.22266 9.34924 7.22266 11.9879C7.22266 14.6265 9.36096 16.7648 11.9996 16.7648C14.6382 16.7648 16.7765 14.6265 16.7765 11.9879C16.7765 9.34924 14.6382 7.21094 11.9996 7.21094ZM11.9996 14.7715C10.462 14.7715 9.21437 13.5255 9.21437 11.9863C9.21437 10.4487 10.462 9.20265 11.9996 9.20265C13.5356 9.20265 14.7832 10.4487 14.7832 11.9863C14.7832 13.5255 13.5356 14.7715 11.9996 14.7715Z" />
+      <Path d="M13.1236 2.46526C13.1236 2.20873 12.9149 2 12.6599 2H11.3422C11.0857 2 10.877 2.20873 10.877 2.46526V5.48789C10.877 5.74283 11.0857 5.95315 11.3422 5.95315H12.6599C12.9149 5.95315 13.1236 5.74283 13.1236 5.48789V2.46526Z" />
+      <Path d="M6.05371 4.46121C5.87206 4.28116 5.5757 4.28116 5.39565 4.46121L4.46512 5.39174C4.28507 5.57338 4.28507 5.86975 4.46512 6.0498L6.60183 8.18651C6.78347 8.36816 7.07984 8.36816 7.25989 8.18651L8.19042 7.25598C8.37206 7.07434 8.37206 6.77797 8.19042 6.59792L6.05371 4.46121Z" />
+      <Path d="M2.46526 10.875C2.342 10.8754 2.2239 10.9246 2.13674 11.0117C2.04957 11.0989 2.00042 11.217 2 11.3403V12.658C2 12.9145 2.21033 13.1232 2.46686 13.1232H5.48789C5.74442 13.1232 5.95475 12.9145 5.95475 12.658V11.3419C5.95475 11.0869 5.74602 10.8766 5.48948 10.8766H2.46526V10.875Z" />
+      <Path d="M4.46316 17.9472C4.28311 18.1288 4.28311 18.4252 4.46316 18.6052L5.39369 19.5358C5.57374 19.7158 5.87011 19.7158 6.05175 19.5358L8.18847 17.3975C8.37011 17.2158 8.37011 16.9194 8.18847 16.7394L7.25794 15.8089C7.07629 15.6288 6.77993 15.6288 6.59987 15.8089L4.46316 17.9472Z" />
+      <Path d="M10.877 21.5344C10.877 21.7909 11.0857 21.9997 11.3438 21.9997H12.6599C12.9149 21.9997 13.1236 21.7893 13.1236 21.5344V18.5102C13.1236 18.2552 12.9149 18.0449 12.6583 18.0449L11.3422 18.0465C11.0857 18.0465 10.877 18.2552 10.877 18.5118V21.5344Z" />
+      <Path d="M17.9484 19.5342C18.13 19.7142 18.4264 19.7142 18.6064 19.5342L19.537 18.6036C19.6242 18.5164 19.6732 18.398 19.6732 18.2746C19.6732 18.1512 19.6242 18.0329 19.537 17.9456L17.3987 15.8089C17.2186 15.6288 16.9222 15.6288 16.7406 15.8089L15.8101 16.7394C15.6284 16.921 15.6284 17.2174 15.8101 17.3975L17.9484 19.5342Z" />
+      <Path d="M21.5348 13.1236C21.658 13.1232 21.7761 13.074 21.8633 12.9869C21.9505 12.8997 21.9996 12.7816 22 12.6583V11.3422C21.9996 11.219 21.9505 11.1009 21.8633 11.0137C21.7761 10.9265 21.658 10.8774 21.5348 10.877H18.5121C18.3889 10.8774 18.2708 10.9265 18.1836 11.0137C18.0964 11.1009 18.0473 11.219 18.0469 11.3422V12.6599C18.0469 12.9149 18.2556 13.1252 18.5121 13.1252L21.5348 13.1236Z" />
+      <Path d="M19.5358 6.05175C19.7174 5.87011 19.7174 5.57374 19.5358 5.39369L18.6036 4.46316C18.4236 4.28311 18.1256 4.28311 17.9472 4.46316L15.8089 6.60147C15.6288 6.78152 15.6288 7.07789 15.8089 7.25953L16.7394 8.19006C16.921 8.3717 17.2174 8.3717 17.3975 8.19006L19.5358 6.05175Z" />
+    </G>
+  ),
+});