onekijs-ui 0.9.2 → 0.15.2

package/src/components/field/typings.ts

@@ -0,0 +1,67 @@
+import {
+  AnonymousObject,
+  ContainerValidation,
+  FieldValidation,
+  FormFieldProps,
+  FormLayout,
+  ValidationStatus,
+} from 'onekijs-framework';
+import React from 'react';
+import { TshirtSize } from '../../styles/typings';
+import { GridSize } from '../grid/typings';
+import { LabelProps } from '../label/typings';
+
+export type FieldComponentProps<T extends AnonymousObject> = T & {
+  name: string;
+  value?: T['value'];
+  onFocus?: T['onFocus'];
+  onBlur?: T['onBlur'];
+  onChange?: T['onChange'];
+  status?: ValidationStatus;
+  size?: T['size'];
+};
+
+export type FieldDescriptionProps = {
+  className?: string;
+  content: string | JSX.Element;
+  size?: TshirtSize;
+  layout?: FormLayout;
+};
+
+export type FieldHelpProps = {
+  className?: string;
+  content?: string | JSX.Element;
+  visible?: boolean;
+  size?: TshirtSize;
+  layout?: FormLayout;
+};
+
+export type FieldLayoutProps = {
+  className?: string;
+  description?: string | JSX.Element;
+  disabled?: boolean;
+  DescriptionComponent?: React.FC<FieldDescriptionProps>;
+  help?: string | JSX.Element;
+  HelpComponent?: React.FC<FieldHelpProps>;
+  id?: string | number;
+  label?: string;
+  LabelComponent?: React.FC<LabelProps>;
+  labelWidth?: GridSize;
+  xsLabelWidth?: GridSize;
+  smLabelWidth?: GridSize;
+  mdLabelWidth?: GridSize;
+  lgLabelWidth?: GridSize;
+  xlLabelWidth?: GridSize;
+  layout?: FormLayout;
+  required?: boolean;
+  size?: TshirtSize;
+  validation?: FieldValidation | ContainerValidation;
+  visible?: boolean;
+};
+
+export type UseFieldLayoutProps<T extends AnonymousObject> = T &
+  FormFieldProps &
+  FieldLayoutProps & {
+    defaultValue: T['value'];
+    FieldComponent?: React.FC<T>;
+  };

package/src/components/field/util.ts

@@ -0,0 +1,47 @@
+import { AnonymousObject, extractValidators, FieldOptions, Validator } from 'onekijs-framework';
+import { FieldLayoutProps } from './typings';
+// extract validators from props
+export const extractFieldLayoutProps = (
+  props: AnonymousObject,
+): {
+  validators: AnonymousObject<Validator>;
+  fieldLayoutProps: FieldLayoutProps;
+  name: string;
+  fieldOptions: FieldOptions;
+  fieldProps: AnonymousObject;
+} => {
+  const [validators, nonValidatorProps] = extractValidators(props);
+  const fieldLayoutProps: FieldLayoutProps = {};
+  const fieldOptions: FieldOptions = {};
+  const fieldProps: AnonymousObject = {};
+  const fieldLayoutKeys = [
+    'className',
+    'description',
+    'DescriptionComponent',
+    'help',
+    'id',
+    'label',
+    'LabelComponent',
+    'labelWidth',
+    'layout',
+    'required',
+    'size',
+  ];
+  const fieldOptionsKeys = ['defaultValue', 'touchedOn', 'disabled', 'visible'];
+  Object.keys(nonValidatorProps).forEach((k) => {
+    if (fieldLayoutKeys.includes(k)) {
+      (fieldLayoutProps as any)[k] = props[k];
+    } else if (fieldOptionsKeys.includes(k)) {
+      (fieldOptions as any)[k] = props[k];
+    } else if (k !== 'name') {
+      fieldProps[k] = props[k];
+    }
+  });
+  return {
+    name: props.name,
+    validators,
+    fieldOptions,
+    fieldLayoutProps,
+    fieldProps,
+  };
+};

package/src/components/grid/Col.tsx

