@digigov/react-core 2.0.0-85c27c19 → 2.0.0-aefd0709

package/src/utils/extend.native.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+type WithClassName<TProps> = TProps & { className?: string };
+type PropFactory<TProps> = (props: WithClassName<TProps>) => any;
+
+/**
+ * A HOC that transforms the props of the wrapped component before passing them through
+ *
+ * @param Component The component to wrap
+ * @param [propFactory=(props) => props] The function that transforms the props
+ * @returns The wrapped component that accepts the transformed props
+ *
+ * @example
+ * type MyComponentProps = { name: string; };
+ * const MyComponent = (props: MyComponentProps) => <p>Hi {props.name}</p>;
+ *
+ * const MyNativeComponent = extend(MyComponent, (props) => ({ name: props.name.toUpperCase(), ...props }));
+ *
+ * type AdditionalProps = { lastName: string; };
+ * const MyExpandedNativeComponent = extend<MyComponentProps, AdditionalProps>(MyNativeComponent, (props) => ({ name: `${props.name} ${props.lastName}`, ...props }));
+ */
+export function extend<TProps, TAdditionalProps>(
+  Component: React.ComponentType<TProps>,
+  propFactory: PropFactory<TProps & TAdditionalProps> = (props) => props
+) {
+  const ExtendedComponent = React.forwardRef(function ExtendedComponent(
+    props: WithClassName<TProps & TAdditionalProps>,
+    ref
+  ) {
+    const transformedProps = propFactory(props);
+
+    return <Component ref={ref} {...transformedProps} />;
+  });
+  return ExtendedComponent;
+}
+export default extend;

package/utils/extend.native/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+function extend(Component, propFactory = (props) => props) {
+  const ExtendedComponent = React.forwardRef(function ExtendedComponent2(props, ref) {
+    const transformedProps = propFactory(props);
+    return /* @__PURE__ */ React.createElement(Component, { ref, ...transformedProps });
+  });
+  return ExtendedComponent;
+}
+var extend_native_default = extend;
+export {
+  extend_native_default as default,
+  extend
+};
+//# sourceMappingURL=extend.native.js.map

package/utils/extend.native/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../cjs/utils/extend.native/index.js"
+}

package/utils/extend.native.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+type WithClassName<TProps> = TProps & {
+    className?: string;
+};
+type PropFactory<TProps> = (props: WithClassName<TProps>) => any;
+/**
+ * A HOC that transforms the props of the wrapped component before passing them through
+ *
+ * @param Component The component to wrap
+ * @param [propFactory=(props) => props] The function that transforms the props
+ * @returns The wrapped component that accepts the transformed props
+ *
+ * @example
+ * type MyComponentProps = { name: string; };
+ * const MyComponent = (props: MyComponentProps) => <p>Hi {props.name}</p>;
+ *
+ * const MyNativeComponent = extend(MyComponent, (props) => ({ name: props.name.toUpperCase(), ...props }));
+ *
+ * type AdditionalProps = { lastName: string; };
+ * const MyExpandedNativeComponent = extend<MyComponentProps, AdditionalProps>(MyNativeComponent, (props) => ({ name: `${props.name} ${props.lastName}`, ...props }));
+ */
+export declare function extend<TProps, TAdditionalProps>(Component: React.ComponentType<TProps>, propFactory?: PropFactory<TProps & TAdditionalProps>): React.ForwardRefExoticComponent<React.PropsWithoutRef<WithClassName<TProps & TAdditionalProps>> & React.RefAttributes<unknown>>;
+export default extend;