@@ -0,0 +1,33 @@
+import { FCC } from 'onekijs-framework';
+import React from 'react';
+import styled from 'styled-components';
+import { addClassname } from '../../utils/style';
+import { colStyle } from './style';
+import { ColProps } from './typings';
+
+const ColComponent: FCC<ColProps> = ({ className, size, xs, sm, md, lg, xl, offset, ...props }) => {
+  const classNames = [`o-col-${size}`, 'o-col'];
+  if (xs !== undefined) {
+    classNames.unshift(`o-col-xs-${xs}`);
+  }
+  if (sm !== undefined) {
+    classNames.unshift(`o-col-sm-${sm}`);
+  }
+  if (md !== undefined) {
+    classNames.unshift(`o-col-md-${md}`);
+  }
+  if (lg !== undefined) {
+    classNames.unshift(`o-col-lg-${lg}`);
+  }
+  if (xl !== undefined) {
+    classNames.unshift(`o-col-xl-${xl}`);
+  }
+
+  return <div className={addClassname(classNames.join(' '), className)} {...props}></div>;
+};
+
+const Col = styled(ColComponent)`
+  ${colStyle}
+`;
+
+export default Col;

package/src/components/grid/Row.tsx

@@ -0,0 +1,35 @@
+import { FCC } from 'onekijs-framework';
+import React from 'react';
+import styled from 'styled-components';
+import { addClassname } from '../../utils/style';
+import { rowStyle } from './style';
+import { RowProps } from './typings';
+
+const RowComponent: FCC<RowProps> = ({
+  alignItems,
+  width,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  gap,
+  gapX,
+  gapY,
+  margin,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  marginTop,
+  marginX,
+  marginY,
+  ...props
+}) => {
+  return <div {...props} className={addClassname('o-row', props.className)}></div>;
+};
+
+const Row = styled(RowComponent)`
+  ${rowStyle}
+`;
+
+export default Row;

package/src/components/grid/style.ts

@@ -0,0 +1,93 @@
+import { WidthProperty } from 'csstype';
+import { AnonymousObject } from 'onekijs-framework';
+import { css } from 'styled-components';
+import { alignItems } from '../../styles/alignment';
+import { display } from '../../styles/display';
+import { flexDirection, flexWrap } from '../../styles/flex';
+import { boxSizing } from '../../styles/interactivity';
+import { width } from '../../styles/size';
+import { marginBottom, marginLeft, marginRight, marginTop, marginX, marginY } from '../../styles/spacing';
+import { ComponentStyle, Theme, TLength } from '../../styles/typings';
+import { ColProps, RowProps } from './typings';
+
+const getColWidths = (gap: WidthProperty<TLength>, theme: Theme) => {
+  const getContent = (size: number, variant?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'): string => {
+    const content = `{ flex: 0 0 calc((100% / 12) * ${size}  - ${gap}); max-width: calc((100% / 12) * ${size}  - ${gap}); }`;
+    if (variant) {
+      const breakpoint = theme.breakpoints[variant];
+      return `@media (min-width: ${breakpoint}) { .o-col-${variant}-${size} ${content} }`;
+    } else {
+      return `.o-col-${size} ${content}`;
+    }
+  };
+  const colWidths: string[] = [];
+  ([undefined, 'sm', 'md', 'lg', 'xl'] as any).forEach((variant?: 'sm' | 'md' | 'lg' | 'xl') => {
+    for (let i = 1; i <= 12; i++) {
+      colWidths.push(getContent(i, variant));
+    }
+  });
+  return colWidths.join(' ');
+};
+
+const formatSize = (value: TLength | undefined, defaultValue: string): string => {
+  return value === undefined ? defaultValue : value === 0 ? '0px' : value;
+};
+
+export const rowStyle: ComponentStyle<RowProps> = ({
+  alignItems: align = 'stretch',
+  width: w = '100%',
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  gap,
+  gapX,
+  gapY,
+  marginTop: mt,
+  marginBottom: mb,
+  marginRight: mr,
+  marginLeft: ml,
+  marginX: mx,
+  marginY: my,
+  margin: m,
+  reverse = false,
+}) => {
+  const gapStr = formatSize(gap, '0px');
+  const gapXStr = formatSize(gapX, gapStr);
+  const gapYStr = formatSize(gapY, gapStr);
+  const marginStr = formatSize(m, '0px');
+  const marginXStr = formatSize(mx, marginStr);
+  const marginYStr = formatSize(my, marginStr);
+  const marginTopStr = formatSize(mt, marginYStr);
+  const marginBottomStr = formatSize(mb, marginYStr);
+  const marginRightStr = formatSize(mr, marginXStr);
+  const marginLeftStr = formatSize(ml, marginXStr);
+  const variantWidth: AnonymousObject = {};
+  if (xs !== undefined) variantWidth.xs = xs;
+  if (sm !== undefined) variantWidth.sm = sm;
+  if (md !== undefined) variantWidth.md = md;
+  if (lg !== undefined) variantWidth.lg = lg;
+  if (xl !== undefined) variantWidth.xl = xl;
+  return css`
+    ${display('flex')}
+    ${flexWrap('wrap')}
+    ${alignItems(align)}
+    ${boxSizing('border-box')}
+    ${flexDirection(reverse ? 'row-reverse' : 'row')}
+    ${width(w, variantWidth)}
+    ${marginLeft(`calc(${marginLeftStr} - ${gapXStr}/2)`)}
+    ${marginRight(`calc(${marginRightStr} - ${gapXStr}/2)`)}
+    ${marginTop(`calc(${marginTopStr} - ${gapYStr}/2)`)}
+    ${marginBottom(`calc(${marginBottomStr} - ${gapYStr}/2)`)}
+    & > .o-col {
+      ${marginX(`calc(${gapXStr}/2)`)}
+      ${marginY(`calc(${gapYStr}/2)`)}
+    }
+    ${(props) => getColWidths(gapXStr, props.theme)}
+  `;
+};
+
+export const colStyle: ComponentStyle<ColProps> = () => {
+  return css``;
+};