package/utils/extend.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/extend.native.tsx"],
+  "sourcesContent": ["import React from 'react';\n\ntype WithClassName<TProps> = TProps & { className?: string };\ntype PropFactory<TProps> = (props: WithClassName<TProps>) => any;\n\n/**\n * A HOC that transforms the props of the wrapped component before passing them through\n *\n * @param Component The component to wrap\n * @param [propFactory=(props) => props] The function that transforms the props\n * @returns The wrapped component that accepts the transformed props\n *\n * @example\n * type MyComponentProps = { name: string; };\n * const MyComponent = (props: MyComponentProps) => <p>Hi {props.name}</p>;\n *\n * const MyNativeComponent = extend(MyComponent, (props) => ({ name: props.name.toUpperCase(), ...props }));\n *\n * type AdditionalProps = { lastName: string; };\n * const MyExpandedNativeComponent = extend<MyComponentProps, AdditionalProps>(MyNativeComponent, (props) => ({ name: `${props.name} ${props.lastName}`, ...props }));\n */\nexport function extend<TProps, TAdditionalProps>(\n  Component: React.ComponentType<TProps>,\n  propFactory: PropFactory<TProps & TAdditionalProps> = (props) => props\n) {\n  const ExtendedComponent = React.forwardRef(function ExtendedComponent(\n    props: WithClassName<TProps & TAdditionalProps>,\n    ref\n  ) {\n    const transformedProps = propFactory(props);\n\n    return <Component ref={ref} {...transformedProps} />;\n  });\n  return ExtendedComponent;\n}\nexport default extend;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAqBX,SAAS,OACd,WACA,cAAsD,CAAC,UAAU,OACjE;AACA,QAAM,oBAAoB,MAAM,WAAW,SAASA,mBAClD,OACA,KACA;AACA,UAAM,mBAAmB,YAAY,KAAK;AAE1C,WAAO,oCAAC,aAAU,KAAW,GAAG,kBAAkB;AAAA,EACpD,CAAC;AACD,SAAO;AACT;AACA,IAAO,wBAAQ;",
+  "names": ["ExtendedComponent"]
+}

package/AutoCompleteInput/index.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { BaseProps } from '@digigov/react-core/Base';
-export interface AutoCompleteInputProps extends BaseProps<'input'> {
-    /**
-     * isFocused is optional. The default value is false.
-     * isFocused prop is used to focus the list element.
-     * @value true
-     * @value false
-     */
-    isFocused?: boolean;
-}
-/**
- * AutoCompleteInput component is used to display the value that the user is typing.
- *
- */
-export declare const AutoCompleteInput: React.ForwardRefExoticComponent<Omit<AutoCompleteInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export default AutoCompleteInput;