package/src/components/grid/typings.ts

@@ -0,0 +1,35 @@
+import { AlignItemsProperty, HeightProperty, MarginProperty, WidthProperty } from 'csstype';
+import { TLength } from '../../styles/typings';
+
+export type RowProps = Omit<React.InputHTMLAttributes<HTMLDivElement>, 'width'> & {
+  alignItems?: AlignItemsProperty;
+  gap?: WidthProperty<TLength>;
+  gapX?: WidthProperty<TLength>;
+  gapY?: HeightProperty<TLength>;
+  width?: WidthProperty<TLength>;
+  xs?: WidthProperty<TLength>;
+  sm?: WidthProperty<TLength>;
+  md?: WidthProperty<TLength>;
+  lg?: WidthProperty<TLength>;
+  xl?: WidthProperty<TLength>;
+  reverse?: boolean;
+  marginLeft?: MarginProperty<TLength>;
+  marginRight?: MarginProperty<TLength>;
+  marginX?: MarginProperty<TLength>;
+  marginTop?: MarginProperty<TLength>;
+  marginBottom?: MarginProperty<TLength>;
+  marginY?: MarginProperty<TLength>;
+  margin?: MarginProperty<TLength>;
+};
+
+export type ColProps = Omit<React.InputHTMLAttributes<HTMLDivElement>, 'size'> & {
+  size: GridSize;
+  xs?: GridSize;
+  sm?: GridSize;
+  md?: GridSize;
+  lg?: GridSize;
+  xl?: GridSize;
+  offset?: GridSize;
+};
+
+export type GridSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

package/src/components/icon/CloseAllIcon.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import styled, { css } from 'styled-components';
+import { alignItems } from '../../styles/alignment';
+import { display } from '../../styles/display';
+import { color } from '../../styles/typography';
+import { IconProps } from './typings';
+
+const IconComponent: FC<IconProps> = ({ className, onClick }) => {
+  return (
+    <div className={className} onClick={onClick}>
+      <svg className="o-icon-close-all-svg" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.621 8.086l-.707-.707L6.5 8.793 5.086 7.379l-.707.707L5.793 9.5l-1.414 1.414.707.707L6.5 10.207l1.414 1.414.707-.707L7.207 9.5l1.414-1.414z"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default styled(IconComponent)`
+  ${({ width, height, color: cssColor = 'inherit' }) => css`
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    .o-icon-close-all-svg {
+      fill: currentColor;
+    }
+  `}
+`;

package/src/components/icon/CrossIcon.tsx

@@ -0,0 +1,30 @@
+//#region -- system import
+import React, { FC } from 'react';
+import styled from 'styled-components';
+//#endregion
+
+const IconComponent: FC<React.InputHTMLAttributes<HTMLDivElement>> = ({ className }) => {
+  return (
+    <div className={className}>
+      <svg className="o-icon-close-svg" viewBox="0 0 100 100">
+        <path d="M35.6 34.4L28 26.8l7.6-7.6c.2-.2.2-.5 0-.7l-.5-.5c-.2-.2-.5-.2-.7 0l-7.6 7.6-7.5-7.6c-.2-.2-.5-.2-.7 0l-.6.6c-.2.2-.2.5 0 .7l7.6 7.6-7.6 7.5c-.2.2-.2.5 0 .7l.5.5c.2.2.5.2.7 0l7.6-7.6 7.6 7.6c.2.2.5.2.7 0l.5-.5c.2-.2.2-.5 0-.7z" />
+      </svg>
+    </div>
+  );
+};
+
+const CrossIcon = styled(IconComponent)`
+  width: ${(props) => props.width || '32px'};
+  height: ${(props) => props.height || '32px'};
+  .o-icon-close-svg {
+    display: inline-block;
+    stroke-width: 0;
+    stroke: currentColor;
+    fill: currentColor;
+    font-size: 3rem;
+    color: #666e6e;
+    opacity: 0.6;
+  }
+`;
+
+export default CrossIcon;

package/src/components/icon/FileIcon.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from 'react';
+import styled, { css } from 'styled-components';
+import { alignItems } from '../../styles/alignment';
+import { display } from '../../styles/display';
+import { addClassname } from '../../utils/style';
+import { IconProps } from './typings';
+
+const IconComponent: FC<IconProps> = (props) => {
+  const className = addClassname('o-icon-file', props.className);
+  return (
+    <div {...props} className={className}>
+      <svg
+        className="o-icon-file-svg"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1024 1024"
+        width="16px"
+        height="16px"
+      >
+        <path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z" />
+      </svg>
+    </div>
+  );
+};
+
+export default styled(IconComponent)`
+  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor' }) => css`
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    .o-icon-file-svg {
+      display: inline-block;
+      fill: ${cssColor};
+    }
+  `}
+`;

package/src/components/icon/FolderIcon.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from 'react';
+import styled, { css } from 'styled-components';
+import { addClassname } from '../../utils/style';
+import { alignItems } from '../../styles/alignment';
+import { display } from '../../styles/display';
+import { IconProps } from './typings';
+
+const IconComponent: FC<IconProps> = (props) => {
+  const className = addClassname('o-icon-folder', props.className);
+  return (
+    <div {...props} className={className}>
+      <svg
+        className="o-icon-folder-svg"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="24px"
+        height="24px"
+      >
+        <path d="M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z" />
+      </svg>
+    </div>
+  );
+};
+
+export default styled(IconComponent)`
+  ${({ width = '24px', height = '24px', color: cssColor = 'currentColor' }) => css`
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    .o-icon-folder-svg {
+      display: inline-block;
+      fill: ${cssColor};
+    }
+  `}
+`;

package/src/components/icon/LoadingIcon.tsx

@@ -1,9 +1,12 @@
 import React, { FC } from 'react';
-import styled, { keyframes } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
+import { stroke } from '../../styles/svg';
+import { addClassname } from '../../utils/style';
+import { IconProps } from './typings';
 
-const IconComponent: FC<React.InputHTMLAttributes<HTMLDivElement>> = ({ className }) => {
+const IconComponent: FC<IconProps> = ({ className }) => {
   return (
-    <div className={className}>
+    <div className={addClassname('o-icon-loading-container', className)}>
       <svg className="o-icon-loading-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         <circle className="o-icon-loading-svg-circle" cx="50" cy="50" r="45" />
       </svg>
@@ -38,25 +41,25 @@ const iconCircleKeyFrame = keyframes`
 `;
 
 export default styled(IconComponent)`
-  height: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 100%;
-
-  .o-icon-loading-svg {
-    animation: 2s linear infinite both ${iconKeyFrame};
-  }
+  ${({ width: cssWidth = '16px', height: cssHeight = '16px', color: cssColor = 'primary' }) => css`
+    height: ${cssHeight};
+    width: ${cssWidth};
+    display: inline-flex;
+    align-items: center;
 
-  .o-icon-loading-svg-circle {
-    animation: 1.4s ease-in-out infinite both ${iconCircleKeyFrame};
-    fill: transparent;
-    stroke: currentColor;
-    stroke-dasharray: 285;
-    stroke-linecap: round;
-    stroke-width: 10px;
-    transform-origin: 50% 50%;
-  }
+    .o-icon-loading-svg {
+      animation: 2s linear infinite both ${iconKeyFrame};
+    }
+
+    .o-icon-loading-svg-circle {
+      animation: 1.4s ease-in-out infinite both ${iconCircleKeyFrame};
+      fill: transparent;
+      stroke: currentColor;
+      ${stroke(cssColor)}
+      stroke-dasharray: 285;
+      stroke-linecap: round;
+      stroke-width: 10px;
+      transform-origin: 50% 50%;
+    }
+  `}
 `;

package/src/components/icon/MenuIcon.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import styled, { css } from 'styled-components';
+import { color } from '../../styles/typography';
+import { alignItems } from '../../styles/alignment';
+import { display } from '../../styles/display';
+import { IconProps } from './typings';
+import { cursor } from '../../styles/interactivity';
+
+const IconComponent: FC<IconProps> = (props) => {
+  return (
+    <div {...props}>
+      <svg className="o-icon-menu-svg" viewBox="0 0 100 100">
+        <rect width="100" height="15" rx="15" ry="15"></rect>
+        <rect y="40" width="100" height="15" rx="15" ry="15"></rect>
+        <rect y="80" width="100" height="15" rx="15" ry="15"></rect>
+      </svg>
+    </div>
+  );
+};
+
+export default styled(IconComponent)`
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => css`
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    ${cursor('pointer')}
+    .o-icon-menu-svg {
+      display: inline-block;
+      fill: currentColor;
+    }
+  `}
+`;

package/src/components/icon/RemoveIcon.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from 'react';
+import styled, { css } from 'styled-components';
+import { alignItems } from '../../styles/alignment';
+import { display } from '../../styles/display';
+import { color } from '../../styles/typography';
+import { IconProps } from './typings';
+
+const RemoveIcon: FC<IconProps> = ({ className, onClick }) => {
+  return (
+    <div className={className} onClick={onClick}>
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        viewBox="0 0 16 16"
+        width="100%"
+        height="100%"
+      >
+        <path
+          fill="currentColor"
+          d="M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z"
+        ></path>
+      </svg>
+    </div>
+  );
+};
+
+export default styled(RemoveIcon)`
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => css`
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+  `}
+`;

package/src/components/icon/SearchIcon.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import styled, { css } from 'styled-components';
+import { color } from '../../styles/typography';
+import { alignItems } from '../../styles/alignment';
+import { display } from '../../styles/display';
+import { IconProps } from './typings';
+
+const IconComponent: FC<IconProps> = ({ className, onClick }) => {
+  return (
+    <div className={className} onClick={onClick}>
+      <svg className="o-icon-search-svg" viewBox="0 0 118.783 118.783">
+        <path
+          d="M115.97,101.597L88.661,74.286c4.64-7.387,7.333-16.118,7.333-25.488c0-26.509-21.49-47.996-47.998-47.996
+		S0,22.289,0,48.798c0,26.51,21.487,47.995,47.996,47.995c10.197,0,19.642-3.188,27.414-8.605l26.984,26.986
+		c1.875,1.873,4.333,2.806,6.788,2.806c2.458,0,4.913-0.933,6.791-2.806C119.72,111.423,119.72,105.347,115.97,101.597z
+		 M47.996,81.243c-17.917,0-32.443-14.525-32.443-32.443s14.526-32.444,32.443-32.444c17.918,0,32.443,14.526,32.443,32.444
+		S65.914,81.243,47.996,81.243z"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default styled(IconComponent)`
+  ${({ width, height, color: cssColor = 'inherit' }) => css`
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    .o-icon-search-svg {
+      display: inline-block;
+      stroke-width: 0;
+      stroke: currentColor;
+      fill: currentColor;
+    }
+  `}
+`;