package/AutoCompleteInput/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/AutoCompleteInput/index.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\nexport interface AutoCompleteInputProps extends BaseProps<'input'> {\n  /**\n   * isFocused is optional. The default value is false.\n   * isFocused prop is used to focus the list element.\n   * @value true\n   * @value false\n   */\n  isFocused?: boolean;\n\n}\n/**\n * AutoCompleteInput component is used to display the value that the user is typing.\n *\n */\nexport const AutoCompleteInput = React.forwardRef<\n  HTMLInputElement,\n  AutoCompleteInputProps\n>(function AutoCompleteInput(\n  { name, isFocused, className, ...props },\n  ref\n) {\n  return (\n    <Base\n      as=\"input\"\n      type=\"text\"\n      name={name}\n      ref={ref}\n      className={clsx(className, {\n        'ds-autocomplete__input': true,\n        'ds-autocomplete__input--focused': isFocused,\n      })}\n      {...props}\n    />\n  );\n});\n\nexport default AutoCompleteInput;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,UAAyB;AAezB,MAAM,oBAAoB,MAAM,WAGrC,SAASA,mBACT,EAAE,MAAM,WAAW,WAAW,GAAG,MAAM,GACvC,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW,KAAK,WAAW;AAAA,QACzB,0BAA0B;AAAA,QAC1B,mCAAmC;AAAA,MACrC,CAAC;AAAA,MACA,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,IAAO,4BAAQ;",
-  "names": ["AutoCompleteInput"]
-}

package/SvgIcon/index.d.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-import { BaseProps } from '@digigov/react-core/Base';
-export interface SvgIconProps extends BaseProps<'svg'> {
-    /**
-     * size is optional.
-     * size prop declares the size of the svg icon.
-     * @value 'xs'
-     * @value 'sm'
-     * @value 'md'
-     * @value 'lg'
-     * @value 'xl'
-     * @default 'sm'
-     */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /**
-     * color property styles svg icon with Gov.gr palette's basic colors.
-     * color property is optional.
-     * @value 'base-content'
-     * @value 'dark', always dark, among all themes
-     * @value 'white', always white, among all themes
-     * @value 'gray'
-     * @value 'primary'
-     * @value 'success'
-     * @value 'warning'
-     * @value 'error'
-     * @value 'focus', use only in focus state, in dark background
-     * @value 'info'
-     * @value 'link'
-     */
-    color?: 'base-content' | 'dark' | 'white' | 'gray' | 'primary' | 'success' | 'warning' | 'error' | 'focus' | 'info' | 'link';
-}
-/**
- * Use SvgIcon as global svg component.
- *  SvgIcon can be used inside other svg components as children such as CheckIcon, CaretIcon etc.
- */
-export declare const SvgIcon: React.ForwardRefExoticComponent<Omit<SvgIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default SvgIcon;

package/SvgIcon/index.js

@@ -1,30 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import Base from "@digigov/react-core/Base";
-const SvgIcon = React.forwardRef(
-  function SvgIcon2({ size, color, children, className, ...props }, ref) {
-    return /* @__PURE__ */ React.createElement(
-      Base,
-      {
-        as: "svg",
-        ref,
-        className: clsx(className, {
-          "ds-svg-icon": true,
-          [`ds-svg-icon--${color}`]: color !== void 0,
-          [`ds-svg-icon--${size}`]: size !== void 0
-        }),
-        focusable: "false",
-        viewBox: "0 0 24 24",
-        "aria-hidden": "true",
-        ...props
-      },
-      children
-    );
-  }
-);
-var SvgIcon_default = SvgIcon;
-export {
-  SvgIcon,
-  SvgIcon_default as default
-};
-//# sourceMappingURL=index.js.map

package/SvgIcon/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/SvgIcon/index.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\n\nexport interface SvgIconProps extends BaseProps<'svg'> {\n  /**\n   * size is optional.\n   * size prop declares the size of the svg icon.\n   * @value 'xs'\n   * @value 'sm'\n   * @value 'md'\n   * @value 'lg'\n   * @value 'xl'\n   * @default 'sm'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n  /**\n   * color property styles svg icon with Gov.gr palette's basic colors.\n   * color property is optional.\n   * @value 'base-content' \n   * @value 'dark', always dark, among all themes\n   * @value 'white', always white, among all themes\n   * @value 'gray'\n   * @value 'primary'\n   * @value 'success'\n   * @value 'warning'\n   * @value 'error'\n   * @value 'focus', use only in focus state, in dark background\n   * @value 'info'\n   * @value 'link'\n   */\n  color?:\n    | 'base-content'\n    | 'dark'\n    | 'white'\n    | 'gray'\n    | 'primary'\n    | 'success'\n    | 'warning'\n    | 'error'\n    | 'focus'\n    | 'info'\n    | 'link';\n}\n/**\n * Use SvgIcon as global svg component.\n *  SvgIcon can be used inside other svg components as children such as CheckIcon, CaretIcon etc.\n */\nexport const SvgIcon = React.forwardRef<SVGSVGElement, SvgIconProps>(\n  function SvgIcon({ size, color, children, className, ...props }, ref) {\n    return (\n      <Base\n        as=\"svg\"\n        ref={ref}\n        className={clsx(className, {\n          'ds-svg-icon': true,\n          [`ds-svg-icon--${color}`]: color !== undefined,\n          [`ds-svg-icon--${size}`]: size !== undefined,\n        })}\n        focusable=\"false\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n        {...props}\n      >\n        {children}\n      </Base>\n    );\n  }\n);\n\nexport default SvgIcon;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,UAAyB;AA+CzB,MAAM,UAAU,MAAM;AAAA,EAC3B,SAASA,SAAQ,EAAE,MAAM,OAAO,UAAU,WAAW,GAAG,MAAM,GAAG,KAAK;AACpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH;AAAA,QACA,WAAW,KAAK,WAAW;AAAA,UACzB,eAAe;AAAA,UACf,CAAC,gBAAgB,KAAK,EAAE,GAAG,UAAU;AAAA,UACrC,CAAC,gBAAgB,IAAI,EAAE,GAAG,SAAS;AAAA,QACrC,CAAC;AAAA,QACD,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,eAAY;AAAA,QACX,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAO,kBAAQ;",
-  "names": ["SvgIcon"]
-}

package/cjs/AutoCompleteInput/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/AutoCompleteInput/index.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\nexport interface AutoCompleteInputProps extends BaseProps<'input'> {\n  /**\n   * isFocused is optional. The default value is false.\n   * isFocused prop is used to focus the list element.\n   * @value true\n   * @value false\n   */\n  isFocused?: boolean;\n\n}\n/**\n * AutoCompleteInput component is used to display the value that the user is typing.\n *\n */\nexport const AutoCompleteInput = React.forwardRef<\n  HTMLInputElement,\n  AutoCompleteInputProps\n>(function AutoCompleteInput(\n  { name, isFocused, className, ...props },\n  ref\n) {\n  return (\n    <Base\n      as=\"input\"\n      type=\"text\"\n      name={name}\n      ref={ref}\n      className={clsx(className, {\n        'ds-autocomplete__input': true,\n        'ds-autocomplete__input--focused': isFocused,\n      })}\n      {...props}\n    />\n  );\n});\n\nexport default AutoCompleteInput;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAiB;AACjB,kBAAgC;AAezB,MAAM,oBAAoB,aAAAA,QAAM,WAGrC,SAASC,mBACT,EAAE,MAAM,WAAW,WAAW,GAAG,MAAM,GACvC,KACA;AACA,SACE,6BAAAD,QAAA;AAAA,IAAC,YAAAE;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,eAAW,YAAAC,SAAK,WAAW;AAAA,QACzB,0BAA0B;AAAA,QAC1B,mCAAmC;AAAA,MACrC,CAAC;AAAA,MACA,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,IAAO,4BAAQ;",
-  "names": ["React", "AutoCompleteInput", "Base", "clsx"]
-}

package/cjs/SvgIcon/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/SvgIcon/index.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\n\nexport interface SvgIconProps extends BaseProps<'svg'> {\n  /**\n   * size is optional.\n   * size prop declares the size of the svg icon.\n   * @value 'xs'\n   * @value 'sm'\n   * @value 'md'\n   * @value 'lg'\n   * @value 'xl'\n   * @default 'sm'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n  /**\n   * color property styles svg icon with Gov.gr palette's basic colors.\n   * color property is optional.\n   * @value 'base-content' \n   * @value 'dark', always dark, among all themes\n   * @value 'white', always white, among all themes\n   * @value 'gray'\n   * @value 'primary'\n   * @value 'success'\n   * @value 'warning'\n   * @value 'error'\n   * @value 'focus', use only in focus state, in dark background\n   * @value 'info'\n   * @value 'link'\n   */\n  color?:\n    | 'base-content'\n    | 'dark'\n    | 'white'\n    | 'gray'\n    | 'primary'\n    | 'success'\n    | 'warning'\n    | 'error'\n    | 'focus'\n    | 'info'\n    | 'link';\n}\n/**\n * Use SvgIcon as global svg component.\n *  SvgIcon can be used inside other svg components as children such as CheckIcon, CaretIcon etc.\n */\nexport const SvgIcon = React.forwardRef<SVGSVGElement, SvgIconProps>(\n  function SvgIcon({ size, color, children, className, ...props }, ref) {\n    return (\n      <Base\n        as=\"svg\"\n        ref={ref}\n        className={clsx(className, {\n          'ds-svg-icon': true,\n          [`ds-svg-icon--${color}`]: color !== undefined,\n          [`ds-svg-icon--${size}`]: size !== undefined,\n        })}\n        focusable=\"false\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n        {...props}\n      >\n        {children}\n      </Base>\n    );\n  }\n);\n\nexport default SvgIcon;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAiB;AACjB,kBAAgC;AA+CzB,MAAM,UAAU,aAAAA,QAAM;AAAA,EAC3B,SAASC,SAAQ,EAAE,MAAM,OAAO,UAAU,WAAW,GAAG,MAAM,GAAG,KAAK;AACpE,WACE,6BAAAD,QAAA;AAAA,MAAC,YAAAE;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH;AAAA,QACA,eAAW,YAAAC,SAAK,WAAW;AAAA,UACzB,eAAe;AAAA,UACf,CAAC,gBAAgB,KAAK,EAAE,GAAG,UAAU;AAAA,UACrC,CAAC,gBAAgB,IAAI,EAAE,GAAG,SAAS;AAAA,QACrC,CAAC;AAAA,QACD,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,eAAY;AAAA,QACX,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAO,kBAAQ;",
-  "names": ["React", "SvgIcon", "Base", "clsx"]
-}

package/src/SvgIcon/__snapshots__/index.test.tsx.snap

@@ -1,254 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders the SvgIcon with no props 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    />
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop color=base-content 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--base-content ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop color=dark 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--dark ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop color=error 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--error ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop color=error and size= xl 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop color=focus 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--focus ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop color=gray 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--gray ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop color=primary 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--primary ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop color=success 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--success ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop color=warning 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--warning ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop color=warning and size=sm 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop color=white 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--white ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop size=lg 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--lg ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop size=md 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--md ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop size=sm 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--sm ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop size=xl 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--xl ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;
-
-exports[`renders the SvgIcon with prop size=xs 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      class="ds-svg-icon--xs ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      hello
-    </svg>
-  </div>
-</body>
-`;

package/src/SvgIcon/index.test.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import SvgIcon from '@digigov/react-core/SvgIcon';
-
-it('renders the SvgIcon with no props', () => {
-  expect(render(<SvgIcon />).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop size=xs', () => {
-  expect(render(<SvgIcon size="xs">hello</SvgIcon>).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop size=sm', () => {
-  expect(render(<SvgIcon size="sm">hello</SvgIcon>).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop size=md', () => {
-  expect(render(<SvgIcon size="md">hello</SvgIcon>).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop size=lg', () => {
-  expect(render(<SvgIcon size="lg">hello</SvgIcon>).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop size=xl', () => {
-  expect(render(<SvgIcon size="xl">hello</SvgIcon>).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop color=base-content', () => {
-  expect(render(<SvgIcon color="base-content">hello</SvgIcon>).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop color=dark', () => {
-  expect(render(<SvgIcon color="dark">hello</SvgIcon>).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop color=white', () => {
-  expect(render(<SvgIcon color="white">hello</SvgIcon>).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop color=gray', () => {
-  expect(render(<SvgIcon color="gray">hello</SvgIcon>).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop color=primary', () => {
-  expect(render(<SvgIcon color="primary">hello</SvgIcon>).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop color=success', () => {
-  expect(render(<SvgIcon color="success">hello</SvgIcon>).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop color=warning', () => {
-  expect(render(<SvgIcon color="warning">hello</SvgIcon>).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop color=error', () => {
-  expect(render(<SvgIcon color="error">hello</SvgIcon>).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop color=focus', () => {
-  expect(render(<SvgIcon color="focus">hello</SvgIcon>).baseElement).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop color=warning and size=sm', () => {
-  expect(
-    render(
-      <SvgIcon color="warning" size="sm">
-        hello
-      </SvgIcon>
-    ).baseElement
-  ).toMatchSnapshot();
-});
-it('renders the SvgIcon with prop color=error and size= xl', () => {
-  expect(
-    render(
-      <SvgIcon color="warning" size="xl">
-        hello
-      </SvgIcon>
-    ).baseElement
-  ).toMatchSnapshot();
-});

package/src/SvgIcon/index.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-
-export interface SvgIconProps extends BaseProps<'svg'> {
-  /**
-   * size is optional.
-   * size prop declares the size of the svg icon.
-   * @value 'xs'
-   * @value 'sm'
-   * @value 'md'
-   * @value 'lg'
-   * @value 'xl'
-   * @default 'sm'
-   */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-  /**
-   * color property styles svg icon with Gov.gr palette's basic colors.
-   * color property is optional.
-   * @value 'base-content' 
-   * @value 'dark', always dark, among all themes
-   * @value 'white', always white, among all themes
-   * @value 'gray'
-   * @value 'primary'
-   * @value 'success'
-   * @value 'warning'
-   * @value 'error'
-   * @value 'focus', use only in focus state, in dark background
-   * @value 'info'
-   * @value 'link'
-   */
-  color?:
-    | 'base-content'
-    | 'dark'
-    | 'white'
-    | 'gray'
-    | 'primary'
-    | 'success'
-    | 'warning'
-    | 'error'
-    | 'focus'
-    | 'info'
-    | 'link';
-}
-/**
- * Use SvgIcon as global svg component.
- *  SvgIcon can be used inside other svg components as children such as CheckIcon, CaretIcon etc.
- */
-export const SvgIcon = React.forwardRef<SVGSVGElement, SvgIconProps>(
-  function SvgIcon({ size, color, children, className, ...props }, ref) {
-    return (
-      <Base
-        as="svg"
-        ref={ref}
-        className={clsx(className, {
-          'ds-svg-icon': true,
-          [`ds-svg-icon--${color}`]: color !== undefined,
-          [`ds-svg-icon--${size}`]: size !== undefined,
-        })}
-        focusable="false"
-        viewBox="0 0 24 24"
-        aria-hidden="true"
-        {...props}
-      >
-        {children}
-      </Base>
-    );
-  }
-);
-
-export default SvgIcon;