build: migrate tsconfig to TypeScript 7 (native compiler)

TypeScript 7 is the native Go compiler and removes `baseUrl` and
`moduleResolution: node|node10`. Both appear here, so `tsc` from TS7
refuses the config outright (TS5102 / TS5108) and cannot typecheck.

`paths` targets resolve relative to `baseUrl` when it is set and relative
to the tsconfig file otherwise. Every `baseUrl` folded here already
pointed at the config's own directory, so dropping it moves nothing and
the targets are left byte-identical. Where a baseUrl pointed elsewhere,
each affected target was rewritten as join(baseUrl, target).

`moduleResolution` was chosen from the declared `module`: commonjs ->
node16, esnext/preserve -> bundler. Configs whose `module` is unset or
exotic were left alone rather than guessed at.

The result is accepted by BOTH toolchains, so nothing has to upgrade
TypeScript in lockstep. Verified on hanzo/chat packages/api: tsc 5.9
779 -> 778 errors (no regression), and tsc 7.0.2 now runs the project
in 2s where it previously refused the config.

Co-Authored-By: Hanzo Dev <dev@hanzo.ai>

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.dockerignore

@@ -0,0 +1,6 @@
+.git
+*.md
+LICENSE
+.vscode/
+.idea/
+.env*

.github/dependabot.yml

@@ -0,0 +1,18 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  # Enable version updates for npm
+  - package-ecosystem: "npm"
+    # Look for `package.json` and `lock` files in the `root` directory
+    directory: "/"
+    # Check the npm registry for updates every day (weekdays)
+    schedule:
+      interval: "weekly"
+    # Add reviewers
+    reviewers:
+      - "dvaldivia"
+      - "bexsoft"

.github/hero.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="640" viewBox="0 0 1280 640" role="img" aria-label="mds">
+<rect width="1280" height="640" fill="#0A0A0A"/>
+<svg x="96" y="215" width="210" height="210" viewBox="0 0 67 67"><path d="M22.21 67V44.6369H0V67H22.21Z" fill="#fff"/><path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill="#fff"/><path d="M22.21 0H0V22.3184H22.21V0Z" fill="#fff"/><path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="#fff"/><path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="#fff"/></svg>
+<text x="378" y="276" font-family="Inter,system-ui,-apple-system,sans-serif" font-size="78" font-weight="800" letter-spacing="-2" fill="#ffffff">mds</text>
+<text x="378" y="322" font-family="Inter,system-ui,sans-serif" font-size="30" fill="#ffffff" opacity=".66">MinIO Design System is a common library of all the UI design elements.</text>
+<rect x="378" y="338" width="806" height="3" rx="1.5" fill="#ffffff" opacity=".9"/>
+<text x="378" y="390" font-family="Inter,system-ui,sans-serif" font-size="24" font-weight="600" fill="#ffffff" opacity=".5">github.com/hanzoai</text>
+<text x="1184" y="390" text-anchor="end" font-family="Inter,system-ui,sans-serif" font-size="24" font-weight="600" fill="#ffffff" opacity=".5">hanzo.ai</text>
+</svg>

.github/workflows/deployer.yml

@@ -0,0 +1,16 @@
+name: Docker
+on:
+  workflow_dispatch:
+  push:
+    branches: [main, dev, test]
+    tags: ['v*']
+permissions:
+  contents: read
+  packages: write
+  id-token: write
+jobs:
+  docker:
+    uses: hanzoai/.github/.github/workflows/docker-build.yml@main
+    with:
+      image: ghcr.io/hanzoai/mds
+    secrets: inherit

.github/workflows/jobs.yml

@@ -0,0 +1,52 @@
+name: Workflow
+
+on:
+  pull_request:
+    branches:
+      - master
+  push:
+    branches:
+      - master
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref }}
+  cancel-in-progress: true
+
+jobs:
+  review-warnings-and-build:
+    name: "Source files are prettified, then verify if build is possible"
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+    steps:
+      - name: Check out Code
+        uses: actions/checkout@v3
+
+      - name: Read .nvmrc
+        id: node_version
+        run: echo "$(cat .nvmrc)" && echo "NVMRC=$(cat .nvmrc)" >> $GITHUB_ENV
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NVMRC }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.15.0
+
+      - name: Install Dependencies
+        continue-on-error: false
+        run: |
+          pnpm install
+
+      - name: Check if build is correct
+        continue-on-error: false
+        run: |
+          pnpm build
+
+      - name: Check if Files are Prettified
+        continue-on-error: false
+        run: |
+          ./check-prettier.sh

.github/workflows/workflow-sanity.yml

@@ -0,0 +1,7 @@
+name: Workflow Sanity
+on:
+  pull_request:
+    paths: ['.github/workflows/**']
+jobs:
+  sanity:
+    uses: hanzoai/.github/.github/workflows/workflow-sanity.yml@main

.gitignore

@@ -0,0 +1,22 @@
+
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.DS_Store
+.env.development.local
+.env.local
+.env.production.local
+.env.test.local
+.idea/
+.yarn/*
+**/dist/
+# dependencies
+# misc
+dist/
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.nvmrc

@@ -0,0 +1 @@
+18

.storybook/main.js

@@ -0,0 +1,34 @@
+import remarkGfm from "remark-gfm";
+
+module.exports = {
+  stories: ["../src/**/**/*.mdx", "../src/**/**/*.stories.@(js|jsx|ts|tsx)"],
+  core: {
+    disableTelemetry: true,
+  },
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-dark-mode",
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+    "@storybook/addon-webpack5-compiler-babel",
+    "@chromatic-com/storybook",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {},
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
+};

.storybook/preview.js

@@ -0,0 +1,41 @@
+import { themes } from "@storybook/theming";
+import { darkColors, lightColors } from "../src/global/themes";
+
+export const parameters = {
+  actions: {},
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  darkMode: {
+    dark: {
+      ...themes.dark,
+      appBg: darkColors.dark,
+      appContentBg: darkColors.dark,
+      appBorderColor: darkColors.divisorColor,
+      barTextColor: darkColors.mainGrey,
+      textColor: darkColors.mainGrey,
+      barSelectedColor: darkColors.mainWhite,
+      barBg: darkColors.dark,
+      inputBg: darkColors.dark,
+      inputBorder: darkColors.mainGrey,
+      colorSecondary: darkColors.mainRed,
+    },
+    light: {
+      ...themes.normal,
+      appBg: lightColors.white,
+      appContentBg: lightColors.white,
+      appBorderColor: lightColors.divisorColor,
+      barTextColor: lightColors.mainGrey,
+      textColor: lightColors.mainGrey,
+      barSelectedColor: lightColors.mainBlue,
+      barBg: lightColors.white,
+      inputBg: lightColors.white,
+      inputBorder: lightColors.mainGrey,
+      colorSecondary: lightColors.mainBlue,
+    },
+  },
+};
+export const tags = ["autodocs"];

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

AGENTS.md

@@ -0,0 +1 @@
+LLM.md

CLAUDE.md

@@ -0,0 +1 @@
+LLM.md

Dockerfile

@@ -0,0 +1,2 @@
+FROM ghcr.io/hanzoai/spa:1.4.8
+COPY docs /public

LICENSE

@@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

LLM.md

@@ -0,0 +1,36 @@
+# Hanzo Mds
+
+## Overview
+A MinIO Components Library
+
+## Tech Stack
+- **Language**: TypeScript/JavaScript
+
+## Build & Run
+```bash
+npm install && npm run build
+npm test
+```
+
+## Structure
+```
+mds/
+  Dockerfile
+  LICENSE
+  Makefile
+  README.md
+  check-prettier.sh
+  check-warnings.sh
+  jest.config.js
+  nginx.conf
+  package.json
+  rollup.config.mjs
+  src/
+  tsconfig.json
+```
+
+## Key Files
+- `README.md` -- Project documentation
+- `package.json` -- Dependencies and scripts
+- `Makefile` -- Build automation
+- `Dockerfile` -- Container build

Makefile

@@ -0,0 +1,13 @@
+default: build
+
+build:
+	@(pnpm install; pnpm build;)
+
+lint:
+	@(pnpm prettier --write . --loglevel warn; cd ..)
+
+test:
+	@(pnpm install; pnpm test;)
+
+test-warnings:
+	./check-warnings.sh

README.md

@@ -1,4 +1,23 @@
-MinIO Design Sytem
-===
+<p align="center"><img src=".github/hero.svg" alt="mds" width="880"></p>
 
-The MinIO Design System is a design specification for all UI elements used in MinIO products.
+# MinIO Design System
+
+The MinIO Design System is a design specification for all UI elements used in MinIO products.
+
+## How to test
+
+You can test this package using the embedded storybook. Please follow these steps:
+
+1. Do `yarn install` in the root folder of mds
+2. Start Story book by running `yarn storybook`
+3. Open any browser and go to `http://localhost:6006`
+
+## Build distribution files
+
+To create distribution files you can run `yarn build` or `make build` in source folder. This will create the required dist folders.
+
+This process is required everytime a new component is created and ready to be distributed
+
+## License
+
+MinIO Design System source is licensed under the GNU AGPLv3 license that can be found in the [LICENSE](https://github.com/minio/mds/blob/master/LICENSE) file.

check-prettier.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+yarn install
+yarn prettier --check ./src

check-warnings.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+yell() { echo "$0: $*" >&2; }
+
+die() {
+  yell "$*"
+  cat yarn.log
+  exit 111
+}
+
+try() { "$@" &> yarn.log || die "cannot $*"; }
+
+rm -f yarn.log
+try make build
+
+if cat yarn.log | grep "Compiled with warnings"; then
+  echo "There are warnings in the code"
+  exit 1
+fi

jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+};

nginx.conf

@@ -0,0 +1,19 @@
+events {}
+
+http {
+    default_type  application/octet-stream;
+
+    include mime.types;
+    types {
+        application/javascript mjs;
+    }
+    server {
+        listen       80;
+
+        location / {
+            root   /usr/share/nginx/html;
+            index  index.html index.htm;
+            try_files $uri $uri/ =404;
+        }
+    }
+}

package.json

@@ -0,0 +1,72 @@
+{
+  "name": "mds",
+  "version": "1.1.3",
+  "description": "A MinIO Components Library",
+  "homepage": ".",
+  "license": "AGPL-3.0-or-later",
+  "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/mds.d.ts",
+  "scripts": {
+    "build": "rm -rf dist && rollup -c",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o docs",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@storybook/test": "^8.6.12",
+    "@types/styled-components": "^5.1.34",
+    "@uiw/react-textarea-code-editor": "^3.1.1",
+    "detect-gpu": "^5.0.70",
+    "luxon": "^3.6.1",
+    "react-calendar": "^5.1.0",
+    "react-virtualized": "^9.22.6",
+    "styled-components": "^5.3.11"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-webpack5": "^8.6.12",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "^4.17.16",
+    "@types/luxon": "^3.6.2",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@types/react-virtualized": "^9.22.2",
+    "babel-loader": "^10.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lodash": "^4.17.21",
+    "prettier": "^3.5.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "remark-gfm": "^4.0.1",
+    "rollup": "^4.40.2",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-import-css": "^3.5.8",
+    "rollup-plugin-import-file": "^1.0.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2",
+    "storybook": "^8.6.12",
+    "storybook-dark-mode": "4.0.2",
+    "ts-jest": "^29.3.3",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3"
+  },
+  "packageManager": "pnpm@9.15.0"
+}

rollup.config.mjs

@@ -0,0 +1,42 @@
+import { terser } from "rollup-plugin-terser";
+import dts from "rollup-plugin-dts";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import css from "rollup-plugin-import-css";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import copy from "rollup-plugin-copy";
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        esModule: true,
+        file: "dist/esm/index.js",
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    makeAbsoluteExternalsRelative: true,
+    plugins: [
+      peerDepsExternal(),
+      resolve({
+        browser: true,
+      }),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      terser(),
+      css({ alwaysOutput: true, minify: true }),
+      copy({
+        targets: [{ src: "src/components/assets", dest: "dist" }],
+      }),
+    ],
+    external: ["react", "react-dom", "styled-components"],
+  },
+  {
+    input: "dist/esm/src/index.d.ts",
+    output: [{ file: "dist/mds.d.ts", format: "es" }],
+    plugins: [dts()],
+  },
+];

src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,198 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { useState } from "react";
+import { Meta, Story } from "@storybook/react";
+
+import Accordion from "./Accordion";
+import { AccordionProps } from "./Accordion.types";
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import GlobalStyles from "../GlobalStyles/GlobalStyles";
+
+export default {
+  title: "MDS/Layout/Accordion",
+  component: Accordion,
+  argTypes: {},
+} as Meta<typeof Accordion>;
+
+const Template: Story<AccordionProps> = ({ title, children, disabled, sx }) => {
+  const [expandedPanel, setExpandedPanel] = useState<string>("closed");
+
+  const expandFunction = (expandPanel: string) => {
+    if (expandedPanel === expandPanel) {
+      setExpandedPanel("other");
+      return;
+    }
+    setExpandedPanel(expandPanel);
+  };
+
+  return (
+    <StoryThemeProvider>
+      <GlobalStyles />
+      <Accordion
+        title={title}
+        expanded={expandedPanel === "panel1"}
+        onTitleClick={() => {
+          expandFunction("panel1");
+        }}
+        id={"accordion1"}
+        sx={sx}
+        disabled={disabled}
+      >
+        {children}
+      </Accordion>
+      <Accordion
+        title={title}
+        expanded={expandedPanel === "panel2"}
+        onTitleClick={() => {
+          expandFunction("panel2");
+        }}
+        id={"accordion2"}
+        sx={sx}
+      >
+        {children}
+      </Accordion>
+      <Accordion
+        title={title}
+        expanded={expandedPanel === "panel3"}
+        onTitleClick={() => {
+          expandFunction("panel3");
+        }}
+        id={"accordion3"}
+        sx={sx}
+      >
+        {children}
+      </Accordion>
+    </StoryThemeProvider>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Click to Expand",
+  children: (
+    <div>
+      <p>
+        My computer-- disassembled is a maze of cables, drives chips and
+        ports--an array of connections, silver solderings, twisting wires.
+      </p>
+      <p>
+        But when the satiny case is latched in place coils and cables disappear.
+        The smallest particle of matter is not an atom, but a byte-- a particle
+        of magic that combines and multiplies unseen inside the blinking box.
+      </p>
+      <p>
+        Creation occurs inside my computer-- friends, family rest behind the
+        pressing of selected keys. Words and faces form; smiles and frowns
+        become feelings. Attraction becomes addiction.
+      </p>
+      <p>
+        Inside my computer merchants buy and sell-- musicians sing, artists
+        train pictures into pixels, poets recollect emotion in tranquillity.
+      </p>
+      <p>
+        Inside my computer dreams are imagined into reality-- inventions, hopes,
+        ideas are born and nurtured into happenings. Strangers share a table,
+        touch hands across the world.
+      </p>
+      <p>
+        Inside my computer the pulse of human hearts waxes and wanes as people
+        fall in and out of love.
+      </p>
+      <div style={{ textAlign: "right" }}>Karen Ruff - 2014</div>
+    </div>
+  ),
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  title: "MultiState Accordion",
+  disabled: true,
+  children: (
+    <div>
+      <p>
+        My computer-- disassembled is a maze of cables, drives chips and
+        ports--an array of connections, silver solderings, twisting wires.
+      </p>
+      <p>
+        But when the satiny case is latched in place coils and cables disappear.
+        The smallest particle of matter is not an atom, but a byte-- a particle
+        of magic that combines and multiplies unseen inside the blinking box.
+      </p>
+      <p>
+        Creation occurs inside my computer-- friends, family rest behind the
+        pressing of selected keys. Words and faces form; smiles and frowns
+        become feelings. Attraction becomes addiction.
+      </p>
+      <p>
+        Inside my computer merchants buy and sell-- musicians sing, artists
+        train pictures into pixels, poets recollect emotion in tranquillity.
+      </p>
+      <p>
+        Inside my computer dreams are imagined into reality-- inventions, hopes,
+        ideas are born and nurtured into happenings. Strangers share a table,
+        touch hands across the world.
+      </p>
+      <p>
+        Inside my computer the pulse of human hearts waxes and wanes as people
+        fall in and out of love.
+      </p>
+      <div style={{ textAlign: "right" }}>Karen Ruff - 2014</div>
+    </div>
+  ),
+};
+
+export const CustomStyles = Template.bind({});
+CustomStyles.args = {
+  title: "MultiState Accordion",
+  children: (
+    <div>
+      <p>
+        My computer-- disassembled is a maze of cables, drives chips and
+        ports--an array of connections, silver solderings, twisting wires.
+      </p>
+      <p>
+        But when the satiny case is latched in place coils and cables disappear.
+        The smallest particle of matter is not an atom, but a byte-- a particle
+        of magic that combines and multiplies unseen inside the blinking box.
+      </p>
+      <p>
+        Creation occurs inside my computer-- friends, family rest behind the
+        pressing of selected keys. Words and faces form; smiles and frowns
+        become feelings. Attraction becomes addiction.
+      </p>
+      <p>
+        Inside my computer merchants buy and sell-- musicians sing, artists
+        train pictures into pixels, poets recollect emotion in tranquillity.
+      </p>
+      <p>
+        Inside my computer dreams are imagined into reality-- inventions, hopes,
+        ideas are born and nurtured into happenings. Strangers share a table,
+        touch hands across the world.
+      </p>
+      <p>
+        Inside my computer the pulse of human hearts waxes and wanes as people
+        fall in and out of love.
+      </p>
+      <div style={{ textAlign: "right" }}>Karen Ruff - 2014</div>
+    </div>
+  ),
+  sx: {
+    backgroundColor: "#009900",
+    borderColor: "#ffff00",
+    color: "#fff",
+  },
+};

src/components/Accordion/Accordion.tsx

@@ -0,0 +1,101 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, HTMLAttributes } from "react";
+import styled from "styled-components";
+import get from "lodash/get";
+import {
+  AccordionContentProps,
+  AccordionMainProps,
+  AccordionProps,
+} from "./Accordion.types";
+import { lightColors } from "../../global/themes";
+import { ExpandCaret } from "../Icons";
+import CollapseCaret from "../Icons/CollapseCaret";
+import Box from "../Box/Box";
+
+const AccordionContainer = styled.div<AccordionMainProps>(({ theme, sx }) => ({
+  border: `1px solid ${get(theme, "borderColor", lightColors.borderColor)}`,
+  borderRadius: 2,
+  ...sx,
+}));
+
+const AccordionTitleBar = styled.div<HTMLAttributes<HTMLDivElement>>(
+  ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: 10,
+    fontWeight: "bold",
+    cursor: "pointer",
+    userSelect: "none",
+    "&.disabled": {
+      cursor: "not-allowed",
+      color: get(theme, "mutedText", lightColors.mutedText),
+      backgroundColor: get(
+        theme,
+        "signalColors.disabled",
+        lightColors.disabledGrey,
+      ),
+    },
+    "&:not(.disabled):hover": {
+      backgroundColor: get(theme, "boxBackground", lightColors.boxBackground),
+    },
+  }),
+);
+
+const AccordionContent = styled.div<AccordionContentProps>(
+  ({ theme, expanded }) => ({
+    borderTop: expanded
+      ? `1px solid ${get(theme, "borderColor", lightColors.borderColor)}`
+      : "0",
+    display: "grid",
+    gridTemplateRows: expanded ? "1fr" : "0fr",
+    transition: "250ms grid-template-rows ease",
+    "& .expandSubContainer": {
+      overflow: "hidden",
+      padding: expanded ? 10 : 0,
+      transition: expanded ? "initial" : "250ms padding ease 150ms",
+    },
+  }),
+);
+
+const Accordion: FC<AccordionProps> = ({
+  title,
+  expanded,
+  children,
+  onTitleClick,
+  disabled,
+  id,
+  sx,
+}) => {
+  return (
+    <AccordionContainer id={id} sx={sx}>
+      <AccordionTitleBar
+        onClick={() => (!disabled ? onTitleClick() : null)}
+        className={`accordionTitle ${disabled ? "disabled" : ""}`}
+      >
+        {title}
+        {expanded ? <CollapseCaret /> : <ExpandCaret />}
+      </AccordionTitleBar>
+      <AccordionContent className={`accordionContent`} expanded={expanded}>
+        <Box className={"expandSubContainer"}>{children}</Box>
+      </AccordionContent>
+    </AccordionContainer>
+  );
+};
+
+export default Accordion;

src/components/Accordion/Accordion.types.ts

@@ -0,0 +1,36 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { ReactNode } from "react";
+import { CSSObject } from "styled-components";
+
+export interface AccordionProps {
+  expanded: boolean;
+  onTitleClick: () => void;
+  id: string;
+  title: ReactNode;
+  children: ReactNode;
+  disabled?: boolean;
+  sx?: CSSObject;
+}
+
+export interface AccordionMainProps {
+  sx?: CSSObject;
+}
+
+export interface AccordionContentProps {
+  expanded: boolean;
+}

src/components/ActionLink/ActionLink.stories.tsx

@@ -0,0 +1,61 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+
+import ActionLink from "./ActionLink";
+import { ActionLinkProps } from "./ActionLink.types";
+
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import GlobalStyles from "../GlobalStyles/GlobalStyles";
+
+export default {
+  title: "MDS/Forms/ActionLink",
+  component: ActionLink,
+  argTypes: {},
+} as Meta<typeof ActionLink>;
+
+const Template: Story<ActionLinkProps> = (args) => (
+  <StoryThemeProvider>
+    <GlobalStyles />
+    <span style={{ fontSize: 16 }}>
+      Some Text that can be combined with an{" "}
+      <ActionLink
+        {...args}
+        label={"Action Link"}
+        onClick={() => alert("You clicked me!")}
+      />
+      , this text can continue after it.
+    </span>
+  </StoryThemeProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const LoadingLink = Template.bind({});
+LoadingLink.args = {
+  isLoading: true,
+};
+
+export const CustomStyles = Template.bind({});
+CustomStyles.args = {
+  sx: {
+    backgroundColor: "#f87",
+    color: "#fff",
+  },
+};

src/components/ActionLink/ActionLink.tsx

@@ -0,0 +1,56 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, Fragment } from "react";
+import get from "lodash/get";
+import styled from "styled-components";
+import { ActionLinkProps, BaseActionLinkProps } from "./ActionLink.types";
+import { lightColors } from "../../global/themes";
+import Loader from "../Loader/Loader";
+
+const ActionLinkBase = styled.button<BaseActionLinkProps>(({ theme, sx }) => ({
+  cursor: "pointer",
+  display: "inline-flex",
+  backgroundColor: "transparent",
+  border: 0,
+  padding: 0,
+  color: get(theme, "linkColor", lightColors.linkColor),
+  textDecoration: "none",
+  fontSize: "inherit",
+  "&:hover": {
+    textDecoration: "underline",
+  },
+  ...sx,
+}));
+
+const ActionLink: FC<
+  ActionLinkProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+> = ({ label = "", isLoading = false, sx, children, ...props }) => {
+  return (
+    <ActionLinkBase {...props} sx={sx}>
+      {isLoading ? (
+        <Loader style={{ width: 16, height: 16 }} />
+      ) : (
+        <Fragment>
+          {label}
+          {children}
+        </Fragment>
+      )}
+    </ActionLinkBase>
+  );
+};
+
+export default ActionLink;

src/components/ActionLink/ActionLink.types.ts

@@ -0,0 +1,28 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { CSSObject } from "styled-components";
+
+export interface CommonActionLinkProps {
+  isLoading?: boolean;
+  label?: any;
+}
+
+export interface BaseActionLinkProps {
+  sx?: CSSObject;
+}
+
+export type ActionLinkProps = CommonActionLinkProps & BaseActionLinkProps;

src/components/ActionsList/ActionsList.stories.tsx

@@ -0,0 +1,98 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+
+import ActionsList from "./ActionsList";
+import { ActionsListProps } from "./ActionsList.types";
+
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import GlobalStyles from "../GlobalStyles/GlobalStyles";
+import TestIcon from "../../utils/TestIcon";
+
+export default {
+  title: "MDS/Layout/ActionsList",
+  component: ActionsList,
+  argTypes: {},
+} as Meta<typeof ActionsList>;
+
+const Template: Story<ActionsListProps> = (args) => (
+  <StoryThemeProvider>
+    <GlobalStyles />
+    <ActionsList {...args} />
+  </StoryThemeProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Actions Panel Title",
+  items: [
+    {
+      action: () => alert("Action clicked"),
+      icon: <TestIcon />,
+      label: "Test Action",
+      tooltip: "Action tooltip",
+      disabled: false,
+    },
+    {
+      action: () => alert("you shouldn't see this"),
+      icon: <TestIcon />,
+      label: "Disabled Test Action",
+      tooltip: "Disabled action tooltip",
+      disabled: true,
+    },
+    {
+      action: () => alert("No tooltip clicked"),
+      icon: <TestIcon />,
+      label: "No Tooltip",
+      tooltip: "",
+      disabled: false,
+    },
+  ],
+};
+
+export const TitleWithIcon = Template.bind({});
+TitleWithIcon.args = {
+  title: (
+    <span style={{ display: "inline-flex", alignItems: "center" }}>
+      <TestIcon style={{ marginRight: 10 }} /> Custom Node Title
+    </span>
+  ),
+  items: [
+    {
+      action: () => alert("Action clicked"),
+      icon: <TestIcon />,
+      label: "Test Action",
+      tooltip: "Action tooltip",
+      disabled: false,
+    },
+    {
+      action: () => alert("you shouldn't see this"),
+      icon: <TestIcon />,
+      label: "Disabled Test Action",
+      tooltip: "Disabled action tooltip",
+      disabled: true,
+    },
+    {
+      action: () => alert("No tooltip clicked"),
+      icon: <TestIcon />,
+      label: "No Tooltip",
+      tooltip: "",
+      disabled: false,
+    },
+  ],
+};

src/components/ActionsList/ActionsList.tsx

@@ -0,0 +1,104 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, HTMLAttributes } from "react";
+import { ActionsListPanelProps, ActionsListProps } from "./ActionsList.types";
+import styled from "styled-components";
+import Tooltip from "../Tooltip/Tooltip";
+import ObjectActionButton from "./ObjectActionButton";
+import get from "lodash/get";
+
+const ActionsListPanel = styled.div<
+  HTMLAttributes<HTMLDivElement> & ActionsListPanelProps
+>(({ theme, sx }) => ({
+  "& .titleLabel": {
+    fontSize: 14,
+    fontWeight: "700",
+    color: get(theme, "actionsList.titleColor", "#000"),
+    padding: "12px 30px 8px 22px",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    alignItems: "center",
+  },
+  "& .objectActions": {
+    backgroundColor: get(theme, "actionsList.backgroundColor", "#F8F8F8"),
+    border: `${get(
+      theme,
+      "actionsList.containerBorderColor",
+      "#F1F1F1",
+    )} 1px solid`,
+    borderRadius: 3,
+    margin: "8px 22px",
+    padding: 0,
+    "& span": {
+      width: "100%",
+    },
+    "& li": {
+      listStyle: "none",
+      padding: 6,
+      margin: 0,
+      borderBottom: `${get(
+        theme,
+        "actionsList.optionsBorder",
+        "#E5E5E5",
+      )} 1px solid`,
+      fontSize: 14,
+      "&:first-of-type": {
+        padding: 10,
+        fontWeight: "bold",
+        color: get(theme, "actionsList.titleColor", "#000"),
+      },
+      "&:last-of-type": {
+        borderBottom: 0,
+      },
+      "&::before": {
+        content: "' '!important",
+      },
+    },
+  },
+  ...sx,
+}));
+
+const ActionsList: FC<ActionsListProps> = ({ sx, items, title }) => {
+  return (
+    <ActionsListPanel sx={sx}>
+      <div className={"titleLabel"}>{title}</div>
+      <ul className={"objectActions"}>
+        <li>Actions:</li>
+        {items.map((actionItem, index) => {
+          return (
+            <li key={`action-element-${index.toString()}`}>
+              <Tooltip tooltip={actionItem.tooltip || ""}>
+                <ObjectActionButton
+                  label={actionItem.label}
+                  icon={actionItem.icon}
+                  onClick={actionItem.action}
+                  disabled={actionItem.disabled}
+                  style={{
+                    pointerEvents: actionItem.disabled ? "none" : "initial",
+                  }}
+                />
+              </Tooltip>
+            </li>
+          );
+        })}
+      </ul>
+    </ActionsListPanel>
+  );
+};
+
+export default ActionsList;

src/components/ActionsList/ActionsList.types.ts

@@ -0,0 +1,42 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { CSSObject } from "styled-components";
+
+export interface ActionItem {
+  action: () => void;
+  label: string;
+  disabled: boolean;
+  icon: React.ReactNode;
+  tooltip: string;
+}
+
+export interface ActionsListProps {
+  sx?: CSSObject;
+  items: ActionItem[];
+  title: React.ReactNode;
+}
+
+export interface ActionsListPanelProps {
+  sx?: CSSObject;
+}
+
+export interface ActionButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string;
+  icon: React.ReactNode;
+}

src/components/ActionsList/ObjectActionButton.tsx

@@ -0,0 +1,69 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC } from "react";
+import { ActionButtonProps } from "./ActionsList.types";
+import styled from "styled-components";
+import get from "lodash/get";
+
+const CustomButton = styled.button<
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  color: get(theme, "actionsList.optionsTextColor", "#5E5E5E"),
+  width: "100%",
+  height: 22,
+  margin: 0,
+  padding: "0 15px",
+  fontSize: 14,
+  fontWeight: "normal",
+  whiteSpace: "nowrap",
+  backgroundColor: "transparent",
+  border: "none",
+  cursor: "pointer",
+  "&:hover": {
+    backgroundColor: "transparent",
+    color: get(theme, "actionsList.optionsHoverTextColor", "#000"),
+  },
+  "& svg": {
+    width: 11,
+    marginRight: 8,
+  },
+  "&:disabled": {
+    color: get(theme, "actionsList.disabledOptionsTextColor", "#EBEBEB"),
+    cursor: "not-allowed",
+  },
+  "& .buttonIcon": {
+    width: 11,
+  },
+}));
+
+const ObjectActionButton: FC<ActionButtonProps> = ({
+  icon,
+  label,
+  ...props
+}) => {
+  return (
+    <CustomButton {...props}>
+      {icon}
+      {label}
+    </CustomButton>
+  );
+};
+
+export default ObjectActionButton;

src/components/ApplicationLogo/ApplicationLogo.stories.tsx

@@ -0,0 +1,44 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+
+import ApplicationLogo from "./ApplicationLogo";
+import { ApplicationLogoProps } from "./ApplicationLogo.types";
+
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import GlobalStyles from "../GlobalStyles/GlobalStyles";
+
+export default {
+  title: "MDS/Graphics/ApplicationLogo",
+  component: ApplicationLogo,
+  argTypes: {},
+} as Meta<typeof ApplicationLogo>;
+
+const Template: Story<ApplicationLogoProps> = (args) => (
+  <StoryThemeProvider>
+    <GlobalStyles />
+    <div style={{ maxWidth: "200px" }}>
+      <ApplicationLogo {...args} />
+    </div>
+  </StoryThemeProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  applicationName: "console",
+};

src/components/ApplicationLogo/ApplicationLogo.tsx

@@ -0,0 +1,140 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC } from "react";
+import { ApplicationLogoProps } from "./ApplicationLogo.types";
+import ConsoleStandard from "./Logos/Console/ConsoleStandard";
+import ConsoleAGPL from "./Logos/Console/ConsoleAGPL";
+import ConsoleEnterprise from "./Logos/Console/ConsoleEnterprise";
+import Operator from "./Logos/Operator/Operator";
+import DirectPV from "./Logos/DirectPV/DirectPV";
+import KES from "./Logos/KES/KES";
+import SUBNET from "./Logos/SUBNET/SUBNET";
+import ConsoleSingle from "./Logos/Console/ConsoleSingle";
+import SubnetOPS from "./Logos/SubnetOPS/SubnetOPS";
+import Cloud from "./Logos/Cloud/Cloud";
+import Releases from "./Logos/Releases/Releases";
+import VMBroker from "./Logos/VMBroker/VMBroker";
+import EurekaNew from "./Logos/Eureka/EurekaNew";
+import Eureka from "./Logos/Eureka/Eureka";
+import KMS from "./Logos/KMS/KMS";
+import LoadBalancer from "./Logos/LoadBalancer/LoadBalancer";
+import IndexLogo from "./Logos/IndexLogo/IndexLogo";
+import Cache from "./Logos/Cache/Cache";
+import Monitor from "./Logos/Monitor/Monitor";
+import Observe from "./Logos/Observe/Observe";
+import MissionControl from "./Logos/MissionControl/MissionControl";
+import GlobalConsole from "./Logos/Console/GlobalConsole";
+import ThemedLogo from "../ThemedLogo/ThemedLogo";
+import Enterprise from "./Logos/Enterprise/Enterprise";
+import StorageEnterprise from "./Logos/Storage/StorageEnterprise";
+import StorageEnterpriseOS from "./Logos/Storage/StorageEnterpriseOS";
+import StorageEnterpriseOSVertical from "./Logos/Storage/StorageEnterpriseOSVertical";
+import AIStor from "./Logos/AIStor/AIStor";
+import AIStorHorizontal from "./Logos/AIStor/AIStorHorizontal";
+import AIStorTag from "./Logos/AIStor/AIStorTag";
+
+const ApplicationLogo: FC<ApplicationLogoProps> = ({
+  applicationName,
+  subVariant = "simple",
+  inverse,
+  onClick,
+}) => {
+  switch (applicationName) {
+    case "console":
+      switch (subVariant) {
+        case "standard":
+          return <ConsoleStandard inverse={!!inverse} onClick={onClick} />;
+        case "enterprise":
+          return <ConsoleEnterprise inverse={!!inverse} onClick={onClick} />;
+        case "AGPL":
+          return <ConsoleAGPL inverse={!!inverse} onClick={onClick} />;
+        default:
+          return <ConsoleSingle inverse={!!inverse} onClick={onClick} />;
+      }
+      break;
+    case "directpv":
+      return <DirectPV inverse={!!inverse} onClick={onClick} />;
+    case "subnet":
+      return <SUBNET inverse={!!inverse} onClick={onClick} />;
+    case "kes":
+      return <KES inverse={!!inverse} onClick={onClick} />;
+    case "operator":
+      return <Operator inverse={!!inverse} onClick={onClick} />;
+    case "subnetops":
+      return <SubnetOPS inverse={!!inverse} onClick={onClick} />;
+    case "cloud":
+      return <Cloud inverse={!!inverse} onClick={onClick} />;
+    case "releases":
+      return <Releases inverse={!!inverse} onClick={onClick} />;
+      break;
+    case "vmbroker":
+      return <VMBroker inverse={!!inverse} onClick={onClick} />;
+      break;
+    case "eureka":
+      switch (subVariant) {
+        case "new":
+          return <EurekaNew inverse={!!inverse} onClick={onClick} />;
+        default:
+          return <Eureka inverse={!!inverse} onClick={onClick} />;
+      }
+      break;
+    case "kms":
+      return <KMS inverse={!!inverse} onClick={onClick} />;
+    case "loadbalancer":
+      return <LoadBalancer inverse={!!inverse} onClick={onClick} />;
+    case "index":
+      return <IndexLogo inverse={!!inverse} onClick={onClick} />;
+    case "cache":
+      return <Cache inverse={!!inverse} onClick={onClick} />;
+    case "monitor":
+      return <Monitor inverse={!!inverse} onClick={onClick} />;
+    case "observe":
+      return <Observe inverse={!!inverse} onClick={onClick} />;
+    case "missioncontrol":
+      return <MissionControl inverse={!!inverse} onClick={onClick} />;
+    case "globalconsole":
+      return <GlobalConsole inverse={!!inverse} onClick={onClick} />;
+    case "enterprise":
+      return <Enterprise inverse={!!inverse} onClick={onClick} />;
+    case "aistor":
+      switch (subVariant) {
+        case "simple":
+          return <AIStor inverse={!!inverse} onClick={onClick} />;
+          break;
+        case "horizontal":
+          return <AIStorHorizontal inverse={!!inverse} onClick={onClick} />;
+        default:
+          return <AIStorTag inverse={!!inverse} onClick={onClick} />;
+      }
+    case "storage":
+      switch (subVariant) {
+        case "enterprise":
+          return <StorageEnterprise inverse={!!inverse} onClick={onClick} />;
+          break;
+        case "enterpriseos":
+          return <StorageEnterpriseOS inverse={!!inverse} onClick={onClick} />;
+        case "enterpriseosvertical":
+          return (
+            <StorageEnterpriseOSVertical inverse={!!inverse} onClick={onClick} />
+          );
+        default:
+          return <ThemedLogo onClick={onClick} />;
+      }
+  }
+};
+
+export default ApplicationLogo;

src/components/ApplicationLogo/ApplicationLogo.types.ts

@@ -0,0 +1,53 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+
+export interface ApplicationLogoProps {
+  applicationName:
+    | "console"
+    | "operator"
+    | "directpv"
+    | "kes"
+    | "subnet"
+    | "subnetops"
+    | "cloud"
+    | "releases"
+    | "vmbroker"
+    | "eureka"
+    | "kms"
+    | "loadbalancer"
+    | "index"
+    | "cache"
+    | "monitor"
+    | "observe"
+    | "missioncontrol"
+    | "globalconsole"
+    | "storage"
+    | "enterprise"
+    | "aistor";
+  subVariant?:
+    | "simple"
+    | "AGPL"
+    | "standard"
+    | "enterprise"
+    | "new"
+    | "enterpriseos"
+    | "enterpriseosvertical"
+    | "horizontal";
+  inverse?: boolean;
+  onClick?: React.MouseEventHandler<any> | undefined;
+}

src/components/ApplicationLogo/Logos/AIStor/AIStor.tsx

@@ -0,0 +1,68 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2024 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const AIStor: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 397.3 51" inverse={inverse} onClick={onClick}>
+      <g>
+        <path
+          className={"logoSection"}
+          d="M102.5,11.5V4.2c0-1.7,1.4-3.2,3.2-3.2h17.7c3.5,0,4.4,4.8,1.2,6.1l-17.7,7.3
+		C104.8,15.3,102.5,13.8,102.5,11.5"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M58.9,49.8h16.2L49,1.3H28.6L2.1,49.8h19.5l22.6-9.4c3.1-1.3,2.2-5.8-1.2-5.8H25.8l13-25.6
+		C38.7,8.8,58.9,49.8,58.9,49.8z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M185.7,6.6l-4.5,9.4c-7-3.7-16.2-5.6-24.4-5.6c-8.2,0-12.8,1.5-12.8,4.3c0,3.2,5.9,4.1,17.5,5
+		c16.1,1.2,26.3,4.8,26.3,14.5s-11.4,16.5-30.1,16.5c-13,0-23-3.2-29.7-8.8l6.9-8.2c5.2,4.4,14.8,6.8,24,6.8s14.5-2.1,14.5-5.2
+		c0-3.5-6.4-4.4-18.9-5.4c-13.6-1-24.8-4.5-24.8-14.2c0-8.9,10.4-15.5,28.3-15.5C168.1,0.3,177.9,2.2,185.7,6.6"
+        />
+        <polygon
+          className={"logoApplicationName"}
+          points="215.6,49.8 215.6,11.3 191.4,11.3 191.4,1.2 253.5,1.2 253.5,11.3 229.3,11.3 229.3,49.8 	"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M326.8,25.4c0,15.3-14.4,25.3-35.6,25.3s-35.5-10-35.5-25.3s14.6-25.2,35.5-25.2S326.8,9.8,326.8,25.4
+		 M270.3,25.3c0,9.4,8.5,15.4,20.9,15.4s20.7-6,20.7-15.4c0-10.2-8.4-14.9-20.7-14.9S270.3,15.1,270.3,25.3"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M395.2,49.8l-20.6-18.2c11.9,0,19.5-7.3,19.5-15.1c0-8.6-7.9-15.2-25.9-15.2h-31.9v48.5h13.8V11.1h16.1
+		c8.8,0,13.2,1.9,13.2,6.4s-3.4,7.1-12.5,7.1h-7.9c-1.8,0-3,0.4-3.5,1.7c-0.4,1.1-0.1,2.2,1.9,4.3L376,49.8L395.2,49.8L395.2,49.8z"
+        />
+        <rect
+          x="80.6"
+          y="1.2"
+          className={"logoApplicationName"}
+          width="13.8"
+          height="48.4"
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default AIStor;

src/components/ApplicationLogo/Logos/AIStor/AIStorHorizontal.tsx

@@ -0,0 +1,90 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2024 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const AIStorHorizontal: FC<SVGProps<any> & LogoBaseProps> = ({
+  inverse,
+  onClick,
+}) => {
+  return (
+    <LogoBase viewBox="0 0 576.2 51" inverse={inverse} onClick={onClick}>
+      <g>
+        <g id="Layer_1">
+          <g id="Layer_1-2" data-name="Layer_1">
+            <g id="Layer_1-2">
+              <g>
+                <path className={"logoSection"} d="M312.6,49.1h0Z" />
+                <path
+                  className={"logoSection"}
+                  d="M82.3,26.9v20.5c0,1.1-.3,1.3-1.4,1.3h-13.5c-.9,0-1.2-.2-1.2-1.2v-18.5c0-2.1-1.1-2.8-2.9-1.7l-18,10.5c-2.4,1.5-4.7,1.4-7.1,0-5.6-3.5-11.3-6.9-17-10.4-.6-.4-1.3-.8-2.1-.4-.8.5-.9,1.2-.9,2v18.5c0,.9-.3,1.1-1.1,1.1H3.3c-.9,0-1.1-.3-1.1-1.1V6.7c0-1.9.5-3.6,2.3-4.5,1.8-1,3.5-.6,5.2.4,10.3,6.3,20.6,12.6,30.9,18.9,1.2.7,2,.7,3.1,0,10.4-6.4,20.8-12.7,31.1-19,2.7-1.6,5.7-.8,6.9,1.9.3.7.3,1.4.3,2.1v20.4s.3,0,.3,0Z"
+                />
+                <path
+                  className={"logoSection"}
+                  d="M123.3,26.8V6.4c0-3.8,3.4-5.9,6.8-4.1,13.7,7.3,27.4,14.6,41.1,21.9.4.2.8.5,1.4.5,1,0,1.5-.7,1.5-2V2.8c0-.8.1-1.1,1-1.1h14.2c.8,0,1,.2,1,1v41.3c0,3.8-3.5,5.9-6.9,4-12.8-6.8-25.6-13.5-38.4-20.3-1-.5-2-1.1-3-1.6-1.7-.9-2.7-.3-2.7,1.6v19.6c0,1.1-.3,1.4-1.4,1.3h-13.8c-.8,0-1-.2-1-1v-20.8h.2Z"
+                />
+                <path
+                  className={"logoSection"}
+                  d="M252.7,49.6c-6.6,0-13.6-1.1-20.1-4.4-5.7-2.9-10.1-7.1-12-13.3-3.1-10,.7-19.8,9.9-25.4,5.1-3.1,10.8-4.7,16.7-5.3,7.3-.8,14.5-.3,21.6,1.9,5.8,1.9,10.9,4.8,14.5,9.8,7,9.7,4.4,23.4-5.8,30.3-4.8,3.3-10.2,5-15.9,5.8-2.7.4-5.5.6-8.9.6ZM253.4,43.3c1.8,0,3.7,0,5.6-.3,5.1-.7,9.9-2,14-5.1,7.4-5.5,8.6-15.8,2.6-22.8-2.6-3.1-6.1-4.9-9.9-6.1-6.4-2-12.9-2.3-19.5-1.3-4.4.7-8.7,2-12.3,4.8-5.4,4.1-7.5,9.5-6.2,16.1.9,5,4,8.4,8.3,10.8,5.4,3,11.2,3.9,17.4,3.9h0Z"
+                />
+                <path
+                  className={"logoSection"}
+                  d="M94.8,25.1V2.6c0-.9.3-1.1,1.1-1.1h14.1c.7,0,.9.1.9.9v45.5c0,.7-.2.9-.9.9h-14.2c-.9,0-1-.3-1-1.1v-22.6Z"
+                />
+                <path
+                  className={"logoSection"}
+                  d="M210.3,25.2v22.4c0,1-.3,1.2-1.2,1.2h-5.3c-.9,0-1.2-.2-1.2-1.2V10.6c0-12.4,0-5.4,0-8.1s.3-1.2,1.2-1.1h5.5c.8,0,1,.2,1,1v22.7h0Z"
+                />
+              </g>
+            </g>
+          </g>
+          <g>
+            <path
+              className={"logoSection"}
+              d="M369.8,24.1v-4.7c0-1.1.9-2,2-2h11.3c2.2,0,2.8,3.1.8,3.9l-11.3,4.7c-1.3.5-2.8-.4-2.8-1.9"
+            />
+            <path
+              className={"logoApplicationName"}
+              d="M341.9,48.6h10.4l-16.8-31h-13.1l-17,31h12.5l14.5-6c2-.8,1.4-3.7-.7-3.7h-11.1l8.3-16.4s12.9,26.2,12.9,26.2Z"
+            />
+            <path
+              className={"logoApplicationName"}
+              d="M423.1,20.9l-2.9,6c-4.5-2.4-10.4-3.6-15.6-3.6s-8.2,1-8.2,2.7,3.8,2.7,11.2,3.2c10.3.8,16.8,3.1,16.8,9.3s-7.3,10.6-19.3,10.6-14.7-2.1-19-5.7l4.4-5.2c3.3,2.8,9.5,4.4,15.4,4.4s9.3-1.4,9.3-3.3-4.1-2.8-12.1-3.5c-8.7-.7-15.9-2.9-15.9-9.1s6.7-9.9,18.1-9.9,12.7,1.2,17.8,4"
+            />
+            <polygon
+              className={"logoApplicationName"}
+              points="442.3 48.6 442.3 23.9 426.8 23.9 426.8 17.5 466.6 17.5 466.6 23.9 451.1 23.9 451.1 48.6 442.3 48.6"
+            />
+            <path
+              className={"logoApplicationName"}
+              d="M513.5,33c0,9.8-9.2,16.2-22.8,16.2s-22.7-6.4-22.7-16.2,9.4-16.1,22.7-16.1,22.8,6.1,22.8,16.1M477.3,32.9c0,6,5.4,9.9,13.4,9.9s13.3-3.8,13.3-9.9-5.4-9.6-13.3-9.6-13.4,3.1-13.4,9.6"
+            />
+            <path
+              className={"logoApplicationName"}
+              d="M557.3,48.6l-13.2-11.6c7.6,0,12.5-4.7,12.5-9.7s-5.1-9.7-16.6-9.7h-20.4v31.1h8.9v-24.8h10.3c5.6,0,8.5,1.2,8.5,4.1s-2.1,4.6-8,4.6h-5c-1.2,0-1.9.3-2.2,1.1-.3.7,0,1.4,1.2,2.7l11.9,12.3h12.3Z"
+            />
+            <rect x="355.8" y="17.5" width="8.8" height="31" />
+          </g>
+        </g>
+      </g>
+    </LogoBase>
+  );
+};
+
+export default AIStorHorizontal;

src/components/ApplicationLogo/Logos/AIStor/AIStorTag.tsx

@@ -0,0 +1,88 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2024 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const AIStorTag: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 202.2 51" inverse={inverse} onClick={onClick}>
+      <g>
+        <rect
+          className={"logoSection"}
+          x="36.3"
+          y=".7"
+          width="4.9"
+          height="14.4"
+        />
+        <path
+          className={"logoSection"}
+          d="M30.4.9l-9.9,6.1c-.1,0-.3,0-.5,0L10.1.9c-.2-.1-.5-.2-.7-.2h0c-.8,0-1.4.6-1.4,1.4v13h4.9v-6.2c0-.4.4-.6.7-.4l5.6,3.4c.5.3,1.2.3,1.8,0l5.9-3.4c.3-.2.7,0,.7.4v6.2h4.9V2.1c0-.8-.6-1.4-1.4-1.4h0c-.3,0-.5,0-.7.2"
+        />
+        <path
+          className={"logoSection"}
+          d="M65.6.7h-5v6.6c0,.4-.4.6-.7.4L47.1.9c-.2-.1-.4-.2-.6-.2h0c-.8,0-1.4.6-1.4,1.4v13h4.9v-6.6c0-.4.4-.6.7-.4l12.9,6.8c.2.1.4.2.6.2.8,0,1.4-.6,1.4-1.4V.7h0Z"
+        />
+        <rect
+          className={"logoSection"}
+          x="69.4"
+          y=".7"
+          width="2.2"
+          height="14.4"
+        />
+        <path
+          className={"logoSection"}
+          d="M84.9,15.4c-6,0-10.3-2.9-10.3-7.5S78.8.4,84.9.4s10.4,2.9,10.4,7.5-4.2,7.5-10.4,7.5M84.9,2.3c-4.5,0-8,2-8,5.6s3.5,5.6,8,5.6,8-1.9,8-5.6-3.5-5.6-8-5.6"
+        />
+        <path
+          className={"logoSection"}
+          d="M52.5,30.8v-3.7c0-.9.7-1.6,1.6-1.6h8.9c1.8,0,2.2,2.4.6,3.1l-8.9,3.7c-1.1.4-2.2-.3-2.2-1.5"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M30.5,50.1h8.2l-13.2-24.5h-10.3L1.8,50.1h9.9l11.4-4.8c1.5-.6,1.1-2.9-.6-2.9h-8.7l6.6-13s10.2,20.7,10.2,20.7Z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M94.6,28.2l-2.3,4.8c-3.6-1.9-8.2-2.8-12.3-2.8s-6.5.8-6.5,2.2,3,2.1,8.8,2.5c8.1.6,13.3,2.4,13.3,7.3s-5.8,8.3-15.2,8.3-11.6-1.6-15-4.5l3.5-4.1c2.6,2.2,7.5,3.5,12.2,3.5s7.3-1.1,7.3-2.6-3.2-2.2-9.6-2.7c-6.9-.5-12.5-2.3-12.5-7.2s5.3-7.8,14.3-7.8,10,1,14,3.2"
+        />
+        <polygon
+          className={"logoApplicationName"}
+          points="109.7 50.1 109.7 30.6 97.4 30.6 97.4 25.5 128.8 25.5 128.8 30.6 116.6 30.6 116.6 50.1 109.7 50.1"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M165.9,37.8c0,7.8-7.3,12.8-18,12.8s-17.9-5-17.9-12.8,7.4-12.7,17.9-12.7,18,4.8,18,12.7M137.3,37.7c0,4.8,4.3,7.8,10.6,7.8s10.5-3,10.5-7.8-4.3-7.5-10.5-7.5-10.6,2.4-10.6,7.5"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M200.4,50.1l-10.4-9.2c6,0,9.9-3.7,9.9-7.6s-4-7.7-13.1-7.7h-16.1v24.5h7v-19.6h8.1c4.4,0,6.7,1,6.7,3.2s-1.7,3.6-6.3,3.6h-4c-.9,0-1.5.2-1.8.8-.2.5,0,1.1.9,2.2l9.4,9.7h9.7Z"
+        />
+        <rect
+          x="41.4"
+          y="25.6"
+          width="6.9"
+          height="24.5"
+          className={"logoApplicationName"}
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default AIStorTag;

src/components/ApplicationLogo/Logos/Cache/Cache.tsx

@@ -0,0 +1,88 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const Cache: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 184.538 51" inverse={inverse} onClick={onClick}>
+      <g>
+        <path
+          className={"logoApplicationName"}
+          d="M22.8,32.4h-3.2c-0.2-0.9-0.5-1.7-1-2.4c-0.5-0.7-1-1.3-1.7-1.8c-0.7-0.5-1.4-0.8-2.2-1.1
+		c-0.8-0.2-1.7-0.4-2.5-0.4c-1.6,0-3.1,0.4-4.4,1.2s-2.3,2-3.1,3.6c-0.8,1.6-1.1,3.5-1.1,5.8s0.4,4.2,1.1,5.8
+		c0.8,1.6,1.8,2.8,3.1,3.6c1.3,0.8,2.8,1.2,4.4,1.2c0.9,0,1.7-0.1,2.5-0.4c0.8-0.2,1.6-0.6,2.2-1.1c0.7-0.5,1.2-1.1,1.7-1.8
+		c0.5-0.7,0.8-1.5,1-2.4h3.2c-0.2,1.4-0.7,2.6-1.3,3.6c-0.6,1.1-1.4,2-2.4,2.7c-0.9,0.7-2,1.3-3.2,1.7c-1.2,0.4-2.4,0.6-3.8,0.6
+		c-2.3,0-4.3-0.6-6-1.7s-3.1-2.7-4.2-4.7c-1-2-1.5-4.5-1.5-7.2c0-2.8,0.5-5.2,1.5-7.2c1-2,2.4-3.6,4.2-4.7c1.8-1.1,3.8-1.7,6-1.7
+		c1.3,0,2.6,0.2,3.8,0.6c1.2,0.4,2.2,1,3.2,1.7c0.9,0.7,1.7,1.7,2.4,2.7C22.1,29.8,22.5,31,22.8,32.4L22.8,32.4z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M29,50.6h-3.4l9.7-26.5h3.3l9.7,26.5h-3.4l-7.9-22.3H37L29,50.6z M30.3,40.3h13.6v2.8H30.3V40.3z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M72.7,32.4h-3.2c-0.2-0.9-0.5-1.7-1-2.4c-0.5-0.7-1-1.3-1.7-1.8c-0.7-0.5-1.4-0.8-2.2-1.1
+		c-0.8-0.2-1.7-0.4-2.5-0.4c-1.6,0-3.1,0.4-4.4,1.2c-1.3,0.8-2.3,2-3.1,3.6c-0.8,1.6-1.1,3.5-1.1,5.8s0.4,4.2,1.1,5.8
+		c0.8,1.6,1.8,2.8,3.1,3.6C59,47.6,60.4,48,62,48c0.9,0,1.7-0.1,2.5-0.4c0.8-0.2,1.6-0.6,2.2-1.1c0.7-0.5,1.2-1.1,1.7-1.8
+		c0.5-0.7,0.8-1.5,1-2.4h3.2c-0.2,1.4-0.7,2.6-1.3,3.6c-0.6,1.1-1.4,2-2.4,2.7c-0.9,0.7-2,1.3-3.2,1.7C64.6,50.8,63.4,51,62,51
+		c-2.3,0-4.3-0.6-6-1.7c-1.8-1.1-3.1-2.7-4.2-4.7c-1-2-1.5-4.5-1.5-7.2c0-2.8,0.5-5.2,1.5-7.2c1-2,2.4-3.6,4.2-4.7
+		c1.8-1.1,3.8-1.7,6-1.7c1.3,0,2.6,0.2,3.8,0.6c1.2,0.4,2.2,1,3.2,1.7c0.9,0.7,1.7,1.7,2.4,2.7C72,29.8,72.5,31,72.7,32.4L72.7,32.4
+		z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M77.9,50.6V24.1h3.2v11.8h14.1V24.1h3.2v26.5h-3.2V38.8H81.1v11.9H77.9L77.9,50.6z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M104.9,50.6V24.1h16V27h-12.8v9h12v2.8h-12v9h13v2.8H104.9z"
+        />
+        <rect
+          x="22.2"
+          y="0.2"
+          className={"logoSection"}
+          width="3.8"
+          height="11.3"
+        />
+        <path
+          className={"logoSection"}
+          d="M17.6,0.4L9.8,5.1c-0.1,0.1-0.3,0.1-0.4,0L1.6,0.4C1.5,0.3,1.3,0.2,1.1,0.2h0C0.5,0.2,0,0.7,0,1.3v10.2h3.8
+		V6.6c0-0.3,0.3-0.5,0.6-0.3L8.8,9c0.4,0.3,1,0.3,1.4,0l4.6-2.7c0.3-0.2,0.6,0,0.6,0.3v4.9h3.8V1.3c0-0.6-0.5-1.1-1.1-1.1h0
+		C18,0.2,17.8,0.3,17.6,0.4L17.6,0.4z"
+        />
+        <path
+          className={"logoSection"}
+          d="M45.3,0.2h-3.9v5.2c0,0.3-0.3,0.5-0.6,0.3L30.7,0.4c-0.2-0.1-0.3-0.1-0.5-0.1h0c-0.6,0-1.1,0.5-1.1,1.1v10.2
+		H33V6.4c0-0.3,0.3-0.5,0.6-0.3l10.1,5.4c0.2,0.1,0.3,0.1,0.5,0.1l0,0c0.6,0,1.1-0.5,1.1-1.1L45.3,0.2L45.3,0.2L45.3,0.2z"
+        />
+        <path
+          className={"logoSection"}
+          d="M48.4,11.5V0.2h1.8v11.3L48.4,11.5L48.4,11.5z"
+        />
+        <path
+          className={"logoSection"}
+          d="M60.5,11.8c-4.8,0-8.1-2.3-8.1-5.9c0-3.6,3.4-5.9,8.1-5.9c4.7,0,8.2,2.3,8.2,5.9S65.3,11.8,60.5,11.8z
+		 M60.5,1.5c-3.5,0-6.3,1.5-6.3,4.4c0,2.8,2.7,4.4,6.3,4.4c3.5,0,6.3-1.5,6.3-4.4C66.7,3,64,1.5,60.5,1.5L60.5,1.5z"
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default Cache;

src/components/ApplicationLogo/Logos/Cloud/Cloud.tsx

@@ -0,0 +1,68 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const Cloud: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 184.538 52" inverse={inverse} onClick={onClick}>
+      <path
+        d="m22.19,31.57h-3.13c-.19-.9-.51-1.69-.96-2.37-.46-.68-1.01-1.25-1.66-1.72-.65-.47-1.37-.82-2.16-1.05-.79-.24-1.61-.35-2.47-.35-1.56,0-2.98.4-4.24,1.19s-2.27,1.95-3.01,3.49c-.74,1.54-1.12,3.42-1.12,5.66s.37,4.12,1.12,5.66c.74,1.54,1.75,2.7,3.01,3.49,1.27.79,2.68,1.19,4.24,1.19.86,0,1.68-.12,2.47-.35.79-.24,1.51-.59,2.16-1.05.65-.47,1.21-1.04,1.66-1.73.46-.68.78-1.47.96-2.36h3.13c-.24,1.32-.66,2.5-1.29,3.54-.62,1.04-1.4,1.93-2.32,2.65-.92.73-1.96,1.28-3.11,1.66s-2.37.57-3.68.57c-2.2,0-4.16-.54-5.88-1.61s-3.06-2.61-4.05-4.59c-.98-1.98-1.48-4.34-1.48-7.06s.49-5.08,1.48-7.06c.98-1.98,2.33-3.51,4.05-4.59,1.71-1.08,3.67-1.61,5.88-1.61,1.3,0,2.53.19,3.68.57s2.18.93,3.11,1.66c.92.73,1.7,1.61,2.32,2.65.62,1.04,1.05,2.22,1.29,3.55h0Z"
+        className={"logoApplicationName"}
+      />
+      <path
+        d="m27.23,49.32v-25.82h3.13v23.05h12v2.77h-15.13Z"
+        className={"logoApplicationName"}
+      />
+      <path
+        d="m67.98,36.41c0,2.72-.49,5.08-1.48,7.06-.98,1.98-2.33,3.51-4.05,4.59s-3.67,1.61-5.88,1.61-4.16-.54-5.88-1.61-3.06-2.61-4.05-4.59c-.98-1.98-1.48-4.34-1.48-7.06s.49-5.08,1.48-7.06c.98-1.98,2.33-3.51,4.05-4.59,1.71-1.08,3.67-1.61,5.88-1.61s4.16.54,5.88,1.61c1.71,1.08,3.06,2.61,4.05,4.59.98,1.98,1.48,4.34,1.48,7.06Zm-3.03,0c0-2.24-.37-4.12-1.12-5.66-.74-1.54-1.75-2.7-3.01-3.49-1.27-.79-2.68-1.19-4.24-1.19s-2.98.4-4.24,1.19-2.27,1.95-3.01,3.49c-.74,1.54-1.12,3.42-1.12,5.66s.37,4.12,1.12,5.66c.74,1.54,1.75,2.7,3.01,3.49,1.27.79,2.68,1.19,4.24,1.19s2.98-.39,4.24-1.19c1.26-.79,2.27-1.95,3.01-3.49.74-1.54,1.12-3.42,1.12-5.66Z"
+        className={"logoApplicationName"}
+      />
+      <path
+        d="m90.17,23.5h3.13v17.1c0,1.76-.41,3.34-1.24,4.72-.83,1.38-1.99,2.47-3.5,3.27-1.5.79-3.27,1.19-5.3,1.19s-3.79-.4-5.3-1.19c-1.5-.79-2.67-1.88-3.5-3.27-.83-1.38-1.24-2.96-1.24-4.72v-17.1h3.13v16.84c0,1.26.28,2.38.83,3.36.55.98,1.35,1.75,2.38,2.31,1.03.56,2.26.84,3.7.84s2.67-.28,3.71-.84c1.03-.56,1.83-1.33,2.38-2.31.55-.98.83-2.1.83-3.36v-16.84Z"
+        className={"logoApplicationName"}
+      />
+      <path
+        d="m107.52,49.32h-7.97v-25.82h8.32c2.5,0,4.65.52,6.43,1.54,1.78,1.03,3.15,2.5,4.1,4.43.95,1.92,1.42,4.22,1.42,6.89s-.48,5-1.44,6.94c-.96,1.94-2.35,3.43-4.19,4.46-1.83,1.04-4.06,1.56-6.68,1.56Zm-4.84-2.77h4.64c2.13,0,3.9-.41,5.31-1.24,1.4-.82,2.45-2,3.14-3.52.69-1.52,1.03-3.33,1.03-5.43s-.34-3.88-1.02-5.39c-.68-1.51-1.7-2.67-3.05-3.48-1.35-.81-3.04-1.22-5.06-1.22h-4.99v20.27h0Z"
+        className={"logoApplicationName"}
+      />
+      <rect
+        x="21.65"
+        y=".24"
+        width="3.74"
+        height="10.97"
+        className="logoSection"
+      />
+      <path
+        d="m17.14.35l-7.6,4.64c-.11.07-.24.07-.35,0L1.59.35c-.16-.1-.35-.15-.54-.15h0C.47.19,0,.66,0,1.24v9.97h3.74v-4.73c0-.29.32-.47.57-.32l4.26,2.61c.42.26.95.26,1.37.01l4.49-2.64c.25-.15.56.03.56.32v4.75h3.74V1.24c0-.58-.47-1.04-1.04-1.04h0c-.19,0-.38.05-.54.15h0Z"
+        className="logoSection"
+      />
+      <path
+        d="m44.09.24h-3.8v5.03c0,.28-.3.46-.55.33L29.9.36c-.15-.08-.32-.12-.49-.12h0c-.58,0-1.04.47-1.04,1.04v9.93h3.77v-4.95c0-.28.3-.46.55-.33l9.88,5.24c.15.08.32.12.49.12h0c.58,0,1.04-.47,1.04-1.04V.24h0,0Z"
+        className="logoSection"
+      />
+      <path d="m47.13,11.21V.24h1.74v10.97h-1.74Z" className="logoSection" />
+      <path
+        d="m58.89,11.45c-4.63,0-7.92-2.2-7.92-5.72,0-3.5,3.31-5.72,7.92-5.72s7.94,2.2,7.94,5.72-3.25,5.72-7.94,5.72Zm0-9.98c-3.45,0-6.1,1.5-6.1,4.26s2.65,4.26,6.1,4.26,6.12-1.49,6.12-4.26-2.67-4.26-6.12-4.26h0Z"
+        className="logoSection"
+      />
+    </LogoBase>
+  );
+};
+
+export default Cloud;

src/components/ApplicationLogo/Logos/Console/ConsoleAGPL.tsx

@@ -0,0 +1,122 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const ConsoleAGPL: FC<SVGProps<any> & LogoBaseProps> = ({
+  inverse,
+  onClick,
+}) => {
+  return (
+    <LogoBase viewBox="0 0 181.71 51.56" inverse={inverse} onClick={onClick}>
+      <path
+        className="logoApplicationName"
+        d="M9.06,14.57c-1.19-.05-2.38.14-3.5.57-1.11.43-2.13,1.08-2.98,1.92-.85.84-1.52,1.84-1.96,2.95C.18,21.13-.03,22.31,0,23.51c-.04,1.19.17,2.38.62,3.49.44,1.11,1.11,2.11,1.96,2.95.85.84,1.86,1.49,2.98,1.92,1.11.43,2.3.63,3.5.57,1.19.05,2.38-.14,3.5-.57,1.11-.43,2.13-1.08,2.98-1.92.85-.84,1.52-1.84,1.96-2.95.44-1.11.66-2.3.62-3.49.03-1.19-.18-2.38-.62-3.49-.44-1.11-1.11-2.11-1.96-2.95-.85-.84-1.86-1.49-2.98-1.92s-2.31-.62-3.5-.57ZM9.06,17.87c.74-.02,1.47.11,2.16.39s1.3.7,1.82,1.23c.51.53.91,1.16,1.17,1.86.26.69.37,1.43.32,2.17.04.74-.06,1.48-.32,2.17-.26.69-.65,1.32-1.17,1.86-.51.53-1.13.95-1.82,1.23-.68.28-1.42.41-2.16.39-.74.02-1.47-.11-2.16-.39-.68-.28-1.3-.7-1.82-1.23-.51-.53-.91-1.16-1.17-1.85-.26-.69-.37-1.43-.32-2.17-.04-.74.07-1.48.32-2.17.26-.69.66-1.32,1.17-1.85.51-.53,1.13-.95,1.82-1.23.68-.28,1.42-.41,2.16-.39ZM20.59,14.89v17.24h7.46c4.14,0,6.49-1.63,6.49-4.94-.02-.86-.3-1.7-.81-2.39-.51-.69-1.23-1.21-2.06-1.47.74-.28,1.38-.78,1.83-1.43.45-.65.68-1.43.67-2.23,0-3.29-2.52-4.78-6.54-4.78h-7.04ZM27.88,24.96c1.9,0,3.09.44,3.09,2.06s-1.19,2.09-3.09,2.09h-3.85v-4.15h3.85ZM27.54,17.92c1.7,0,3.05.37,3.05,1.99s-1.33,2.03-3.04,2.03h-3.52v-4.03h3.51ZM46.93,14.89h-3.44v10.64c0,2.49-1.08,3.62-2.91,3.62-.64.01-1.28-.13-1.86-.41-.58-.28-1.09-.69-1.49-1.2l-1.99,2.5c.67.79,1.52,1.42,2.47,1.84.95.41,1.99.6,3.03.55,3.6,0,6.18-2.27,6.18-6.59v-10.96ZM63.01,28.97h-9.45v-3.97h8.92v-3.15h-8.92v-3.82h9.35v-3.15h-12.78v17.24h12.88v-3.15ZM74.04,14.57c-1.19-.05-2.39.14-3.5.57-1.12.43-2.13,1.08-2.98,1.92-.85.84-1.52,1.85-1.96,2.96-.44,1.11-.65,2.3-.61,3.49-.04,1.19.17,2.38.61,3.49.44,1.11,1.11,2.12,1.96,2.96.85.84,1.86,1.49,2.98,1.92,1.12.43,2.31.62,3.5.57,1.42.04,2.83-.27,4.1-.91,1.27-.64,2.36-1.58,3.18-2.74l-2.81-2.02c-.49.74-1.16,1.35-1.94,1.76-.79.41-1.66.62-2.55.61-.74.02-1.47-.12-2.15-.4-.68-.28-1.3-.7-1.81-1.23-.51-.53-.91-1.16-1.16-1.85-.26-.69-.36-1.43-.32-2.16-.04-.74.07-1.47.32-2.16.26-.69.65-1.32,1.16-1.85.51-.53,1.13-.95,1.81-1.23.68-.28,1.41-.42,2.15-.4.88-.02,1.76.19,2.54.61.78.42,1.44,1.03,1.92,1.77l2.96-1.81c-.79-1.23-1.88-2.24-3.18-2.92-1.3-.68-2.75-1.01-4.21-.95ZM96.59,14.89h-14.12v3.21h5.34v14.03h3.44v-14.03h5.34v-3.21ZM116.09,16.6c-1.8-1.27-3.96-1.94-6.16-1.9-3.55,0-6.38,1.79-6.38,4.96,0,2.65,1.91,4.06,5.06,4.42l1.96.22c2.87.32,4.37,1.23,4.37,3.1,0,2.33-2.3,3.47-5.22,3.47-2.1,0-4.14-.68-5.84-1.92l-.83,1.19c1.94,1.4,4.28,2.16,6.67,2.16,3.72,0,6.77-1.67,6.77-5.02,0-2.87-2.23-4.08-5.29-4.42l-1.88-.21c-2.94-.33-4.21-1.38-4.21-3.09,0-2.15,2.03-3.44,4.8-3.44,1.93-.02,3.82.57,5.39,1.69l.78-1.22ZM131.89,14.89h-13.93v1.43h6.21v15.81h1.5v-15.81h6.22v-1.43ZM141.61,14.69c-1.17-.04-2.33.16-3.42.59s-2.08,1.08-2.91,1.9c-.83.83-1.48,1.81-1.91,2.9-.43,1.09-.63,2.25-.6,3.42-.04,1.17.16,2.33.6,3.42.43,1.09,1.08,2.08,1.91,2.9.83.83,1.82,1.47,2.91,1.9,1.09.43,2.25.63,3.42.59,1.17.04,2.33-.16,3.42-.59,1.09-.43,2.08-1.08,2.91-1.9.83-.83,1.48-1.81,1.91-2.9.43-1.09.63-2.25.59-3.42.04-1.17-.16-2.33-.59-3.42-.43-1.09-1.08-2.08-1.91-2.9-.83-.83-1.82-1.47-2.91-1.9-1.09-.43-2.25-.63-3.42-.59ZM141.61,16.14c.97-.03,1.93.15,2.83.51.9.36,1.71.91,2.39,1.6.68.69,1.21,1.51,1.56,2.42.35.9.51,1.87.47,2.84.04.97-.12,1.94-.47,2.84-.35.9-.88,1.73-1.56,2.42-.68.69-1.5,1.23-2.39,1.6-.9.36-1.86.54-2.83.51-.97.03-1.93-.14-2.84-.51-.9-.36-1.72-.9-2.4-1.6s-1.21-1.51-1.56-2.42c-.35-.91-.51-1.87-.47-2.84-.04-.97.12-1.94.47-2.84.35-.91.88-1.73,1.56-2.42.68-.69,1.5-1.23,2.4-1.6.9-.36,1.87-.53,2.84-.51ZM153.94,14.89v17.24h1.5v-7.65h2.64l6.43,7.65h1.87l-6.53-7.65h.68c3.67,0,5.94-1.83,5.94-4.8s-2.14-4.79-5.95-4.79h-6.58ZM160.5,16.3c2.83,0,4.41,1.17,4.41,3.37s-1.55,3.44-4.41,3.44h-5.06v-6.81h5.06ZM181.71,30.71h-10.37v-6.56h9.99v-1.4h-9.99v-6.44h10.28v-1.42h-11.78v17.24h11.87v-1.42Z"
+      />
+      <path className="logoSection" d="M17.51.12h-2.43v7.14h2.43V.12Z" />
+      <path
+        className="logoSection"
+        d="M12.09.1l-4.92,3c-.07.04-.16.04-.23,0L2.02.1c-.1-.06-.23-.1-.35-.1h0c-.37,0-.67.3-.67.67v6.46h2.42v-3.07c0-.19.21-.31.37-.21l2.76,1.68c.27.17.61.17.89,0l2.91-1.7c.16-.09.37.02.37.21v3.08h2.42V.67c0-.37-.3-.67-.67-.67h0c-.13,0-.25.03-.35.1"
+      />
+      <path
+        className="logoSection"
+        d="M29.6.12h-2.46v3.25c0,.18-.19.3-.36.21L20.41.2c-.1-.05-.21-.08-.32-.08h0c-.37,0-.67.3-.67.67v6.46h2.44v-3.25c0-.18.19-.3.36-.21l6.4,3.38c.1.05.21.08.32.08.37,0,.67-.3.67-.67V.12h0Z"
+      />
+      <path className="logoSection" d="M32.63.12h-1.12v7.14h1.12V.12Z" />
+      <path
+        className="logoSection"
+        d="M39.19,7.39c-3,0-5.13-1.42-5.13-3.7s2.14-3.7,5.13-3.7,5.14,1.42,5.14,3.7-2.1,3.7-5.14,3.7M39.19.95c-2.23,0-3.95.97-3.95,2.75s1.72,2.75,3.95,2.75,3.96-.96,3.96-2.75-1.73-2.75-3.96-2.75Z"
+      />
+      <rect
+        className="logoApplicationName"
+        x="82.38"
+        y="39.94"
+        width="99.12"
+        height="11.62"
+        rx="2.4"
+        ry="2.4"
+      />
+      <path
+        className="contrast"
+        d="M91.08,44.02h-1.07c-.04-.23-.12-.43-.23-.6-.11-.17-.25-.32-.41-.44-.16-.12-.34-.21-.54-.27s-.41-.09-.64-.09c-.4,0-.77.1-1.08.31s-.57.5-.75.89c-.18.39-.28.87-.28,1.44s.09,1.05.28,1.45c.18.39.44.69.76.89.32.2.68.3,1.08.3.22,0,.43-.03.63-.09s.38-.15.54-.27c.16-.12.3-.26.41-.44.11-.17.19-.37.24-.6h1.07c-.06.35-.17.67-.33.95-.16.29-.37.54-.63.75-.25.21-.55.37-.87.48s-.68.17-1.07.17c-.61,0-1.15-.14-1.62-.43-.48-.29-.85-.7-1.12-1.24-.27-.54-.41-1.18-.41-1.93s.14-1.39.41-1.93c.27-.54.65-.95,1.12-1.24.48-.29,1.02-.43,1.62-.43.37,0,.72.05,1.04.16.32.11.61.26.87.47.26.2.47.45.64.75s.28.63.34,1.01Z"
+      />
+      <path
+        className="contrast"
+        d="M94.97,48.86c-.49,0-.92-.11-1.29-.34s-.65-.54-.86-.95c-.2-.41-.3-.88-.3-1.43s.1-1.02.3-1.43c.2-.41.49-.73.86-.95s.8-.34,1.29-.34.92.11,1.29.34c.37.23.65.54.86.95.2.41.31.89.31,1.43s-.1,1.02-.31,1.43c-.2.41-.49.72-.86.95-.37.23-.8.34-1.29.34ZM94.97,48c.32,0,.59-.08.8-.25s.37-.39.47-.67c.1-.28.15-.59.15-.93s-.05-.64-.15-.93c-.1-.28-.26-.51-.47-.68s-.48-.26-.8-.26-.59.09-.8.26-.37.4-.47.68c-.1.28-.15.59-.15.93s.05.65.15.93c.1.28.26.51.47.67s.48.25.8.25Z"
+      />
+      <path
+        className="contrast"
+        d="M99.05,48.75v-5.27h.98v.86h.07c.11-.29.29-.52.54-.68.25-.16.55-.25.89-.25s.65.08.89.25c.24.17.42.39.53.68h.05c.13-.28.33-.51.6-.67.27-.17.6-.25.98-.25.48,0,.87.15,1.17.45.3.3.46.75.46,1.35v3.53h-1.03v-3.43c0-.36-.1-.61-.29-.77-.2-.16-.43-.24-.7-.24-.33,0-.59.1-.78.31-.19.2-.28.47-.28.79v3.36h-1.02v-3.5c0-.29-.09-.52-.27-.69-.18-.17-.41-.26-.7-.26-.19,0-.37.05-.54.15-.16.1-.3.24-.39.42s-.15.39-.15.63v3.25h-1.02Z"
+      />
+      <path
+        className="contrast"
+        d="M108.06,48.75v-5.27h.98v.86h.07c.11-.29.29-.52.54-.68.25-.16.55-.25.89-.25s.65.08.89.25c.24.17.42.39.53.68h.05c.13-.28.33-.51.6-.67.27-.17.6-.25.98-.25.48,0,.87.15,1.17.45.3.3.46.75.46,1.35v3.53h-1.03v-3.43c0-.36-.1-.61-.29-.77-.2-.16-.43-.24-.7-.24-.33,0-.59.1-.78.31-.19.2-.28.47-.28.79v3.36h-1.02v-3.5c0-.29-.09-.52-.27-.69-.18-.17-.41-.26-.7-.26-.19,0-.37.05-.54.15-.16.1-.3.24-.39.42s-.15.39-.15.63v3.25h-1.02Z"
+      />
+      <path
+        className="contrast"
+        d="M120.41,46.57v-3.08h1.03v5.27h-1.01v-.91h-.05c-.12.28-.32.51-.58.7-.27.19-.6.28-.99.28-.34,0-.64-.07-.9-.22-.26-.15-.46-.37-.61-.67-.15-.3-.22-.66-.22-1.09v-3.35h1.02v3.23c0,.36.1.64.3.86.2.21.46.32.77.32.19,0,.38-.05.57-.14s.35-.24.48-.44.19-.44.19-.74Z"
+      />
+      <path
+        className="contrast"
+        d="M124.32,45.63v3.13h-1.02v-5.27h.98v.86h.07c.12-.28.31-.5.57-.67.26-.17.59-.25.98-.25.36,0,.67.08.94.22.27.15.48.37.63.67.15.3.22.66.22,1.09v3.35h-1.02v-3.23c0-.38-.1-.68-.3-.9-.2-.22-.47-.32-.82-.32-.24,0-.45.05-.63.15-.18.1-.33.25-.44.45s-.16.44-.16.72Z"
+      />
+      <path
+        className="contrast"
+        d="M130.06,42.68c-.18,0-.33-.06-.46-.18-.13-.12-.19-.26-.19-.43s.06-.31.19-.43c.13-.12.28-.18.46-.18s.33.06.46.18c.13.12.19.26.19.43s-.06.31-.19.43c-.13.12-.28.18-.46.18ZM129.54,48.75v-5.27h1.02v5.27h-1.02Z"
+      />
+      <path
+        className="contrast"
+        d="M134.88,43.49v.82h-2.88v-.82h2.88ZM132.78,42.23h1.03v4.98c0,.2.03.35.09.45s.14.17.23.2.2.05.31.05c.08,0,.15,0,.22-.02s.11-.02.14-.03l.18.85c-.06.02-.14.05-.25.07-.11.02-.25.04-.41.04-.27,0-.52-.04-.75-.14-.23-.1-.42-.26-.57-.47-.14-.21-.22-.47-.22-.79v-5.19Z"
+      />
+      <path
+        className="contrast"
+        d="M137.15,50.73c-.15,0-.29-.01-.42-.04-.12-.02-.22-.05-.28-.08l.25-.84c.19.05.35.07.5.07.15,0,.28-.06.39-.16.11-.1.21-.27.3-.5l.13-.35-1.93-5.33h1.1l1.33,4.09h.05l1.33-4.09h1.1l-2.17,5.97c-.1.27-.23.51-.38.7-.15.19-.34.33-.56.43s-.46.14-.75.14Z"
+      />
+      <path
+        className="contrast"
+        d="M145.57,48.75v-7.02h4.4v.91h-3.34v2.14h3.11v.91h-3.11v2.15h3.38v.91h-4.44Z"
+      />
+      <path
+        className="contrast"
+        d="M153.76,48.86c-.43,0-.8-.11-1.14-.33-.33-.22-.59-.53-.78-.94-.19-.41-.28-.89-.28-1.46s.1-1.06.29-1.46.45-.71.79-.93c.33-.21.71-.32,1.13-.32.33,0,.59.05.79.16s.35.23.47.38c.11.14.2.27.26.38h.06v-2.61h1.03v7.02h-1v-.82h-.09c-.06.11-.15.24-.27.38s-.27.27-.47.38c-.2.11-.46.16-.78.16ZM153.99,47.98c.29,0,.54-.08.75-.23.2-.16.36-.37.47-.65s.16-.6.16-.97-.05-.69-.16-.96-.26-.49-.46-.64c-.2-.15-.46-.23-.75-.23s-.57.08-.77.24c-.21.16-.36.38-.46.65s-.16.59-.16.94.05.67.16.95c.1.28.26.5.47.67.21.16.46.24.77.24Z"
+      />
+      <path
+        className="contrast"
+        d="M158.83,42.68c-.18,0-.33-.06-.46-.18-.13-.12-.19-.26-.19-.43s.06-.31.19-.43c.13-.12.28-.18.46-.18s.33.06.46.18c.13.12.19.26.19.43s-.06.31-.19.43c-.13.12-.28.18-.46.18ZM158.31,48.75v-5.27h1.02v5.27h-1.02Z"
+      />
+      <path
+        className="contrast"
+        d="M163.66,43.49v.82h-2.88v-.82h2.88ZM161.55,42.23h1.03v4.98c0,.2.03.35.09.45s.14.17.23.2.2.05.31.05c.08,0,.15,0,.22-.02s.11-.02.14-.03l.18.85c-.06.02-.14.05-.25.07-.11.02-.25.04-.41.04-.27,0-.52-.04-.75-.14-.23-.1-.42-.26-.57-.47-.14-.21-.22-.47-.22-.79v-5.19Z"
+      />
+      <path
+        className="contrast"
+        d="M165.79,42.68c-.18,0-.33-.06-.46-.18-.13-.12-.19-.26-.19-.43s.06-.31.19-.43c.13-.12.28-.18.46-.18s.33.06.46.18c.13.12.19.26.19.43s-.06.31-.19.43c-.13.12-.28.18-.46.18ZM165.27,48.75v-5.27h1.02v5.27h-1.02Z"
+      />
+      <path
+        className="contrast"
+        d="M170.38,48.86c-.49,0-.92-.11-1.29-.34s-.65-.54-.86-.95c-.2-.41-.3-.88-.3-1.43s.1-1.02.3-1.43c.2-.41.49-.73.86-.95s.8-.34,1.29-.34.92.11,1.29.34c.37.23.65.54.86.95.2.41.31.89.31,1.43s-.1,1.02-.31,1.43c-.2.41-.49.72-.86.95-.37.23-.8.34-1.29.34ZM170.38,48c.32,0,.59-.08.8-.25s.37-.39.47-.67c.1-.28.15-.59.15-.93s-.05-.64-.15-.93c-.1-.28-.26-.51-.47-.68s-.48-.26-.8-.26-.59.09-.8.26-.37.4-.47.68c-.1.28-.15.59-.15.93s.05.65.15.93c.1.28.26.51.47.67s.48.25.8.25Z"
+      />
+      <path
+        className="contrast"
+        d="M175.48,45.63v3.13h-1.02v-5.27h.98v.86h.07c.12-.28.31-.5.57-.67.26-.17.59-.25.98-.25.36,0,.67.08.94.22.27.15.48.37.63.67.15.3.22.66.22,1.09v3.35h-1.02v-3.23c0-.38-.1-.68-.3-.9-.2-.22-.47-.32-.82-.32-.24,0-.45.05-.63.15-.18.1-.33.25-.44.45s-.16.44-.16.72Z"
+      />
+    </LogoBase>
+  );
+};
+
+export default ConsoleAGPL;

src/components/ApplicationLogo/Logos/Console/ConsoleEnterprise.tsx

@@ -0,0 +1,81 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const ConsoleEnterprise: FC<SVGProps<any> & LogoBaseProps> = ({
+  inverse,
+  onClick,
+}) => {
+  return (
+    <LogoBase viewBox="0 0 184.45 51" inverse={inverse} onClick={onClick}>
+      <g transform="translate(-31.65 -18.133)">
+        <g transform="translate(-995 -63.754)">
+          <g transform="translate(1025.5 81.887)">
+            <g transform="translate(0 0)">
+              <g transform="translate(0 0)">
+                <path
+                  d="M10.338-17.825A8.815,8.815,0,0,0,1.15-8.75,8.815,8.815,0,0,0,10.338.325a8.825,8.825,0,0,0,9.2-9.075A8.825,8.825,0,0,0,10.338-17.825Zm0,3.35a5.4,5.4,0,0,1,5.55,5.725,5.4,5.4,0,0,1-5.55,5.725A5.41,5.41,0,0,1,4.788-8.75,5.41,5.41,0,0,1,10.338-14.475ZM22.05-17.5V0h7.575c4.2,0,6.588-1.65,6.588-5.013A4.2,4.2,0,0,0,33.3-8.938a3.9,3.9,0,0,0,2.537-3.713c0-3.337-2.562-4.85-6.638-4.85Zm7.4,10.225c1.925,0,3.138.45,3.138,2.088,0,1.675-1.212,2.125-3.138,2.125l-3.913-.013v-4.2Zm-.35-7.15c1.725,0,3.1.375,3.1,2.025,0,1.7-1.35,2.063-3.087,2.063H25.538v-4.088ZM48.788-17.5H45.3V-6.7c0,2.525-1.1,3.675-2.95,3.675a4.214,4.214,0,0,1-3.4-1.625L36.925-2.113A6.9,6.9,0,0,0,42.513.313c3.65,0,6.275-2.3,6.275-6.688ZM65.113-3.2H55.525V-7.225h9.05v-3.2h-9.05V-14.3h9.487v-3.2H52.037V0H65.113ZM76.3-17.825A8.794,8.794,0,0,0,67.113-8.75,8.794,8.794,0,0,0,76.3.325a8.713,8.713,0,0,0,7.387-3.7l-2.85-2.05a5.355,5.355,0,0,1-4.562,2.4A5.4,5.4,0,0,1,70.75-8.75a5.411,5.411,0,0,1,5.525-5.725A5.237,5.237,0,0,1,80.8-12.063l3-1.838A8.5,8.5,0,0,0,76.3-17.825Zm22.9.325H84.863v3.262h5.425V0h3.487V-14.238H99.2Zm19.787,1.738a10.5,10.5,0,0,0-6.25-1.925c-3.6,0-6.475,1.812-6.475,5.037,0,2.688,1.938,4.125,5.138,4.488l1.987.225c2.913.325,4.438,1.25,4.438,3.15,0,2.363-2.337,3.525-5.3,3.525a10.115,10.115,0,0,1-5.925-1.95L105.762-2A11.524,11.524,0,0,0,112.537.188c3.775,0,6.875-1.7,6.875-5.1,0-2.913-2.262-4.138-5.375-4.488l-1.912-.212c-2.988-.338-4.275-1.4-4.275-3.138,0-2.187,2.063-3.488,4.875-3.488a9.323,9.323,0,0,1,5.475,1.713ZM135.025-17.5H120.888v1.45h6.3V0h1.525V-16.05h6.313Zm9.875-.2a8.672,8.672,0,0,0-8.963,8.95A8.672,8.672,0,0,0,144.9.2a8.672,8.672,0,0,0,8.962-8.95A8.672,8.672,0,0,0,144.9-17.7Zm0,1.475a7.174,7.174,0,0,1,7.363,7.475A7.174,7.174,0,0,1,144.9-1.275a7.177,7.177,0,0,1-7.375-7.475A7.177,7.177,0,0,1,144.9-16.225ZM157.413-17.5V0h1.525V-7.763h2.675L168.138,0h1.9l-6.625-7.763h.688c3.725,0,6.025-1.862,6.025-4.875,0-3.1-2.175-4.863-6.037-4.863Zm6.663,1.438c2.875,0,4.475,1.188,4.475,3.425s-1.575,3.488-4.475,3.488h-5.138v-6.913ZM185.6-1.438H175.075V-8.1h10.138V-9.525H175.075v-6.538h10.438V-17.5H173.55V0H185.6Z"
+                  transform="translate(0 32.612)"
+                  className={"logoApplicationName"}
+                />
+                <g transform="translate(2.003)">
+                  <g transform="translate(0 0.129)">
+                    <rect
+                      width="2.49"
+                      height="7.352"
+                      transform="translate(14.42)"
+                      className={"logoSection"}
+                    />
+                    <path
+                      d="M237.8,365.332l-5.053,3.086a.226.226,0,0,1-.235,0l-5.053-3.086a.694.694,0,0,0-.362-.1H227.1a.693.693,0,0,0-.693.693v6.65h2.489v-3.165a.249.249,0,0,1,.379-.212l2.832,1.733a.886.886,0,0,0,.912.009L236,369.184a.249.249,0,0,1,.374.215v3.174h2.488v-6.65a.693.693,0,0,0-.692-.693h-.006A.694.694,0,0,0,237.8,365.332Z"
+                      transform="translate(-226.403 -365.23)"
+                      className={"logoSection"}
+                    />
+                    <path
+                      d="M257.822,365.23H255.3v3.346a.249.249,0,0,1-.366.22l-6.543-3.485a.7.7,0,0,0-.326-.081h0a.693.693,0,0,0-.693.693v6.651h2.5v-3.343a.249.249,0,0,1,.365-.22L256.8,372.5a.692.692,0,0,0,.325.081h0a.693.693,0,0,0,.693-.693Z"
+                      transform="translate(-228.498 -365.23)"
+                      className={"logoSection"}
+                    />
+                  </g>
+                  <path
+                    d="M261.159,372.582V365.23H262.3v7.352Z"
+                    transform="translate(-229.877 -365.101)"
+                    className={"logoSection"}
+                  />
+                  <path
+                    d="M269.337,372.7c-3.082,0-5.268-1.462-5.268-3.805s2.2-3.806,5.268-3.806,5.281,1.462,5.281,3.806S272.458,372.7,269.337,372.7Zm0-6.637c-2.292,0-4.056,1-4.056,2.832s1.765,2.831,4.056,2.831,4.07-.988,4.07-2.831S271.628,366.062,269.337,366.062Z"
+                    transform="translate(-230.168 -365.087)"
+                    className={"logoSection"}
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+        <path
+          d="M.969,0V-8H5.8v.859H1.938v2.7H5.547v.859H1.938V-.859H5.859V0ZM14.991-8V0h-.937L9.694-6.281H9.616V0H8.647V-8h.938l4.375,6.3h.078V-8Zm2.6.859V-8h6v.859H21.075V0h-.969V-7.141ZM26.191,0V-8h4.828v.859H27.159v2.7h3.609v.859H27.159V-.859h3.922V0Zm7.678,0V-8h2.7a3.277,3.277,0,0,1,1.539.318A2.054,2.054,0,0,1,39-6.809a2.69,2.69,0,0,1,.289,1.262A2.643,2.643,0,0,1,39-4.293a2.026,2.026,0,0,1-.887.857,3.3,3.3,0,0,1-1.527.311H34.4V-4h2.156a2.415,2.415,0,0,0,1.033-.187,1.194,1.194,0,0,0,.57-.533,1.787,1.787,0,0,0,.178-.826,1.856,1.856,0,0,0-.18-.84,1.235,1.235,0,0,0-.574-.557,2.345,2.345,0,0,0-1.043-.2h-1.7V0Zm3.766-3.594L39.6,0H38.478L36.541-3.594ZM42,0V-8h2.7a3.116,3.116,0,0,1,1.541.338,2.141,2.141,0,0,1,.889.912,2.809,2.809,0,0,1,.289,1.281,2.849,2.849,0,0,1-.287,1.285,2.149,2.149,0,0,1-.885.92,3.057,3.057,0,0,1-1.531.342H42.781v-.859h1.906A2.084,2.084,0,0,0,45.723-4a1.337,1.337,0,0,0,.568-.6,2.013,2.013,0,0,0,.178-.861,2,2,0,0,0-.178-.859,1.3,1.3,0,0,0-.572-.6,2.173,2.173,0,0,0-1.047-.217h-1.7V0Zm8.084,0V-8h2.7a3.277,3.277,0,0,1,1.539.318,2.054,2.054,0,0,1,.891.873,2.69,2.69,0,0,1,.289,1.262,2.643,2.643,0,0,1-.289,1.254,2.026,2.026,0,0,1-.887.857,3.3,3.3,0,0,1-1.527.311H50.616V-4h2.156a2.415,2.415,0,0,0,1.033-.187,1.194,1.194,0,0,0,.57-.533,1.787,1.787,0,0,0,.178-.826,1.856,1.856,0,0,0-.18-.84,1.235,1.235,0,0,0-.574-.557,2.345,2.345,0,0,0-1.043-.2h-1.7V0ZM53.85-3.594,55.819,0H54.694L52.756-3.594ZM59.184-8V0h-.969V-8ZM66.6-6a1.226,1.226,0,0,0-.57-.922A2.188,2.188,0,0,0,64.8-7.25a2.318,2.318,0,0,0-.928.172,1.468,1.468,0,0,0-.617.473,1.126,1.126,0,0,0-.221.684.957.957,0,0,0,.154.549,1.3,1.3,0,0,0,.4.379,2.686,2.686,0,0,0,.508.246q.266.1.488.154l.813.219a7.22,7.22,0,0,1,.7.227,3.308,3.308,0,0,1,.738.393,2.04,2.04,0,0,1,.584.635,1.824,1.824,0,0,1,.23.949A2.115,2.115,0,0,1,67.306-1a2.329,2.329,0,0,1-.984.832,3.618,3.618,0,0,1-1.568.309,3.653,3.653,0,0,1-1.486-.277,2.355,2.355,0,0,1-.984-.773,2.2,2.2,0,0,1-.4-1.152h1a1.236,1.236,0,0,0,.307.748,1.608,1.608,0,0,0,.68.438,2.7,2.7,0,0,0,.889.143,2.6,2.6,0,0,0,1-.182,1.687,1.687,0,0,0,.7-.508,1.2,1.2,0,0,0,.258-.764.938.938,0,0,0-.223-.648,1.634,1.634,0,0,0-.586-.406,6.157,6.157,0,0,0-.785-.273L64.128-3.8a3.666,3.666,0,0,1-1.484-.77A1.69,1.69,0,0,1,62.1-5.875a1.942,1.942,0,0,1,.365-1.174,2.417,2.417,0,0,1,.984-.781,3.331,3.331,0,0,1,1.385-.279,3.269,3.269,0,0,1,1.375.275,2.409,2.409,0,0,1,.955.752A1.875,1.875,0,0,1,67.534-6Zm3.741,6V-8h4.828v.859H71.306v2.7h3.609v.859H71.306V-.859h3.922V0ZM82.209,0V-8h.969V-.859H86.9V0Zm8.256-8V0H89.5V-8Zm9.475,2.5h-.969a2.034,2.034,0,0,0-.3-.734,2.072,2.072,0,0,0-.516-.533,2.24,2.24,0,0,0-.67-.326,2.668,2.668,0,0,0-.766-.109,2.431,2.431,0,0,0-1.314.367,2.536,2.536,0,0,0-.934,1.082A4.007,4.007,0,0,0,94.128-4a4.007,4.007,0,0,0,.346,1.754,2.536,2.536,0,0,0,.934,1.082A2.431,2.431,0,0,0,96.722-.8a2.668,2.668,0,0,0,.766-.109,2.24,2.24,0,0,0,.67-.326,2.06,2.06,0,0,0,.516-.535,2.053,2.053,0,0,0,.3-.732h.969a3.227,3.227,0,0,1-.4,1.1,2.973,2.973,0,0,1-.719.822,3.129,3.129,0,0,1-.963.514,3.614,3.614,0,0,1-1.139.176,3.353,3.353,0,0,1-1.82-.5,3.431,3.431,0,0,1-1.254-1.422A4.874,4.874,0,0,1,93.191-4a4.874,4.874,0,0,1,.457-2.187A3.431,3.431,0,0,1,94.9-7.609a3.353,3.353,0,0,1,1.82-.5,3.614,3.614,0,0,1,1.139.176,3.129,3.129,0,0,1,.963.514,2.984,2.984,0,0,1,.719.82A3.208,3.208,0,0,1,99.941-5.5ZM102.6,0V-8h4.828v.859h-3.859v2.7h3.609v.859h-3.609V-.859h3.922V0Zm14.022-8V0h-.937l-4.359-6.281h-.078V0h-.969V-8h.938l4.375,6.3h.078V-8Zm7.412,2a1.226,1.226,0,0,0-.57-.922,2.188,2.188,0,0,0-1.227-.328,2.317,2.317,0,0,0-.928.172,1.468,1.468,0,0,0-.617.473,1.126,1.126,0,0,0-.221.684.957.957,0,0,0,.154.549,1.3,1.3,0,0,0,.4.379,2.686,2.686,0,0,0,.508.246q.266.1.488.154l.813.219a7.22,7.22,0,0,1,.7.227,3.309,3.309,0,0,1,.738.393,2.04,2.04,0,0,1,.584.635,1.824,1.824,0,0,1,.23.949A2.115,2.115,0,0,1,124.746-1a2.329,2.329,0,0,1-.984.832,3.618,3.618,0,0,1-1.568.309,3.653,3.653,0,0,1-1.486-.277,2.355,2.355,0,0,1-.984-.773,2.2,2.2,0,0,1-.4-1.152h1a1.236,1.236,0,0,0,.307.748,1.608,1.608,0,0,0,.68.438,2.7,2.7,0,0,0,.889.143,2.6,2.6,0,0,0,1-.182,1.687,1.687,0,0,0,.7-.508,1.2,1.2,0,0,0,.258-.764.938.938,0,0,0-.223-.648,1.634,1.634,0,0,0-.586-.406,6.157,6.157,0,0,0-.785-.273l-.984-.281a3.666,3.666,0,0,1-1.484-.77,1.69,1.69,0,0,1-.547-1.309,1.942,1.942,0,0,1,.365-1.174,2.417,2.417,0,0,1,.984-.781,3.331,3.331,0,0,1,1.385-.279,3.269,3.269,0,0,1,1.375.275,2.409,2.409,0,0,1,.955.752A1.875,1.875,0,0,1,124.975-6Zm3.741,6V-8h4.828v.859h-3.859v2.7h3.609v.859h-3.609V-.859h3.922V0Z"
+          transform="translate(83 68)"
+          className={"logoApplicationName"}
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default ConsoleEnterprise;

src/components/ApplicationLogo/Logos/Console/ConsoleSingle.tsx

@@ -0,0 +1,76 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const ConsoleSingle: FC<SVGProps<any> & LogoBaseProps> = ({
+  inverse,
+  onClick,
+}) => {
+  return (
+    <LogoBase viewBox="0 0 184.45 55" inverse={inverse} onClick={onClick}>
+      <g transform="translate(-31.65 -18.133)">
+        <g transform="translate(-995 -63.754)">
+          <g transform="translate(1025.5 81.887)">
+            <g transform="translate(0 0)">
+              <g transform="translate(0 0)">
+                <path
+                  d="M10.338-17.825A8.815,8.815,0,0,0,1.15-8.75,8.815,8.815,0,0,0,10.338.325a8.825,8.825,0,0,0,9.2-9.075A8.825,8.825,0,0,0,10.338-17.825Zm0,3.35a5.4,5.4,0,0,1,5.55,5.725,5.4,5.4,0,0,1-5.55,5.725A5.41,5.41,0,0,1,4.788-8.75,5.41,5.41,0,0,1,10.338-14.475ZM22.05-17.5V0h7.575c4.2,0,6.588-1.65,6.588-5.013A4.2,4.2,0,0,0,33.3-8.938a3.9,3.9,0,0,0,2.537-3.713c0-3.337-2.562-4.85-6.638-4.85Zm7.4,10.225c1.925,0,3.138.45,3.138,2.088,0,1.675-1.212,2.125-3.138,2.125l-3.913-.013v-4.2Zm-.35-7.15c1.725,0,3.1.375,3.1,2.025,0,1.7-1.35,2.063-3.087,2.063H25.538v-4.088ZM48.788-17.5H45.3V-6.7c0,2.525-1.1,3.675-2.95,3.675a4.214,4.214,0,0,1-3.4-1.625L36.925-2.113A6.9,6.9,0,0,0,42.513.313c3.65,0,6.275-2.3,6.275-6.688ZM65.113-3.2H55.525V-7.225h9.05v-3.2h-9.05V-14.3h9.487v-3.2H52.037V0H65.113ZM76.3-17.825A8.794,8.794,0,0,0,67.113-8.75,8.794,8.794,0,0,0,76.3.325a8.713,8.713,0,0,0,7.387-3.7l-2.85-2.05a5.355,5.355,0,0,1-4.562,2.4A5.4,5.4,0,0,1,70.75-8.75a5.411,5.411,0,0,1,5.525-5.725A5.237,5.237,0,0,1,80.8-12.063l3-1.838A8.5,8.5,0,0,0,76.3-17.825Zm22.9.325H84.863v3.262h5.425V0h3.487V-14.238H99.2Zm19.787,1.738a10.5,10.5,0,0,0-6.25-1.925c-3.6,0-6.475,1.812-6.475,5.037,0,2.688,1.938,4.125,5.138,4.488l1.987.225c2.913.325,4.438,1.25,4.438,3.15,0,2.363-2.337,3.525-5.3,3.525a10.115,10.115,0,0,1-5.925-1.95L105.762-2A11.524,11.524,0,0,0,112.537.188c3.775,0,6.875-1.7,6.875-5.1,0-2.913-2.262-4.138-5.375-4.488l-1.912-.212c-2.988-.338-4.275-1.4-4.275-3.138,0-2.187,2.063-3.488,4.875-3.488a9.323,9.323,0,0,1,5.475,1.713ZM135.025-17.5H120.888v1.45h6.3V0h1.525V-16.05h6.313Zm9.875-.2a8.672,8.672,0,0,0-8.963,8.95A8.672,8.672,0,0,0,144.9.2a8.672,8.672,0,0,0,8.962-8.95A8.672,8.672,0,0,0,144.9-17.7Zm0,1.475a7.174,7.174,0,0,1,7.363,7.475A7.174,7.174,0,0,1,144.9-1.275a7.177,7.177,0,0,1-7.375-7.475A7.177,7.177,0,0,1,144.9-16.225ZM157.413-17.5V0h1.525V-7.763h2.675L168.138,0h1.9l-6.625-7.763h.688c3.725,0,6.025-1.862,6.025-4.875,0-3.1-2.175-4.863-6.037-4.863Zm6.663,1.438c2.875,0,4.475,1.188,4.475,3.425s-1.575,3.488-4.475,3.488h-5.138v-6.913ZM185.6-1.438H175.075V-8.1h10.138V-9.525H175.075v-6.538h10.438V-17.5H173.55V0H185.6Z"
+                  transform="translate(0 32.612)"
+                  className={"logoApplicationName"}
+                />
+                <g transform="translate(2.003)">
+                  <g transform="translate(0 0.129)">
+                    <rect
+                      width="2.49"
+                      height="7.352"
+                      transform="translate(14.42)"
+                      className={"logoSection"}
+                    />
+                    <path
+                      d="M237.8,365.332l-5.053,3.086a.226.226,0,0,1-.235,0l-5.053-3.086a.694.694,0,0,0-.362-.1H227.1a.693.693,0,0,0-.693.693v6.65h2.489v-3.165a.249.249,0,0,1,.379-.212l2.832,1.733a.886.886,0,0,0,.912.009L236,369.184a.249.249,0,0,1,.374.215v3.174h2.488v-6.65a.693.693,0,0,0-.692-.693h-.006A.694.694,0,0,0,237.8,365.332Z"
+                      transform="translate(-226.403 -365.23)"
+                      className={"logoSection"}
+                    />
+                    <path
+                      d="M257.822,365.23H255.3v3.346a.249.249,0,0,1-.366.22l-6.543-3.485a.7.7,0,0,0-.326-.081h0a.693.693,0,0,0-.693.693v6.651h2.5v-3.343a.249.249,0,0,1,.365-.22L256.8,372.5a.692.692,0,0,0,.325.081h0a.693.693,0,0,0,.693-.693Z"
+                      transform="translate(-228.498 -365.23)"
+                      className={"logoSection"}
+                    />
+                  </g>
+                  <path
+                    d="M261.159,372.582V365.23H262.3v7.352Z"
+                    transform="translate(-229.877 -365.101)"
+                    className={"logoSection"}
+                  />
+                  <path
+                    d="M269.337,372.7c-3.082,0-5.268-1.462-5.268-3.805s2.2-3.806,5.268-3.806,5.281,1.462,5.281,3.806S272.458,372.7,269.337,372.7Zm0-6.637c-2.292,0-4.056,1-4.056,2.832s1.765,2.831,4.056,2.831,4.07-.988,4.07-2.831S271.628,366.062,269.337,366.062Z"
+                    transform="translate(-230.168 -365.087)"
+                    className={"logoSection"}
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </LogoBase>
+  );
+};
+
+export default ConsoleSingle;

src/components/ApplicationLogo/Logos/Console/ConsoleStandard.tsx

@@ -0,0 +1,81 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const ConsoleStandard: FC<SVGProps<any> & LogoBaseProps> = ({
+  inverse,
+  onClick,
+}) => {
+  return (
+    <LogoBase viewBox="0 0 184.538 51" inverse={inverse} onClick={onClick}>
+      <g transform="translate(-31.65 -18.133)">
+        <g transform="translate(-995 -63.754)">
+          <g transform="translate(1025.5 81.887)">
+            <g transform="translate(0 0)">
+              <g transform="translate(0 0)">
+                <path
+                  d="M10.338-17.825A8.815,8.815,0,0,0,1.15-8.75,8.815,8.815,0,0,0,10.338.325a8.825,8.825,0,0,0,9.2-9.075A8.825,8.825,0,0,0,10.338-17.825Zm0,3.35a5.4,5.4,0,0,1,5.55,5.725,5.4,5.4,0,0,1-5.55,5.725A5.41,5.41,0,0,1,4.788-8.75,5.41,5.41,0,0,1,10.338-14.475ZM22.05-17.5V0h7.575c4.2,0,6.588-1.65,6.588-5.013A4.2,4.2,0,0,0,33.3-8.938a3.9,3.9,0,0,0,2.537-3.713c0-3.337-2.562-4.85-6.638-4.85Zm7.4,10.225c1.925,0,3.138.45,3.138,2.088,0,1.675-1.212,2.125-3.138,2.125l-3.913-.013v-4.2Zm-.35-7.15c1.725,0,3.1.375,3.1,2.025,0,1.7-1.35,2.063-3.087,2.063H25.538v-4.088ZM48.788-17.5H45.3V-6.7c0,2.525-1.1,3.675-2.95,3.675a4.214,4.214,0,0,1-3.4-1.625L36.925-2.113A6.9,6.9,0,0,0,42.513.313c3.65,0,6.275-2.3,6.275-6.688ZM65.113-3.2H55.525V-7.225h9.05v-3.2h-9.05V-14.3h9.487v-3.2H52.037V0H65.113ZM76.3-17.825A8.794,8.794,0,0,0,67.113-8.75,8.794,8.794,0,0,0,76.3.325a8.713,8.713,0,0,0,7.387-3.7l-2.85-2.05a5.355,5.355,0,0,1-4.562,2.4A5.4,5.4,0,0,1,70.75-8.75a5.411,5.411,0,0,1,5.525-5.725A5.237,5.237,0,0,1,80.8-12.063l3-1.838A8.5,8.5,0,0,0,76.3-17.825Zm22.9.325H84.863v3.262h5.425V0h3.487V-14.238H99.2Zm19.787,1.738a10.5,10.5,0,0,0-6.25-1.925c-3.6,0-6.475,1.812-6.475,5.037,0,2.688,1.938,4.125,5.138,4.488l1.987.225c2.913.325,4.438,1.25,4.438,3.15,0,2.363-2.337,3.525-5.3,3.525a10.115,10.115,0,0,1-5.925-1.95L105.762-2A11.524,11.524,0,0,0,112.537.188c3.775,0,6.875-1.7,6.875-5.1,0-2.913-2.262-4.138-5.375-4.488l-1.912-.212c-2.988-.338-4.275-1.4-4.275-3.138,0-2.187,2.063-3.488,4.875-3.488a9.323,9.323,0,0,1,5.475,1.713ZM135.025-17.5H120.888v1.45h6.3V0h1.525V-16.05h6.313Zm9.875-.2a8.672,8.672,0,0,0-8.963,8.95A8.672,8.672,0,0,0,144.9.2a8.672,8.672,0,0,0,8.962-8.95A8.672,8.672,0,0,0,144.9-17.7Zm0,1.475a7.174,7.174,0,0,1,7.363,7.475A7.174,7.174,0,0,1,144.9-1.275a7.177,7.177,0,0,1-7.375-7.475A7.177,7.177,0,0,1,144.9-16.225ZM157.413-17.5V0h1.525V-7.763h2.675L168.138,0h1.9l-6.625-7.763h.688c3.725,0,6.025-1.862,6.025-4.875,0-3.1-2.175-4.863-6.037-4.863Zm6.663,1.438c2.875,0,4.475,1.188,4.475,3.425s-1.575,3.488-4.475,3.488h-5.138v-6.913ZM185.6-1.438H175.075V-8.1h10.138V-9.525H175.075v-6.538h10.438V-17.5H173.55V0H185.6Z"
+                  transform="translate(0 32.612)"
+                  className={"logoApplicationName"}
+                />
+                <g transform="translate(2.003)">
+                  <g transform="translate(0 0.129)">
+                    <rect
+                      width="2.49"
+                      height="7.352"
+                      transform="translate(14.42)"
+                      className={"logoSection"}
+                    />
+                    <path
+                      d="M237.8,365.332l-5.053,3.086a.226.226,0,0,1-.235,0l-5.053-3.086a.694.694,0,0,0-.362-.1H227.1a.693.693,0,0,0-.693.693v6.65h2.489v-3.165a.249.249,0,0,1,.379-.212l2.832,1.733a.886.886,0,0,0,.912.009L236,369.184a.249.249,0,0,1,.374.215v3.174h2.488v-6.65a.693.693,0,0,0-.692-.693h-.006A.694.694,0,0,0,237.8,365.332Z"
+                      transform="translate(-226.403 -365.23)"
+                      className={"logoSection"}
+                    />
+                    <path
+                      d="M257.822,365.23H255.3v3.346a.249.249,0,0,1-.366.22l-6.543-3.485a.7.7,0,0,0-.326-.081h0a.693.693,0,0,0-.693.693v6.651h2.5v-3.343a.249.249,0,0,1,.365-.22L256.8,372.5a.692.692,0,0,0,.325.081h0a.693.693,0,0,0,.693-.693Z"
+                      transform="translate(-228.498 -365.23)"
+                      className={"logoSection"}
+                    />
+                  </g>
+                  <path
+                    d="M261.159,372.582V365.23H262.3v7.352Z"
+                    transform="translate(-229.877 -365.101)"
+                    className={"logoSection"}
+                  />
+                  <path
+                    d="M269.337,372.7c-3.082,0-5.268-1.462-5.268-3.805s2.2-3.806,5.268-3.806,5.281,1.462,5.281,3.806S272.458,372.7,269.337,372.7Zm0-6.637c-2.292,0-4.056,1-4.056,2.832s1.765,2.831,4.056,2.831,4.07-.988,4.07-2.831S271.628,366.062,269.337,366.062Z"
+                    transform="translate(-230.168 -365.087)"
+                    className={"logoSection"}
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+        <path
+          d="M5.344-6a1.226,1.226,0,0,0-.57-.922A2.188,2.188,0,0,0,3.547-7.25a2.317,2.317,0,0,0-.928.172A1.468,1.468,0,0,0,2-6.605a1.126,1.126,0,0,0-.221.684.957.957,0,0,0,.154.549,1.3,1.3,0,0,0,.4.379,2.686,2.686,0,0,0,.508.246q.266.1.488.154l.813.219a7.221,7.221,0,0,1,.7.227,3.309,3.309,0,0,1,.738.393,2.04,2.04,0,0,1,.584.635,1.824,1.824,0,0,1,.23.949A2.115,2.115,0,0,1,6.053-1a2.329,2.329,0,0,1-.984.832A3.618,3.618,0,0,1,3.5.141,3.653,3.653,0,0,1,2.014-.137,2.355,2.355,0,0,1,1.029-.91a2.2,2.2,0,0,1-.4-1.152h1a1.236,1.236,0,0,0,.307.748,1.608,1.608,0,0,0,.68.438A2.7,2.7,0,0,0,3.5-.734a2.6,2.6,0,0,0,1-.182,1.687,1.687,0,0,0,.7-.508,1.2,1.2,0,0,0,.258-.764.938.938,0,0,0-.223-.648,1.634,1.634,0,0,0-.586-.406,6.157,6.157,0,0,0-.785-.273L2.875-3.8a3.666,3.666,0,0,1-1.484-.77A1.69,1.69,0,0,1,.844-5.875a1.942,1.942,0,0,1,.365-1.174,2.417,2.417,0,0,1,.984-.781,3.331,3.331,0,0,1,1.385-.279,3.269,3.269,0,0,1,1.375.275,2.409,2.409,0,0,1,.955.752A1.875,1.875,0,0,1,6.281-6Zm3.3-1.141V-8h6v.859H12.131V0h-.969V-7.141ZM16.638,0H15.622l2.938-8h1L22.5,0H21.481L19.091-6.734h-.062Zm.375-3.125h4.094v.859H17.013ZM31.191-8V0h-.937L25.894-6.281h-.078V0h-.969V-8h.938l4.375,6.3h.078V-8ZM36.7,0H34.228V-8h2.578a3.918,3.918,0,0,1,1.992.479,3.16,3.16,0,0,1,1.27,1.371,4.771,4.771,0,0,1,.441,2.135,4.8,4.8,0,0,1-.445,2.15,3.159,3.159,0,0,1-1.3,1.383A4.14,4.14,0,0,1,36.7,0ZM35.2-.859h1.438a3.209,3.209,0,0,0,1.645-.383,2.359,2.359,0,0,0,.973-1.09,4.054,4.054,0,0,0,.32-1.684,4.035,4.035,0,0,0-.316-1.67,2.347,2.347,0,0,0-.945-1.078,3,3,0,0,0-1.566-.377H35.2ZM43.188,0H42.172l2.938-8h1l2.938,8H48.031L45.641-6.734h-.062Zm.375-3.125h4.094v.859H43.563ZM51.4,0V-8h2.7a3.277,3.277,0,0,1,1.539.318,2.054,2.054,0,0,1,.891.873,2.69,2.69,0,0,1,.289,1.262,2.643,2.643,0,0,1-.289,1.254,2.026,2.026,0,0,1-.887.857,3.3,3.3,0,0,1-1.527.311H51.928V-4h2.156a2.415,2.415,0,0,0,1.033-.187,1.194,1.194,0,0,0,.57-.533,1.787,1.787,0,0,0,.178-.826,1.856,1.856,0,0,0-.18-.84,1.235,1.235,0,0,0-.574-.557,2.345,2.345,0,0,0-1.043-.2h-1.7V0Zm3.766-3.594L57.131,0H56.006L54.069-3.594ZM62,0H59.528V-8h2.578a3.918,3.918,0,0,1,1.992.479,3.16,3.16,0,0,1,1.27,1.371,4.771,4.771,0,0,1,.441,2.135,4.8,4.8,0,0,1-.445,2.15,3.159,3.159,0,0,1-1.3,1.383A4.14,4.14,0,0,1,62,0ZM60.5-.859h1.438a3.209,3.209,0,0,0,1.645-.383,2.359,2.359,0,0,0,.973-1.09,4.055,4.055,0,0,0,.32-1.684,4.035,4.035,0,0,0-.316-1.67,2.347,2.347,0,0,0-.945-1.078,3,3,0,0,0-1.566-.377H60.5ZM72.728,0V-8H73.7V-.859h3.719V0Zm8.256-8V0h-.969V-8Zm9.475,2.5h-.969a2.034,2.034,0,0,0-.3-.734,2.072,2.072,0,0,0-.516-.533,2.24,2.24,0,0,0-.67-.326,2.668,2.668,0,0,0-.766-.109,2.431,2.431,0,0,0-1.314.367,2.536,2.536,0,0,0-.934,1.082A4.007,4.007,0,0,0,84.647-4a4.007,4.007,0,0,0,.346,1.754,2.536,2.536,0,0,0,.934,1.082A2.431,2.431,0,0,0,87.241-.8a2.668,2.668,0,0,0,.766-.109,2.24,2.24,0,0,0,.67-.326,2.06,2.06,0,0,0,.516-.535,2.053,2.053,0,0,0,.3-.732h.969a3.227,3.227,0,0,1-.4,1.1,2.973,2.973,0,0,1-.719.822,3.129,3.129,0,0,1-.963.514,3.614,3.614,0,0,1-1.139.176,3.353,3.353,0,0,1-1.82-.5,3.431,3.431,0,0,1-1.254-1.422A4.874,4.874,0,0,1,83.709-4a4.874,4.874,0,0,1,.457-2.187A3.431,3.431,0,0,1,85.42-7.609a3.353,3.353,0,0,1,1.82-.5,3.614,3.614,0,0,1,1.139.176,3.129,3.129,0,0,1,.963.514,2.984,2.984,0,0,1,.719.82A3.208,3.208,0,0,1,90.459-5.5ZM93.122,0V-8H97.95v.859H94.091v2.7H97.7v.859H94.091V-.859h3.922V0Zm14.022-8V0h-.937l-4.359-6.281h-.078V0H100.8V-8h.938l4.375,6.3h.078V-8Zm7.412,2a1.226,1.226,0,0,0-.57-.922,2.188,2.188,0,0,0-1.227-.328,2.317,2.317,0,0,0-.928.172,1.468,1.468,0,0,0-.617.473,1.126,1.126,0,0,0-.221.684.957.957,0,0,0,.154.549,1.3,1.3,0,0,0,.4.379,2.686,2.686,0,0,0,.508.246q.266.1.488.154l.813.219a7.22,7.22,0,0,1,.7.227,3.309,3.309,0,0,1,.738.393,2.04,2.04,0,0,1,.584.635,1.824,1.824,0,0,1,.23.949A2.115,2.115,0,0,1,115.265-1a2.329,2.329,0,0,1-.984.832,3.618,3.618,0,0,1-1.568.309,3.653,3.653,0,0,1-1.486-.277,2.355,2.355,0,0,1-.984-.773,2.2,2.2,0,0,1-.4-1.152h1a1.236,1.236,0,0,0,.307.748,1.608,1.608,0,0,0,.68.438,2.7,2.7,0,0,0,.889.143,2.6,2.6,0,0,0,1-.182,1.687,1.687,0,0,0,.7-.508,1.2,1.2,0,0,0,.258-.764.938.938,0,0,0-.223-.648,1.634,1.634,0,0,0-.586-.406,6.157,6.157,0,0,0-.785-.273l-.984-.281a3.666,3.666,0,0,1-1.484-.77,1.69,1.69,0,0,1-.547-1.309,1.942,1.942,0,0,1,.365-1.174,2.417,2.417,0,0,1,.984-.781,3.331,3.331,0,0,1,1.385-.279,3.269,3.269,0,0,1,1.375.275,2.409,2.409,0,0,1,.955.752A1.875,1.875,0,0,1,115.494-6ZM118.3,0V-8h4.828v.859h-3.859v2.7h3.609v.859h-3.609V-.859h3.922V0Z"
+          transform="translate(93 68)"
+          className={"logoApplicationName"}
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default ConsoleStandard;

src/components/ApplicationLogo/Logos/Console/GlobalConsole.tsx

@@ -0,0 +1,106 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const GlobalConsole: FC<SVGProps<any> & LogoBaseProps> = ({ inverse }) => {
+  return (
+    <LogoBase viewBox="0 0 219 51" inverse={inverse}>
+      <g>
+        <rect
+          x="22.2"
+          y="0.2"
+          className={"logoSection"}
+          width="3.8"
+          height="11.2"
+        />
+        <path
+          className={"logoSection"}
+          d="M17.6,0.4L9.8,5.1c-0.1,0.1-0.2,0.1-0.4,0L1.6,0.4C1.5,0.3,1.3,0.2,1.1,0.2l0,0C0.5,0.2,0,0.7,0,1.3v10.2h3.8
+		V6.6c0-0.3,0.3-0.5,0.6-0.3L8.8,9c0.4,0.3,1,0.3,1.4,0l4.6-2.7c0.3-0.1,0.6,0,0.6,0.3v4.9h3.8V1.3c0-0.6-0.5-1.1-1.1-1.1l0,0
+		C17.9,0.2,17.7,0.3,17.6,0.4L17.6,0.4z"
+        />
+        <path
+          className={"logoSection"}
+          d="M45.2,0.2h-3.9v5.2c0,0.3-0.3,0.5-0.6,0.3L30.6,0.4c-0.2-0.1-0.3-0.1-0.5-0.1l0,0c-0.6,0-1.1,0.5-1.1,1.1v10.2
+		h3.9V6.4c0-0.3,0.3-0.5,0.6-0.3l10.1,5.4c0.2,0.1,0.3,0.1,0.5,0.1l0,0c0.6,0,1.1-0.5,1.1-1.1L45.2,0.2L45.2,0.2L45.2,0.2z"
+        />
+        <path
+          className={"logoSection"}
+          d="M48.3,11.5V0.2h1.8v11.2L48.3,11.5L48.3,11.5z"
+        />
+        <path
+          className={"logoSection"}
+          d="M60.3,11.7c-4.7,0-8.1-2.3-8.1-5.9s3.4-5.9,8.1-5.9s8.1,2.3,8.1,5.9S65.2,11.7,60.3,11.7z M60.3,1.5
+		c-3.5,0-6.2,1.5-6.2,4.4c0,2.8,2.7,4.4,6.2,4.4s6.3-1.5,6.3-4.4S63.9,1.5,60.3,1.5L60.3,1.5z"
+        />
+        <g>
+          <path
+            className={"logoApplicationName"}
+            d="M15.6,19.8c2.6,0,5.1,0.6,7.3,1.7c2.2,1.1,3.9,2.7,5.1,4.6l-2.9,1.9c-1-1.5-2.3-2.7-4-3.6c-1.7-0.9-3.5-1.3-5.5-1.3
+			c-1.7,0-3.3,0.3-4.7,0.9c-1.5,0.6-2.7,1.4-3.8,2.5c-1.1,1.1-1.9,2.3-2.5,3.9c-0.6,1.5-0.9,3.2-0.9,5s0.3,3.4,0.9,5
+			c0.6,1.5,1.5,2.8,2.5,3.9c1.1,1.1,2.3,1.9,3.8,2.5c1.5,0.6,3.1,0.9,4.7,0.9c2,0,3.8-0.4,5.5-1.3c1.6-0.9,3-2,4-3.6l2.8,2.1
+			c-1.3,1.9-3,3.4-5.1,4.5c-2.2,1.1-4.5,1.6-7.1,1.6c-2.2,0-4.3-0.4-6.2-1.2c-1.9-0.8-3.6-1.9-5-3.2c-1.4-1.4-2.5-3-3.3-4.9
+			c-0.8-1.9-1.2-4-1.2-6.3s0.4-4.3,1.2-6.3c0.8-1.9,1.9-3.6,3.3-4.9c1.4-1.4,3-2.4,5-3.2C11.3,20.2,13.4,19.8,15.6,19.8z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M48.2,19.8c3,0,5.6,0.7,8,2c2.4,1.3,4.2,3.2,5.6,5.5c1.3,2.4,2,5.1,2,8s-0.7,5.7-2,8c-1.3,2.4-3.2,4.2-5.6,5.6
+			c-2.4,1.3-5.1,2-8,2c-2.2,0-4.3-0.4-6.2-1.2c-1.9-0.8-3.6-1.9-5-3.2c-1.4-1.4-2.5-3-3.3-4.9c-0.8-1.9-1.2-4-1.2-6.3
+			s0.4-4.3,1.2-6.3c0.8-1.9,1.9-3.6,3.3-4.9c1.4-1.4,3-2.4,5-3.2C43.9,20.2,46,19.8,48.2,19.8z M48.2,23.2c-1.7,0-3.3,0.3-4.7,0.9
+			c-1.5,0.6-2.7,1.4-3.8,2.5c-1.1,1.1-1.9,2.3-2.5,3.9c-0.6,1.5-0.9,3.2-0.9,5s0.3,3.4,0.9,5c0.6,1.5,1.5,2.8,2.5,3.9
+			c1.1,1.1,2.3,1.9,3.8,2.5c1.5,0.6,3.1,0.9,4.7,0.9c2.3,0,4.3-0.5,6.1-1.5c1.8-1,3.3-2.5,4.3-4.3c1.1-1.9,1.6-4,1.6-6.4
+			s-0.5-4.5-1.6-6.4s-2.5-3.3-4.3-4.3C52.5,23.7,50.5,23.2,48.2,23.2z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M96.2,20.3v30.3h-3.1L74.3,26.2v24.3h-3.5V20.3H74l18.8,24.3V20.3H96.2z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M126.5,23.2l-1.8,2.8c-2.8-1.9-5.8-2.8-9.1-2.8c-2.3,0-4.2,0.5-5.7,1.5c-1.4,1-2.2,2.3-2.2,4c0,1.4,0.6,2.5,1.7,3.3
+			c1.1,0.8,2.9,1.3,5.3,1.6l2.9,0.3c1.3,0.2,2.5,0.4,3.6,0.8c1.1,0.4,2.1,0.8,3,1.4c0.9,0.6,1.6,1.4,2.1,2.4c0.5,1,0.8,2.1,0.8,3.4
+			c0,1.9-0.6,3.6-1.7,5c-1.1,1.4-2.5,2.4-4.3,3.1c-1.8,0.7-3.8,1-6,1c-2.2,0-4.3-0.4-6.5-1.1s-4-1.7-5.4-2.8l1.9-2.8
+			c1.1,0.9,2.6,1.7,4.4,2.4c1.8,0.7,3.7,1,5.6,1c2.5,0,4.5-0.5,6-1.4c1.6-1,2.4-2.3,2.4-4.1c0-1.4-0.6-2.6-1.8-3.4
+			c-1.2-0.8-3.1-1.3-5.5-1.6l-3.1-0.3c-2.7-0.3-4.9-1.1-6.5-2.4c-1.6-1.3-2.4-3.2-2.4-5.6c0-1.9,0.5-3.5,1.6-4.9
+			c1-1.4,2.4-2.4,4.1-3.1c1.7-0.7,3.6-1,5.8-1C119.8,19.9,123.4,21,126.5,23.2z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M147.9,19.8c3,0,5.6,0.7,8,2c2.4,1.3,4.2,3.2,5.6,5.5c1.3,2.4,2,5.1,2,8s-0.7,5.7-2,8c-1.3,2.4-3.2,4.2-5.6,5.6
+			c-2.4,1.3-5.1,2-8,2c-2.2,0-4.3-0.4-6.2-1.2c-1.9-0.8-3.6-1.9-5-3.2c-1.4-1.4-2.5-3-3.3-4.9c-0.8-1.9-1.2-4-1.2-6.3
+			s0.4-4.3,1.2-6.3s1.9-3.6,3.3-4.9c1.4-1.4,3-2.4,5-3.2C143.6,20.2,145.7,19.8,147.9,19.8z M147.9,23.2c-1.7,0-3.3,0.3-4.7,0.9
+			c-1.5,0.6-2.7,1.4-3.8,2.5c-1.1,1.1-1.9,2.3-2.5,3.9c-0.6,1.5-0.9,3.2-0.9,5s0.3,3.4,0.9,5c0.6,1.5,1.5,2.8,2.5,3.9
+			c1.1,1.1,2.3,1.9,3.8,2.5c1.5,0.6,3.1,0.9,4.7,0.9c2.3,0,4.3-0.5,6.1-1.5c1.8-1,3.3-2.5,4.3-4.3c1.1-1.9,1.6-4,1.6-6.4
+			s-0.5-4.5-1.6-6.4s-2.5-3.3-4.3-4.3C152.2,23.7,150.2,23.2,147.9,23.2z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M191.6,47.3v3.3h-21V20.3h3.5v27H191.6z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M218.2,47.3v3.3h-21.3V20.3H218v3.3h-17.6v10.1h17.1v3.2h-17.1v10.4H218.2z"
+          />
+        </g>
+      </g>
+    </LogoBase>
+  );
+};
+
+export default GlobalConsole;

src/components/ApplicationLogo/Logos/DirectPV/DirectPV.tsx

@@ -0,0 +1,69 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const DirectPV: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 184.538 50.008" inverse={inverse} onClick={onClick}>
+      <g transform="translate(26.456 -11)">
+        <g transform="translate(-29 11)">
+          <g transform="translate(0 0)">
+            <path
+              d="M2.544-22.4V0h9.232c7.008,0,11.632-4.448,11.632-11.2S18.784-22.4,11.776-22.4Zm9.184,4.176c4.72,0,7.008,2.912,7.008,7.024,0,4.064-2.288,7.024-7.008,7.024H7.008V-18.224ZM31.088-22.4H26.624V0h4.464Zm4.288,0V0H39.84V-8.912h1.312L47.68,0h5.408l-6.9-8.976c4.3-.416,6.864-2.928,6.864-6.608,0-4.288-2.864-6.816-8.208-6.816Zm9.392,4.112c2.368,0,3.7.848,3.7,2.7,0,1.888-1.264,2.784-3.7,2.784H39.84v-5.488ZM73.072-4.1H60.8V-9.248H72.384v-4.1H60.8V-18.3H72.944v-4.1H56.336V0H73.072Zm14.32-18.72c-6.9,0-11.76,4.88-11.76,11.616S80.5.416,87.392.416A11.153,11.153,0,0,0,96.848-4.32L93.2-6.944a6.855,6.855,0,0,1-5.84,3.072c-3.952,0-7.056-2.832-7.072-7.328,0-4.352,3.008-7.328,7.072-7.328a6.7,6.7,0,0,1,5.792,3.088l3.84-2.352A10.88,10.88,0,0,0,87.392-22.816ZM116.7-22.4H98.352v4.176H105.3V0h4.464V-18.224H116.7ZM128.08-9.12c4.944,0,7.92-2.448,7.92-6.64s-2.976-6.64-7.92-6.64h-8.32V0h1.952V-9.12Zm-.048-11.44c3.744,0,5.936,1.632,5.936,4.8s-2.192,4.784-5.936,4.784h-6.32V-20.56Zm30.4-1.84h-2.016l-8.4,20.464L139.632-22.4h-2.08L146.784,0H149.2Z"
+              transform="translate(0 42.065)"
+              className={"logoApplicationName"}
+            />
+            <g transform="translate(2.649 0)">
+              <g transform="translate(0 0.17)">
+                <rect
+                  width="3.292"
+                  height="9.721"
+                  transform="translate(19.066)"
+                  className={"logoSection"}
+                />
+                <path
+                  d="M241.479,365.364l-6.681,4.081a.3.3,0,0,1-.311,0l-6.681-4.081a.917.917,0,0,0-.478-.134h-.008a.917.917,0,0,0-.916.916v8.793h3.29v-4.185a.329.329,0,0,1,.5-.281l3.744,2.291a1.172,1.172,0,0,0,1.206.012l3.952-2.318a.329.329,0,0,1,.5.284v4.2h3.289v-8.793a.916.916,0,0,0-.915-.916h-.008A.917.917,0,0,0,241.479,365.364Z"
+                  transform="translate(-226.403 -365.23)"
+                  className={"logoSection"}
+                />
+                <path
+                  d="M261.192,365.23h-3.338v4.425a.329.329,0,0,1-.484.29l-8.652-4.608a.919.919,0,0,0-.431-.107h-.006a.917.917,0,0,0-.916.916v8.795h3.312v-4.42a.329.329,0,0,1,.483-.29l8.686,4.607a.916.916,0,0,0,.43.107h0a.917.917,0,0,0,.916-.916Z"
+                  transform="translate(-222.419 -365.23)"
+                  className={"logoSection"}
+                />
+              </g>
+              <path
+                d="M261.159,374.952V365.23h1.515v9.722Z"
+                transform="translate(-219.797 -365.06)"
+                className={"logoSection"}
+              />
+              <path
+                d="M271.034,375.151c-4.075,0-6.965-1.933-6.965-5.032,0-3.082,2.908-5.033,6.965-5.033s6.983,1.933,6.983,5.033S275.162,375.151,271.034,375.151Zm0-8.776c-3.03,0-5.364,1.323-5.364,3.744,0,2.437,2.334,3.744,5.364,3.744s5.382-1.307,5.382-3.744C276.416,367.7,274.064,366.376,271.034,366.376Z"
+                transform="translate(-219.244 -365.087)"
+                className={"logoSection"}
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+    </LogoBase>
+  );
+};
+
+export default DirectPV;

src/components/ApplicationLogo/Logos/Enterprise/Enterprise.tsx

@@ -0,0 +1,131 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const Enterprise: FC<SVGProps<any> & LogoBaseProps> = ({
+  inverse,
+  onClick,
+}) => {
+  return (
+    <LogoBase viewBox="0 0 249.2 51" inverse={inverse} onClick={onClick}>
+      <g transform="translate(26.059 -11)">
+        <g transform="translate(-29 11)">
+          <g transform="translate(0 0)">
+            <g transform="translate(3.025 0)">
+              <g transform="translate(0 0.194)">
+                <g>
+                  <rect
+                    x="21.8"
+                    y="0"
+                    className={"logoSection"}
+                    width="3.8"
+                    height="11.1"
+                  />
+                </g>
+                <g>
+                  <path
+                    className={"logoSection"}
+                    d="M17.2,0.2L9.6,4.8c-0.1,0.1-0.2,0.1-0.4,0L1.6,0.2C1.4,0.1,1.2,0,1.1,0l0,0C0.5,0,0,0.5,0,1v10h3.8
+							V6.3c0-0.2,0.2-0.4,0.4-0.4c0.1,0,0.1,0,0.2,0.1l4.3,2.6c0.4,0.3,1,0.3,1.4,0L14.5,6c0.2-0.1,0.4,0,0.5,0.1
+							c0,0.1,0.1,0.1,0.1,0.2v4.8h3.8V1c0-0.6-0.5-1-1-1l0,0C17.6,0,17.4,0.1,17.2,0.2z"
+                  />
+                </g>
+                <g>
+                  <path
+                    className={"logoSection"}
+                    d="M44.3,0h-3.8v5.1c0,0.2-0.2,0.4-0.4,0.4c-0.1,0-0.1,0-0.2,0L30,0.1C29.9,0,29.7,0,29.5,0l0,0
+							c-0.6,0-1,0.5-1,1v10h3.8V6c0-0.2,0.2-0.4,0.4-0.4c0.1,0,0.1,0,0.2,0l9.9,5.3C43,11,43.1,11,43.3,11l0,0c0.6,0,1-0.5,1-1V0z"
+                  />
+                </g>
+              </g>
+              <g>
+                <path
+                  className={"logoSection"}
+                  d="M47.2,11.3V0.2H49v11.1H47.2z"
+                />
+              </g>
+              <g>
+                <path
+                  className={"logoSection"}
+                  d="M59.2,11.5c-4.7,0-8-2.2-8-5.7s3.3-5.7,8-5.7s8,2.2,8,5.7S63.9,11.5,59.2,11.5z M59.2,1.5
+						C55.7,1.5,53,3,53,5.7c0,2.8,2.7,4.3,6.1,4.3s6.1-1.5,6.1-4.3C65.3,3,62.6,1.5,59.2,1.5z"
+                />
+              </g>
+            </g>
+          </g>
+          <g>
+            <path
+              className={"logoApplicationName"}
+              d="M23.1,45.2v4.2H2.8V21.6h20v4.2H7.3v7.5h15v4.2h-15v7.7H23.1z"
+            />
+            <path
+              className={"logoApplicationName"}
+              d="M53.9,21.6v27.8h-4L34.4,29.3l0,20.1h-4.5V21.6h4l15.5,20.1V21.6H53.9z"
+            />
+            <path
+              className={"logoApplicationName"}
+              d="M80.9,21.6v4.2h-9v23.5h-4.5V25.9h-9v-4.2H80.9z"
+            />
+            <path
+              className={"logoApplicationName"}
+              d="M105.7,45.2v4.2H85.4V21.6h20v4.2H89.9v7.5h15v4.2h-15v7.7H105.7z"
+            />
+            <path
+              className={"logoApplicationName"}
+              d="M112.5,21.6h11.4c3.2,0,5.6,0.7,7.3,2.1c1.7,1.4,2.5,3.4,2.5,6c0,2.4-0.8,4.3-2.5,5.7c-1.7,1.5-3.9,2.2-6.8,2.3l9.2,11.7
+				h-5.6l-8.9-11.7H117v11.7h-4.5V21.6z M123.8,25.8H117v7.8h6.8c1.8,0,3.1-0.3,4-1c0.9-0.7,1.3-1.7,1.3-3c0-1.3-0.4-2.3-1.3-2.9
+				C126.9,26.2,125.6,25.8,123.8,25.8z"
+            />
+            <path
+              className={"logoApplicationName"}
+              d="M150.5,38.5h-6.3v10.9h-4.5V21.6h10.8c3.2,0,5.6,0.7,7.3,2.2s2.6,3.6,2.6,6.2s-0.9,4.7-2.6,6.2
+				C156.1,37.8,153.7,38.5,150.5,38.5z M150.4,25.9h-6.2v8.4h6.2c1.8,0,3.1-0.3,4-1c0.9-0.7,1.3-1.7,1.3-3.2s-0.4-2.5-1.3-3.2
+				C153.6,26.2,152.2,25.9,150.4,25.9z"
+            />
+            <path
+              className={"logoApplicationName"}
+              d="M166,21.6h11.4c3.2,0,5.6,0.7,7.3,2.1c1.7,1.4,2.5,3.4,2.5,6c0,2.4-0.8,4.3-2.5,5.7c-1.7,1.5-3.9,2.2-6.8,2.3l9.2,11.7
+				h-5.6l-8.9-11.7h-2.3v11.7H166V21.6z M177.3,25.8h-6.8v7.8h6.8c1.8,0,3.1-0.3,4-1c0.9-0.7,1.3-1.7,1.3-3c0-1.3-0.4-2.3-1.3-2.9
+				S179.1,25.8,177.3,25.8z"
+            />
+            <path
+              className={"logoApplicationName"}
+              d="M197.7,21.6v27.8h-4.5V21.6H197.7z"
+            />
+            <path
+              className={"logoApplicationName"}
+              d="M225.8,24.2l-2.3,3.6c-2.5-1.6-5.1-2.4-7.8-2.4c-1.9,0-3.4,0.4-4.5,1.1c-1.2,0.8-1.7,1.8-1.7,3c0,1.1,0.5,1.9,1.4,2.5
+				s2.4,1,4.3,1.3l1.9,0.3c6,0.8,9,3.4,9,7.6c0,1.8-0.5,3.4-1.5,4.8c-1,1.4-2.4,2.4-4,3c-1.7,0.7-3.5,1-5.5,1c-2,0-4-0.3-6-1
+				s-3.8-1.6-5.1-2.8l2.4-3.6c1,0.9,2.3,1.6,3.9,2.2c1.6,0.6,3.2,0.9,4.8,0.9c1.9,0,3.4-0.4,4.6-1.1c1.2-0.7,1.8-1.7,1.8-3
+				c0-1.1-0.5-1.9-1.5-2.5c-1-0.6-2.6-1-4.7-1.3l-2.2-0.3c-0.9-0.1-1.7-0.3-2.5-0.5c-0.8-0.2-1.5-0.5-2.2-1
+				c-0.7-0.4-1.3-0.9-1.9-1.4c-0.5-0.5-0.9-1.2-1.2-2.1c-0.3-0.8-0.5-1.7-0.5-2.7c0-1.8,0.5-3.4,1.5-4.7s2.3-2.3,4-3
+				c1.6-0.7,3.5-1,5.5-1C219.4,21.2,222.8,22.2,225.8,24.2z"
+            />
+            <path
+              className={"logoApplicationName"}
+              d="M252.4,45.2v4.2h-20.3V21.6h20v4.2h-15.5v7.5h15v4.2h-15v7.7H252.4z"
+            />
+          </g>
+        </g>
+      </g>
+    </LogoBase>
+  );
+};
+
+export default Enterprise;

src/components/ApplicationLogo/Logos/Eureka/Eureka.tsx

@@ -0,0 +1,128 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const Eureka: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 208.7 51" inverse={inverse} onClick={onClick}>
+      <g>
+        <path
+          id="Path_116"
+          className={"logoApplicationName"}
+          d="M164.5,50.7c0.3,0,6.8,0,9.5,0v-0.4c-0.3-0.3-0.6-0.5-0.9-0.8c-6.3-5.2-12.5-10.4-18.8-15.5
+		c-1.2-1-1.2-1.1,0-2.1c5.6-4.7,11.2-9.3,16.7-13.9c1-0.8,2-1.7,3.2-2.8c-0.7-0.1-1.1-0.1-1.5-0.1c-2.6,0-5.2-0.1-7.8,0
+		c-0.8,0-1.6,0.3-2.2,0.8c-4.3,3.5-8.4,7.1-12.7,10.7c-0.4,0.3-0.8,0.5-1.4,1c0-0.8-0.1-1.2-0.1-1.7c0-6,0-12,0-18.1
+		c0-1.1-0.3-1.5-1.4-1.4c-1.2,0.1-2.5,0-3.7,0c-1.2,0-1.7,0.6-1.7,1.7c0,7.2,0,14.3,0,21.5c0,6.6,0,13.1,0,19.7
+		c0,0.5,0.1,0.9,0.3,1.1c0.2,0.2,0.6,0.2,1,0.2c0.8,0,1.6,0.1,2.4,0.1c0.7,0,1.4-0.1,2-0.1c0.4,0,0.7,0,0.9-0.2
+		c0.2-0.2,0.3-0.5,0.3-1c0-3.2,0-6.3,0-9.5c0-0.4,0.1-0.9,0.1-1.5c0.6,0.4,1.1,0.7,1.5,1c4.3,3.5,8.3,7,10.5,8.7
+		c0.1,0.1,0.4,0.3,0.8,0.6c1.1,0.8,1.1,0.8,1.9,1.4c0.2,0.1,0.4,0.2,0.6,0.4c0.1,0.1,0.3,0.2,0.4,0.2
+		C164.3,50.6,164.4,50.7,164.5,50.7L164.5,50.7z"
+        />
+        <path
+          id="Path_117"
+          className={"logoApplicationName"}
+          d="M18.8,50.6c-5.5,0-11.1,0-16.6,0c-1.1,0-1.5-0.3-1.5-1.4c0.1-8.6,0.1-17.2,0-25.9
+		C0.6,22.2,1,22,2.1,22c11.1,0,14.7,0,25.8,0c1.1,0,1.5,0.3,1.4,1.4c-0.1,1.4,0,2.9,0,4.3c0,1.1-0.6,1.6-1.7,1.6c-8.5,0-9.5,0-18,0
+		c-1.2,0-1.7,0.3-1.6,1.6c0.1,3.6,0,7.3,0,10.9c0,1.6,0,1.6,1.7,1.6c8.4,0,16.9,0,25.3,0c1.2,0,1.9,0.6,1.9,1.9c0,1.4,0,2.8,0,4.2
+		c0,0.9-0.3,1.2-1.2,1.2C30,50.6,24.4,50.6,18.8,50.6L18.8,50.6z"
+        />
+        <path
+          id="Path_118"
+          className={"logoApplicationName"}
+          d="M72.4,26.6c0,3.2,0.1,6.3,0,9.5c-0.2,8.3-7.5,14.9-15.9,14.6C49,50.6,41.9,44.3,41.7,36
+		c-0.2-6.6,0-13.3-0.1-19.9c0-0.8,0.3-1.1,1.1-1.1c1.5,0,3,0.1,4.5,0c1.1-0.1,1.3,0.4,1.3,1.4c0,6.1,0,12.3,0,18.4
+		c0,3.6,1.4,6.5,4.7,8.3c5.3,2.8,12-0.8,12.2-6.8c0.2-6.4,0.1-12.9,0.1-19.3c0-1.3,0.7-2,2-2c1.2,0,2.3,0.1,3.5,0
+		c1.1-0.1,1.4,0.3,1.4,1.4C72.4,19.8,72.4,23.2,72.4,26.6L72.4,26.6L72.4,26.6z"
+        />
+        <path
+          id="Path_119"
+          className={"logoApplicationName"}
+          d="M77.5,39.5c0-2.9,0-5.9,0-8.8c0.1-7.1,4.2-12.9,10.9-15c2-0.6,4.1-0.6,6.2-0.7
+		c1.4-0.1,2.8,0,4.2,0c0.8,0,1,0.3,1,1c0,1.6,0,3.1,0,4.7c0,0.9-0.3,1.2-1.2,1.1c-1.9,0-3.7,0-5.6,0c-5.1,0.1-8.7,3.6-8.8,8.7
+		c-0.1,6.2-0.1,12.4,0,18.5c0,0.6-0.1,1-0.3,1.2c-0.2,0.2-0.5,0.2-1.1,0.2c-1.3,0-1.9,0.1-2,0.1c-0.1,0-0.7,0-2.1-0.1
+		c-0.5,0-0.8,0-1.1-0.3c-0.2-0.2-0.3-0.6-0.3-1.1C77.5,46.1,77.5,42.8,77.5,39.5L77.5,39.5z"
+        />
+        <path
+          id="Path_120"
+          className={"logoApplicationName"}
+          d="M18.8,7.6c-5.5,0-11.1,0-16.6,0c-1.2,0-1.6-0.4-1.5-1.6c0.1-1.3,0-2.6,0-4
+		c0-1.2,0.6-1.8,1.9-1.8h23.6c3.1,0,6.3,0,9.4,0c0.4-0.1,0.7,0.1,1,0.3c0.2,0.2,0.2,0.5,0.3,1c0,0.4,0,0.7,0,1.1c0,0.3,0,0.7,0,1
+		c0,1.2,0,1.5,0,2.4c0,0.9-0.1,1.1-0.3,1.3c-0.2,0.3-0.7,0.4-1.3,0.3C29.8,7.6,24.3,7.7,18.8,7.6L18.8,7.6z"
+        />
+        <path
+          id="Path_121"
+          className={"logoApplicationName"}
+          d="M123.9,43.1c-0.1,0-0.2,0-0.2,0.1c-2.1,0.9-4.4,1-6.9,0.5c-3.3-0.7-6.1-2.8-7.6-5.8
+		c-0.5-0.9-0.3-1.3,0.7-1.3c0.4,0,0.7,0,1.1,0c8.1,0,16.2,0,24.3,0c1.3,0,1.9-0.5,1.8-1.7c-0.1-2.3,0-4.8-0.6-7
+		c-2.7-9.5-12.5-15.1-22-12.4c-10.7,2.9-16.3,14.7-11.7,24.8c5.2,11.3,19.2,14.1,28.5,5.9c0.7-0.6,1.3-1.2,1.8-1.9
+		c0.2-0.3,0.2-0.7-0.1-0.9c-0.1-0.1-0.3-0.2-0.4-0.2H123.9L123.9,43.1z M119.4,21.6c4.7-0.1,9.8,3.7,10.4,7.4
+		c0.1,0.4-0.2,0.7-0.6,0.8c0,0-0.1,0-0.1,0h-19.7c-0.4,0-0.7-0.3-0.7-0.7c0,0,0-0.1,0-0.1C109.3,25.5,114.8,21.7,119.4,21.6
+		L119.4,21.6L119.4,21.6z"
+        />
+        <path
+          id="Path_122"
+          className={"logoApplicationName"}
+          d="M207.8,50.6h-6c-0.2,0-0.3-0.1-0.3-0.3l0,0v-3.2c-0.4,0.2-0.7,0.3-0.9,0.5
+		c-10.1,6.6-23.1,1.9-26.6-9.6c-2.8-9.3,3.3-19.8,12.9-21.8c10.3-2.2,19.9,4.5,21.3,15c0,0.1,0,0.2,0,0.3c0,6.3,0,12.5,0,18.9
+		C208.1,50.5,208,50.6,207.8,50.6L207.8,50.6z M180.1,33.1c-0.1,5.9,4.6,10.7,10.5,10.7c0,0,0,0,0,0c5.9,0.1,10.7-4.7,10.8-10.6
+		c0,0,0-0.1,0-0.1c0-5.9-4.8-10.7-10.6-10.7C184.9,22.4,180.1,27.2,180.1,33.1C180.1,33.1,180.1,33.1,180.1,33.1L180.1,33.1
+		L180.1,33.1z"
+        />
+        <g>
+          <rect
+            x="60.8"
+            y="0.3"
+            className={"logoSection"}
+            width="3.2"
+            height="8.4"
+          />
+          <g>
+            <g>
+              <path
+                className={"logoSection"}
+                d="M56.8,0.4L50.3,4C50.2,4,50,4,50,4l-6.6-3.5c-0.1-0.1-0.3-0.1-0.5-0.1h0c-0.5,0-0.9,0.4-0.9,0.8v7.6h3.2
+					V5.1c0-0.2,0.3-0.4,0.5-0.2l3.7,2c0.4,0.2,0.8,0.2,1.2,0l3.9-2c0.2-0.1,0.5,0,0.5,0.2v3.6h3.2V1.1c0-0.4-0.4-0.8-0.9-0.8h0
+					C57.1,0.3,57,0.3,56.8,0.4"
+              />
+              <path
+                className={"logoSection"}
+                d="M80.2,0.3h-3.3v3.8c0,0.2-0.3,0.4-0.5,0.2l-8.5-4c-0.1-0.1-0.3-0.1-0.4-0.1h0c-0.5,0-0.9,0.4-0.9,0.8v7.6
+					h3.3V4.9c0-0.2,0.3-0.4,0.5-0.2l8.6,4c0.1,0.1,0.3,0.1,0.4,0.1c0.5,0,0.9-0.4,0.9-0.8L80.2,0.3L80.2,0.3z"
+              />
+              <rect
+                x="82.7"
+                y="0.3"
+                className={"logoSection"}
+                width="1.5"
+                height="8.4"
+              />
+              <path
+                className={"logoSection"}
+                d="M93,8.9c-4,0-6.9-1.7-6.9-4.4S89,0.2,93,0.2c4,0,6.9,1.7,6.9,4.4S97.1,8.9,93,8.9 M93,1.3
+					c-3,0-5.3,1.1-5.3,3.2S90,7.7,93,7.7c3,0,5.3-1.1,5.3-3.2S96,1.3,93,1.3"
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+    </LogoBase>
+  );
+};
+
+export default Eureka;

src/components/ApplicationLogo/Logos/Eureka/EurekaNew.tsx

@@ -0,0 +1,106 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const EurekaNew: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 149.6 41.2" inverse={inverse} onClick={onClick}>
+      <g>
+        <path
+          className={"logoApplicationName"}
+          d="M45.9,30.5c0,7.1-4.5,10.7-11,10.7s-11-3.6-11-10.7V15.1H29v15.1c0,4.2,2.4,6,5.9,6
+		s5.9-1.8,5.9-6V15.1h5.1L45.9,30.5z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M93.4,36v4.7H74.7V15.1h18.6v4.7H79.7v5.7h13v4.7h-13V36H93.4z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M61.3,15.1c6.1,0,9.4,2.9,9.4,7.8c0,4.2-2.9,7.1-7.8,7.5l7.9,10.2h-6.2l-7.5-10.2h-1.5v10.2
+		h-5.1V15.1H61.3z M55.6,19.8v6.3h5.6c2.8,0,4.2-1,4.2-3.2c0-2.1-1.5-3.1-4.2-3.1H55.6z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M106.3,30.2h-2.4v10.5h-5.1V15.1h5.1v10.4h2.4l8.5-10.4h6.4l-10.7,12.5L122,40.7h-6.6
+		L106.3,30.2z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M149.6,40.7h-5.4l-2.2-6H131l-2.2,6h-5.3l10-25.6h6.2L149.6,40.7z M132.8,30.1h7.4l-3.7-9.9
+		L132.8,30.1z"
+        />
+      </g>
+      <g>
+        <path
+          className={"logoSection"}
+          d="M11.7,0.2L6.5,3.4c-0.1,0-0.2,0-0.2,0L1.1,0.2C1,0.2,0.8,0.1,0.7,0.1h0C0.3,0.1,0,0.5,0,0.8
+		c0,0,0,0,0,0v6.8h2.5V4.4c0-0.1,0.1-0.3,0.3-0.3c0,0,0.1,0,0.1,0L5.8,6c0.3,0.2,0.6,0.2,0.9,0l3.1-1.8c0.1-0.1,0.3,0,0.3,0.1
+		c0,0,0,0.1,0,0.1v3.3h2.5V0.8c0-0.4-0.3-0.7-0.7-0.7c0,0,0,0,0,0h0C11.9,0.1,11.8,0.2,11.7,0.2"
+        />
+        <rect
+          x="14.8"
+          y="0.1"
+          className={"logoSection"}
+          width="2.5"
+          height="7.5"
+        />
+        <path
+          className={"logoSection"}
+          d="M30,0.1h-2.6v3.4c0,0.1-0.1,0.3-0.3,0.3c0,0-0.1,0-0.1,0l-6.7-3.6c-0.1-0.1-0.2-0.1-0.3-0.1
+		l0,0c-0.4,0-0.7,0.3-0.7,0.7v6.8h2.6V4.2C21.9,4.1,22,4,22.1,4c0,0,0.1,0,0.1,0L29,7.6c0.3,0.2,0.8,0.1,1-0.3C30,7.2,30,7.1,30,6.9
+		L30,0.1z"
+        />
+        <rect
+          x="32"
+          y="0.1"
+          className={"logoSection"}
+          width="1.2"
+          height="7.5"
+        />
+        <path
+          className={"logoSection"}
+          d="M40.1,7.8c-3.2,0-5.4-1.5-5.4-3.9S37,0,40.1,0s5.4,1.5,5.4,3.9S43.3,7.8,40.1,7.8 M40.1,1
+		C37.8,1,36,2,36,3.9s1.8,2.9,4.2,2.9s4.2-1,4.2-2.9S42.5,1,40.1,1L40.1,1z"
+        />
+
+        <rect
+          className={"logoApplicationName"}
+          y="15"
+          width="19.1"
+          height="5"
+        />
+        <rect
+          className={"logoApplicationName"}
+          y="25.5"
+          width="12.8"
+          height="5"
+        />
+        <rect
+          className={"logoApplicationName"}
+          y="36.1"
+          width="19.1"
+          height="5"
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default EurekaNew;

src/components/ApplicationLogo/Logos/IndexLogo/IndexLogo.tsx

@@ -0,0 +1,80 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const IndexLogo: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 184.538 51" inverse={inverse} onClick={onClick}>
+      <g>
+        <path
+          className={"logoApplicationName"}
+          d="M4.7,24.3V51H1.5V24.3C1.5,24.3,4.7,24.3,4.7,24.3z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M32.3,24.3V51h-3.1L14.7,30h-0.3v21h-3.2V24.3h3.1l14.6,21h0.3v-21C29.2,24.3,32.3,24.3,32.3,24.3z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M47,51h-8.2V24.3h8.6c2.6,0,4.8,0.5,6.6,1.6c1.8,1.1,3.3,2.6,4.2,4.6c1,2,1.5,4.4,1.5,7.1
+		c0,2.8-0.5,5.2-1.5,7.2c-1,2-2.4,3.5-4.3,4.6C52.1,50.5,49.7,51,47,51z M42,48.1h4.8c2.2,0,4-0.4,5.5-1.3c1.5-0.9,2.5-2.1,3.2-3.6
+		c0.7-1.6,1.1-3.4,1.1-5.6c0-2.2-0.4-4-1.1-5.6c-0.7-1.6-1.8-2.8-3.2-3.6c-1.4-0.8-3.1-1.3-5.2-1.3H42V48.1L42,48.1z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M65.2,51V24.3h16.1v2.9H68.4v9h12v2.9h-12v9.1h13.1V51H65.2z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M88.7,24.3l6.9,11.1h0.2l6.9-11.1h3.8l-8.4,13.4l8.4,13.4h-3.8l-6.9-10.9h-0.2L88.7,51h-3.8l8.6-13.4
+		l-8.6-13.4C84.9,24.3,88.7,24.3,88.7,24.3z"
+        />
+        <rect
+          x="22.4"
+          y="0.3"
+          className={"logoSection"}
+          width="3.9"
+          height="11.3"
+        />
+        <path
+          className={"logoSection"}
+          d="M17.7,0.4L9.9,5.2c-0.1,0.1-0.3,0.1-0.4,0L1.6,0.4C1.5,0.3,1.3,0.2,1.1,0.2h0C0.5,0.2,0,0.7,0,1.3v10.3h3.9
+		V6.7c0-0.3,0.3-0.5,0.6-0.3l4.4,2.7c0.4,0.3,1,0.3,1.4,0l4.6-2.7c0.3-0.2,0.6,0,0.6,0.3v4.9h3.9V1.3c0-0.6-0.5-1.1-1.1-1.1h0
+		C18.1,0.2,17.9,0.3,17.7,0.4L17.7,0.4z"
+        />
+        <path
+          className={"logoSection"}
+          d="M45.6,0.2h-3.9v5.2c0,0.3-0.3,0.5-0.6,0.3L30.9,0.4c-0.2-0.1-0.3-0.1-0.5-0.1h0c-0.6,0-1.1,0.5-1.1,1.1v10.3
+		h3.9V6.5c0-0.3,0.3-0.5,0.6-0.3L44,11.5c0.2,0.1,0.3,0.1,0.5,0.1l0,0c0.6,0,1.1-0.5,1.1-1.1L45.6,0.2L45.6,0.2L45.6,0.2z"
+        />
+        <path
+          className={"logoSection"}
+          d="M48.7,11.6V0.2h1.8v11.3L48.7,11.6L48.7,11.6z"
+        />
+        <path
+          className={"logoSection"}
+          d="M60.9,11.8c-4.8,0-8.2-2.3-8.2-5.9c0-3.6,3.4-5.9,8.2-5.9c4.8,0,8.2,2.3,8.2,5.9S65.8,11.8,60.9,11.8z
+		 M60.9,1.5c-3.6,0-6.3,1.6-6.3,4.4c0,2.9,2.7,4.4,6.3,4.4c3.6,0,6.3-1.5,6.3-4.4C67.2,3.1,64.5,1.5,60.9,1.5L60.9,1.5z"
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default IndexLogo;

src/components/ApplicationLogo/Logos/KES/KES.tsx

@@ -0,0 +1,69 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const KES: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 184.538 51" inverse={inverse} onClick={onClick}>
+      <g transform="translate(26.059 -11)">
+        <g transform="translate(-29 11)">
+          <g transform="translate(0 0)">
+            <path
+              d="M19.7,0h6.7L14.726-13.265,25.586-25.9H19.111l-8.566,10.49H8.1V-25.9H2.942V0H8.1V-10.656H10.49ZM47.712-4.736H33.522v-5.957H46.916v-4.736H33.522v-5.735H47.564V-25.9h-19.2V0H47.712ZM72.039-23.588a18.223,18.223,0,0,0-9.9-2.757c-5.513,0-10.323,2.812-10.323,8.214,0,4.681,3.33,6.7,7.9,7.419l1.646.259c3.607.574,5.495,1.24,5.495,3.034,0,2-2.22,3.127-5.088,3.127a13.674,13.674,0,0,1-8.251-2.794L50.838-2.923C53.613-.685,57.831.463,61.753.463c5.568,0,10.6-2.72,10.6-8.436,0-4.514-3.626-6.494-8.251-7.252l-1.462-.241c-3.108-.518-5.347-1.092-5.347-3,0-1.961,2.054-3.108,4.958-3.108a13.919,13.919,0,0,1,7.345,2.2Z"
+              transform="translate(0 49.495)"
+              className={"logoApplicationName"}
+            />
+            <g transform="translate(3.025 0)">
+              <g transform="translate(0 0.194)">
+                <rect
+                  width="3.76"
+                  height="11.103"
+                  transform="translate(21.776)"
+                  className={"logoSection"}
+                />
+                <path
+                  d="M243.621,365.383l-7.631,4.661a.34.34,0,0,1-.355,0l-7.631-4.661a1.048,1.048,0,0,0-.546-.153h-.009a1.047,1.047,0,0,0-1.047,1.046V376.32h3.758v-4.78a.376.376,0,0,1,.572-.321l4.276,2.616a1.338,1.338,0,0,0,1.377.014L240.9,371.2a.376.376,0,0,1,.565.325v4.794h3.757V366.276a1.046,1.046,0,0,0-1.045-1.046h-.01A1.047,1.047,0,0,0,243.621,365.383Z"
+                  transform="translate(-226.403 -365.23)"
+                  className={"logoSection"}
+                />
+                <path
+                  d="M263.158,365.23h-3.813v5.053a.376.376,0,0,1-.553.332l-9.881-5.263a1.051,1.051,0,0,0-.492-.122h-.007a1.047,1.047,0,0,0-1.047,1.046v10.045h3.783v-5.048a.376.376,0,0,1,.552-.332l9.921,5.262a1.046,1.046,0,0,0,.491.122h0a1.047,1.047,0,0,0,1.047-1.047Z"
+                  transform="translate(-218.873 -365.23)"
+                  className={"logoSection"}
+                />
+              </g>
+              <path
+                d="M261.159,376.333v-11.1h1.73v11.1Z"
+                transform="translate(-213.918 -365.036)"
+                className={"logoSection"}
+              />
+              <path
+                d="M272.024,376.582c-4.654,0-7.955-2.207-7.955-5.747,0-3.52,3.322-5.748,7.955-5.748S280,367.294,280,370.835,276.738,376.582,272.024,376.582Zm0-10.023c-3.461,0-6.126,1.511-6.126,4.276,0,2.784,2.665,4.276,6.126,4.276s6.146-1.492,6.146-4.276C278.171,368.07,275.485,366.559,272.024,366.559Z"
+                transform="translate(-212.873 -365.087)"
+                className={"logoSection"}
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+    </LogoBase>
+  );
+};
+
+export default KES;

src/components/ApplicationLogo/Logos/KMS/KMS.tsx

@@ -0,0 +1,77 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const KMS: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 184.538 51" inverse={inverse} onClick={onClick}>
+      <g>
+        <path
+          className={"logoApplicationName"}
+          d="M1.4,50.3V24.1h3.2v13h0.3l11.8-13h4.1l-11,11.8l11,14.4H17L7.9,38.1l-3.3,3.7v8.5H1.4z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M24.9,24.1h3.8l8.9,21.7h0.3l8.9-21.7h3.8v26.2h-3V30.4h-0.3l-8.2,19.9h-2.9l-8.2-19.9h-0.3v19.9h-3
+		C24.9,50.3,24.9,24.1,24.9,24.1z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M71.3,30.6c-0.2-1.3-0.8-2.3-1.9-3c-1.1-0.7-2.4-1.1-4-1.1c-1.2,0-2.2,0.2-3,0.6s-1.5,0.9-2,1.5
+		c-0.5,0.7-0.7,1.4-0.7,2.2c0,0.7,0.2,1.3,0.5,1.8c0.3,0.5,0.8,0.9,1.3,1.2c0.5,0.3,1.1,0.6,1.7,0.8c0.6,0.2,1.1,0.4,1.6,0.5
+		l2.7,0.7c0.7,0.2,1.4,0.4,2.3,0.7c0.8,0.3,1.6,0.7,2.4,1.3c0.8,0.5,1.4,1.2,1.9,2.1c0.5,0.8,0.8,1.9,0.8,3.1c0,1.4-0.4,2.7-1.1,3.8
+		c-0.7,1.1-1.8,2.1-3.2,2.7c-1.4,0.7-3.1,1-5.1,1c-1.9,0-3.5-0.3-4.9-0.9c-1.4-0.6-2.4-1.4-3.2-2.5c-0.8-1.1-1.2-2.3-1.3-3.8h3.3
+		c0.1,1,0.4,1.8,1,2.4c0.6,0.6,1.3,1.1,2.2,1.4c0.9,0.3,1.9,0.5,2.9,0.5c1.2,0,2.3-0.2,3.3-0.6c1-0.4,1.7-1,2.3-1.7
+		c0.6-0.7,0.8-1.5,0.8-2.5c0-0.9-0.2-1.6-0.7-2.1c-0.5-0.5-1.1-1-1.9-1.3c-0.8-0.3-1.7-0.6-2.6-0.9l-3.2-0.9c-2-0.6-3.7-1.4-4.9-2.5
+		c-1.2-1.1-1.8-2.5-1.8-4.3c0-1.5,0.4-2.7,1.2-3.8c0.8-1.1,1.9-1.9,3.2-2.6c1.4-0.6,2.9-0.9,4.5-0.9c1.7,0,3.2,0.3,4.5,0.9
+		c1.3,0.6,2.4,1.4,3.1,2.5c0.8,1,1.2,2.2,1.2,3.5L71.3,30.6L71.3,30.6z"
+        />
+        <rect
+          x="22"
+          y="0.5"
+          className={"logoSection"}
+          width="3.8"
+          height="11.1"
+        />
+        <path
+          className={"logoSection"}
+          d="M17.4,0.6L9.7,5.3c-0.1,0.1-0.2,0.1-0.4,0L1.6,0.6C1.5,0.5,1.3,0.4,1.1,0.4h0C0.5,0.4,0,0.9,0,1.5v10.1h3.8
+		V6.8c0-0.3,0.3-0.5,0.6-0.3l4.3,2.6c0.4,0.3,1,0.3,1.4,0l4.6-2.7c0.3-0.1,0.6,0,0.6,0.3v4.8H19V1.5c0-0.6-0.5-1.1-1.1-1.1h0
+		C17.8,0.4,17.6,0.5,17.4,0.6L17.4,0.6z"
+        />
+        <path
+          className={"logoSection"}
+          d="M44.7,0.5h-3.9v5.1c0,0.3-0.3,0.5-0.6,0.3l-10-5.3c-0.2-0.1-0.3-0.1-0.5-0.1h0c-0.6,0-1.1,0.5-1.1,1.1v10.1
+		h3.8v-5c0-0.3,0.3-0.5,0.6-0.3l10,5.3c0.2,0.1,0.3,0.1,0.5,0.1l0,0c0.6,0,1.1-0.5,1.1-1.1L44.7,0.5L44.7,0.5L44.7,0.5z"
+        />
+        <path
+          className={"logoSection"}
+          d="M47.8,11.6V0.5h1.8v11.1L47.8,11.6L47.8,11.6z"
+        />
+        <path
+          className={"logoSection"}
+          d="M59.8,11.9c-4.7,0-8-2.2-8-5.8c0-3.6,3.4-5.8,8-5.8c4.7,0,8.1,2.2,8.1,5.8S64.5,11.9,59.8,11.9z M59.8,1.7
+		c-3.5,0-6.2,1.5-6.2,4.3c0,2.8,2.7,4.3,6.2,4.3c3.5,0,6.2-1.5,6.2-4.3C66,3.3,63.3,1.7,59.8,1.7L59.8,1.7z"
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default KMS;

src/components/ApplicationLogo/Logos/LoadBalancer/LoadBalancer.tsx

@@ -0,0 +1,129 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const LoadBalancer: FC<SVGProps<any> & LogoBaseProps> = ({
+  inverse,
+  onClick,
+}) => {
+  return (
+    <LogoBase viewBox="0 0 288.6 51" inverse={inverse} onClick={onClick}>
+      <g>
+        <path
+          className={"logoApplicationName"}
+          d="M1,50.5V24.1h4.8v22.4h11.6v4H1z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M44.1,37.3c0,2.8-0.5,5.3-1.6,7.3s-2.5,3.6-4.3,4.6c-1.8,1.1-3.9,1.6-6.2,1.6c-2.3,0-4.4-0.5-6.2-1.6
+		c-1.8-1.1-3.3-2.6-4.3-4.7c-1.1-2-1.6-4.5-1.6-7.3c0-2.8,0.5-5.3,1.6-7.3c1.1-2,2.5-3.6,4.3-4.6c1.8-1.1,3.9-1.6,6.2-1.6
+		c2.3,0,4.4,0.5,6.2,1.6c1.8,1.1,3.3,2.6,4.3,4.6C43.6,32.1,44.1,34.5,44.1,37.3z M39.3,37.3c0-2-0.3-3.7-0.9-5.1
+		c-0.6-1.4-1.5-2.4-2.6-3.1c-1.1-0.7-2.4-1.1-3.8-1.1c-1.4,0-2.7,0.4-3.8,1.1c-1.1,0.7-2,1.8-2.6,3.1c-0.6,1.4-0.9,3.1-0.9,5.1
+		c0,2,0.3,3.7,0.9,5.1c0.6,1.4,1.5,2.4,2.6,3.1c1.1,0.7,2.4,1.1,3.8,1.1c1.4,0,2.7-0.4,3.8-1.1c1.1-0.7,2-1.8,2.6-3.1
+		C39,41,39.3,39.3,39.3,37.3z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M50.6,50.5h-5.1l9.3-26.4h5.9L70,50.5h-5.1l-7.1-21h-0.2L50.6,50.5z M50.8,40.2h13.9V44H50.8V40.2z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M82.4,50.5h-8.9V24.1h9.1c2.6,0,4.9,0.5,6.8,1.6c1.9,1.1,3.3,2.6,4.4,4.5c1,2,1.5,4.3,1.5,7.1
+		c0,2.8-0.5,5.1-1.5,7.1s-2.5,3.5-4.4,4.6C87.4,50,85.1,50.5,82.4,50.5L82.4,50.5z M78.3,46.4h3.9c1.8,0,3.4-0.3,4.6-1
+		c1.2-0.7,2.2-1.7,2.8-3c0.6-1.3,0.9-3,0.9-5c0-2-0.3-3.7-0.9-5c-0.6-1.3-1.5-2.3-2.7-3c-1.2-0.7-2.7-1-4.5-1h-4.1L78.3,46.4
+		L78.3,46.4z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M100.7,50.5V24.1h8.9c1.7,0,3.2,0.3,4.3,0.9c1.1,0.6,2,1.4,2.6,2.5c0.6,1,0.9,2.2,0.9,3.5c0,1.1-0.2,2-0.6,2.8
+		c-0.4,0.8-0.9,1.4-1.5,1.9c-0.6,0.5-1.3,0.8-2.1,1V37c0.9,0.1,1.7,0.4,2.5,0.9c0.8,0.5,1.5,1.3,2,2.2s0.8,2.1,0.8,3.5
+		c0,1.3-0.3,2.5-0.9,3.6c-0.6,1-1.5,1.9-2.7,2.5c-1.2,0.6-2.8,0.9-4.7,0.9H100.7z M103.1,36.1h6.7c1,0,2-0.2,2.7-0.6
+		c0.8-0.4,1.4-1,1.8-1.8c0.4-0.8,0.7-1.6,0.7-2.6c0-1.4-0.5-2.5-1.4-3.4c-0.9-0.9-2.3-1.3-4.1-1.3h-6.5V36.1z M103.1,48.4h7
+		c2,0,3.5-0.5,4.5-1.4c1-0.9,1.5-2,1.5-3.4c0-1-0.2-1.9-0.7-2.7c-0.5-0.8-1.2-1.5-2-2c-0.9-0.5-1.9-0.7-3.1-0.7h-7.1V48.4z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M124.2,50.5h-2.5l9.6-26.4h2.6l9.6,26.4H141l-8.3-23.3h-0.2L124.2,50.5z M126,40.4h13.1v2.2H126V40.4z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M148,50.5V24.1h2.4v24.2H163v2.2H148z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M170.1,50.5h-2.5l9.6-26.4h2.6l9.6,26.4h-2.5l-8.3-23.3h-0.2L170.1,50.5L170.1,50.5z M171.9,40.4H185v2.2
+		h-13.1L171.9,40.4L171.9,40.4z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M214.5,24.1v26.4h-2.3l-15.6-22.1h-0.2v22.1h-2.4V24.1h2.3l15.6,22.1h0.2V24.1
+		C212.1,24.1,214.5,24.1,214.5,24.1z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M242.1,32.4h-2.4c-0.2-0.9-0.5-1.7-1-2.5c-0.5-0.8-1.1-1.4-1.8-2c-0.7-0.6-1.5-1-2.4-1.3
+		c-0.9-0.3-1.9-0.5-2.9-0.5c-1.7,0-3.2,0.4-4.6,1.3c-1.4,0.9-2.5,2.1-3.3,3.8c-0.8,1.7-1.2,3.7-1.2,6.2c0,2.4,0.4,4.5,1.2,6.2
+		c0.8,1.7,1.9,2.9,3.3,3.8c1.4,0.9,2.9,1.3,4.6,1.3c1,0,2-0.2,2.9-0.5c0.9-0.3,1.7-0.8,2.4-1.3c0.7-0.6,1.3-1.2,1.8-2
+		c0.5-0.8,0.8-1.6,1-2.5h2.4c-0.2,1.2-0.6,2.3-1.2,3.4c-0.6,1-1.3,2-2.2,2.7c-0.9,0.8-1.9,1.4-3.1,1.8c-1.2,0.4-2.5,0.7-3.9,0.7
+		c-2.2,0-4.2-0.6-5.9-1.7c-1.7-1.1-3.1-2.7-4-4.7c-1-2-1.5-4.4-1.5-7.2s0.5-5.2,1.5-7.2c1-2,2.3-3.6,4-4.7c1.7-1.1,3.7-1.7,5.9-1.7
+		c1.4,0,2.7,0.2,3.9,0.7c1.2,0.4,2.2,1,3.1,1.8c0.9,0.8,1.7,1.7,2.2,2.7C241.5,30,241.9,31.2,242.1,32.4z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M247.8,50.5V24.1h15.3v2.2h-12.9v9.9h12.1v2.2h-12.1v10h13.2v2.2H247.8z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M269.4,50.5V24.1h8.5c1.9,0,3.4,0.3,4.7,1c1.3,0.7,2.2,1.6,2.8,2.8c0.6,1.2,1,2.6,1,4.1c0,1.5-0.3,2.9-1,4.1
+		c-0.6,1.2-1.6,2.1-2.8,2.8s-2.8,1-4.7,1h-7.3v-2.2h7.2c1.4,0,2.5-0.2,3.4-0.7c0.9-0.5,1.6-1.1,2-1.9c0.5-0.8,0.7-1.8,0.7-3
+		c0-1.2-0.2-2.2-0.7-3c-0.5-0.9-1.1-1.5-2.1-2c-0.9-0.5-2.1-0.7-3.5-0.7h-6v24.2H269.4z M281,38.6l6.5,11.9h-2.8l-6.4-11.9H281z"
+        />
+        <rect
+          x="22.3"
+          y="0.4"
+          className={"logoSection"}
+          width="3.8"
+          height="11.2"
+        />
+        <path
+          className={"logoSection"}
+          d="M17.7,0.5L9.9,5.2c-0.1,0.1-0.2,0.1-0.4,0L1.8,0.5C1.6,0.4,1.4,0.3,1.2,0.3h0c-0.6,0-1.1,0.5-1.1,1.1v10.2H4
+		V6.7c0-0.3,0.3-0.5,0.6-0.3l4.4,2.7c0.4,0.3,1,0.3,1.4,0l4.6-2.7c0.3-0.1,0.6,0,0.6,0.3v4.9h3.8V1.4c0-0.6-0.5-1.1-1.1-1.1h0
+		C18,0.3,17.8,0.4,17.7,0.5L17.7,0.5z"
+        />
+        <path
+          className={"logoSection"}
+          d="M45.2,0.4h-3.9v5.1c0,0.3-0.3,0.5-0.6,0.3L30.7,0.5c-0.2-0.1-0.3-0.1-0.5-0.1h0c-0.6,0-1.1,0.5-1.1,1.1v10.1
+		H33V6.5c0-0.3,0.3-0.5,0.6-0.3l10.1,5.4c0.2,0.1,0.3,0.1,0.5,0.1l0,0c0.6,0,1.1-0.5,1.1-1.1L45.2,0.4L45.2,0.4L45.2,0.4z"
+        />
+        <path
+          className={"logoSection"}
+          d="M48.3,11.6V0.4h1.8v11.2L48.3,11.6L48.3,11.6z"
+        />
+        <path
+          className={"logoSection"}
+          d="M60.3,11.8c-4.7,0-8.1-2.2-8.1-5.9c0-3.6,3.4-5.9,8.1-5.9c4.7,0,8.1,2.2,8.1,5.9S65.1,11.8,60.3,11.8z
+		 M60.3,1.6c-3.5,0-6.2,1.5-6.2,4.4c0,2.8,2.7,4.4,6.2,4.4c3.5,0,6.3-1.5,6.3-4.4C66.6,3.1,63.9,1.6,60.3,1.6L60.3,1.6z"
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default LoadBalancer;

src/components/ApplicationLogo/Logos/LogoBase/LogoBase.tsx

@@ -0,0 +1,44 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { SVGProps } from "react";
+import styled from "styled-components";
+import get from "lodash/get";
+import { LogoBaseProps } from "./LogoBase.types";
+
+const LogoBase = styled.svg<SVGProps<any> & LogoBaseProps>((props) => {
+  let mainColor = get(props, "theme.logoLabelColor", "#000");
+  let contrast = get(props, "theme.logoContrast", "#fff");
+
+  if (props.inverse) {
+    mainColor = get(props, "theme.logoLabelInverse", "#fff");
+    contrast = get(props, "theme.logoContrastInverse", "#000");
+  }
+
+  return {
+    "& .logoSection": {
+      fill: get(props, `theme.logoColor`, "#C51C3F"),
+    },
+    "& .logoApplicationName": {
+      fill: mainColor,
+    },
+    "& .contrast": {
+      fill: contrast,
+    },
+  };
+});
+
+export default LogoBase;

src/components/ApplicationLogo/Logos/LogoBase/LogoBase.types.ts

@@ -0,0 +1,19 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+export interface LogoBaseProps {
+  inverse?: boolean;
+}

src/components/ApplicationLogo/Logos/MissionControl/MissionControl.tsx

@@ -0,0 +1,154 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const MissionControl: FC<SVGProps<any> & LogoBaseProps> = ({
+  inverse,
+  onClick,
+}) => {
+  return (
+    <LogoBase viewBox="0 0 327.6 51" inverse={inverse} onClick={onClick}>
+      <g>
+        <path
+          className={"logoApplicationName"}
+          d="M0.8,24.1h5.8L14.4,43h0.3l7.7-18.9h5.8v26.1h-4.5V32.3h-0.2l-7.2,17.9h-3.4L5.6,32.3H5.4v18H0.8
+		C0.8,50.2,0.8,24.1,0.8,24.1z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M38.1,24.1v26.1h-4.7V24.1C33.4,24.1,38.1,24.1,38.1,24.1z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M57.4,31.3c-0.1-1.1-0.6-2-1.5-2.6c-0.9-0.6-2-0.9-3.4-0.9c-1,0-1.8,0.1-2.5,0.4c-0.7,0.3-1.2,0.7-1.6,1.2
+		s-0.6,1.1-0.6,1.7c0,0.5,0.1,1,0.4,1.4c0.3,0.4,0.6,0.7,1,1s0.9,0.5,1.4,0.7c0.5,0.2,1.1,0.3,1.6,0.5l2.4,0.6
+		c1,0.2,1.9,0.5,2.8,0.9c0.9,0.4,1.7,0.9,2.5,1.5c0.7,0.6,1.3,1.3,1.7,2.2c0.4,0.8,0.6,1.8,0.6,3c0,1.5-0.4,2.9-1.2,4
+		c-0.8,1.2-1.9,2.1-3.4,2.7c-1.5,0.7-3.3,1-5.3,1c-2,0-3.8-0.3-5.3-0.9c-1.5-0.6-2.7-1.5-3.5-2.8c-0.8-1.2-1.3-2.7-1.4-4.4h4.7
+		c0.1,0.9,0.3,1.7,0.8,2.3c0.5,0.6,1.1,1.1,1.9,1.4c0.8,0.3,1.7,0.4,2.7,0.4c1,0,1.9-0.2,2.7-0.5c0.8-0.3,1.4-0.7,1.8-1.3
+		c0.4-0.6,0.7-1.2,0.7-2c0-0.7-0.2-1.2-0.6-1.7c-0.4-0.4-0.9-0.8-1.6-1.1c-0.7-0.3-1.5-0.6-2.5-0.8l-3-0.8c-2.1-0.6-3.8-1.4-5.1-2.5
+		c-1.2-1.1-1.9-2.6-1.9-4.5c0-1.5,0.4-2.9,1.3-4c0.8-1.2,2-2.1,3.4-2.7c1.4-0.6,3.1-1,4.9-1c1.9,0,3.5,0.3,4.9,1
+		c1.4,0.6,2.5,1.5,3.3,2.7c0.8,1.1,1.2,2.4,1.2,3.9H57.4z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M80.7,31.3c-0.1-1.1-0.6-2-1.5-2.6c-0.9-0.6-2-0.9-3.4-0.9c-1,0-1.8,0.1-2.5,0.4c-0.7,0.3-1.2,0.7-1.6,1.2
+		c-0.4,0.5-0.6,1.1-0.6,1.7c0,0.5,0.1,1,0.4,1.4c0.3,0.4,0.6,0.7,1,1c0.4,0.3,0.9,0.5,1.4,0.7c0.5,0.2,1.1,0.3,1.6,0.5l2.4,0.6
+		c1,0.2,1.9,0.5,2.8,0.9c0.9,0.4,1.7,0.9,2.5,1.5c0.7,0.6,1.3,1.3,1.7,2.2c0.4,0.8,0.6,1.8,0.6,3c0,1.5-0.4,2.9-1.2,4
+		c-0.8,1.2-1.9,2.1-3.4,2.7c-1.5,0.7-3.3,1-5.3,1c-2,0-3.8-0.3-5.3-0.9c-1.5-0.6-2.7-1.5-3.5-2.8c-0.8-1.2-1.3-2.7-1.4-4.4h4.7
+		c0.1,0.9,0.3,1.7,0.8,2.3c0.5,0.6,1.1,1.1,1.9,1.4c0.8,0.3,1.7,0.4,2.7,0.4c1,0,1.9-0.2,2.7-0.5c0.8-0.3,1.4-0.7,1.8-1.3
+		c0.4-0.6,0.7-1.2,0.7-2c0-0.7-0.2-1.2-0.6-1.7c-0.4-0.4-0.9-0.8-1.6-1.1s-1.5-0.6-2.5-0.8l-3-0.8c-2.1-0.6-3.8-1.4-5.1-2.5
+		c-1.2-1.1-1.9-2.6-1.9-4.5c0-1.5,0.4-2.9,1.3-4c0.8-1.2,2-2.1,3.4-2.7c1.4-0.6,3.1-1,4.9-1c1.9,0,3.5,0.3,4.9,1
+		c1.4,0.6,2.5,1.5,3.3,2.7c0.8,1.1,1.2,2.4,1.2,3.9H80.7z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M94.5,24.1v26.1h-4.7V24.1C89.8,24.1,94.5,24.1,94.5,24.1z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M123,37.2c0,2.8-0.5,5.2-1.6,7.2c-1,2-2.5,3.5-4.3,4.6c-1.8,1.1-3.9,1.6-6.1,1.6c-2.3,0-4.3-0.5-6.1-1.6
+		c-1.8-1.1-3.2-2.6-4.3-4.6c-1-2-1.6-4.4-1.6-7.2c0-2.8,0.5-5.2,1.6-7.2c1-2,2.5-3.5,4.3-4.6c1.8-1.1,3.9-1.6,6.1-1.6
+		c2.3,0,4.3,0.5,6.1,1.6c1.8,1.1,3.2,2.6,4.3,4.6C122.5,32,123,34.4,123,37.2z M118.2,37.2c0-2-0.3-3.7-0.9-5
+		c-0.6-1.4-1.5-2.4-2.6-3.1c-1.1-0.7-2.3-1.1-3.8-1.1c-1.4,0-2.7,0.4-3.8,1.1c-1.1,0.7-1.9,1.7-2.6,3.1c-0.6,1.4-0.9,3-0.9,5
+		c0,2,0.3,3.7,0.9,5c0.6,1.4,1.5,2.4,2.6,3.1c1.1,0.7,2.3,1.1,3.8,1.1c1.4,0,2.7-0.4,3.8-1.1c1.1-0.7,1.9-1.7,2.6-3.1
+		C117.9,40.8,118.2,39.2,118.2,37.2z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M148.9,24.1v26.1h-4.2l-12.3-17.8h-0.2v17.8h-4.7V24.1h4.2L144,41.9h0.2V24.1
+		C144.2,24.1,148.9,24.1,148.9,24.1z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M175.4,32.3H173c-0.2-0.9-0.5-1.7-1-2.5c-0.5-0.8-1-1.4-1.7-2c-0.7-0.6-1.5-1-2.4-1.3
+		c-0.9-0.3-1.8-0.5-2.9-0.5c-1.6,0-3.2,0.4-4.5,1.3c-1.4,0.9-2.4,2.1-3.2,3.8c-0.8,1.7-1.2,3.7-1.2,6.1c0,2.4,0.4,4.5,1.2,6.1
+		c0.8,1.7,1.9,2.9,3.2,3.8c1.4,0.9,2.9,1.3,4.5,1.3c1,0,2-0.2,2.9-0.5c0.9-0.3,1.7-0.8,2.4-1.3c0.7-0.6,1.3-1.2,1.7-2
+		c0.5-0.8,0.8-1.6,1-2.5h2.4c-0.2,1.2-0.6,2.3-1.2,3.3c-0.6,1-1.3,1.9-2.2,2.7c-0.9,0.8-1.9,1.4-3.1,1.8c-1.2,0.4-2.4,0.6-3.8,0.6
+		c-2.2,0-4.1-0.5-5.8-1.7c-1.7-1.1-3-2.7-4-4.7c-1-2-1.4-4.4-1.4-7.1s0.5-5.1,1.4-7.1c1-2,2.3-3.6,4-4.7c1.7-1.1,3.6-1.7,5.8-1.7
+		c1.4,0,2.7,0.2,3.8,0.6c1.2,0.4,2.2,1,3.1,1.8c0.9,0.8,1.6,1.7,2.2,2.7C174.8,30,175.2,31.1,175.4,32.3z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M202.4,37.2c0,2.7-0.5,5.1-1.5,7.1c-1,2-2.3,3.6-4,4.7c-1.7,1.1-3.6,1.7-5.8,1.7c-2.2,0-4.1-0.5-5.8-1.7
+		c-1.7-1.1-3-2.7-4-4.7c-1-2-1.4-4.4-1.4-7.1c0-2.7,0.5-5.1,1.4-7.1c1-2,2.3-3.6,4-4.7c1.7-1.1,3.6-1.7,5.8-1.7
+		c2.2,0,4.1,0.6,5.8,1.7c1.7,1.1,3,2.7,4,4.7C201.9,32.1,202.4,34.5,202.4,37.2z M200.1,37.2c0-2.3-0.4-4.3-1.2-6
+		c-0.8-1.7-1.8-2.9-3.2-3.8c-1.4-0.9-2.9-1.3-4.6-1.3c-1.7,0-3.2,0.4-4.6,1.3c-1.4,0.9-2.4,2.2-3.2,3.8c-0.8,1.7-1.2,3.7-1.2,6
+		c0,2.3,0.4,4.3,1.2,6c0.8,1.7,1.8,2.9,3.2,3.8c1.4,0.9,2.9,1.3,4.6,1.3c1.7,0,3.3-0.4,4.6-1.3c1.4-0.9,2.4-2.2,3.2-3.8
+		C199.7,41.5,200.1,39.5,200.1,37.2z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M228.5,24.1v26.1h-2.3l-15.4-21.9h-0.2v21.9h-2.4V24.1h2.3L225.9,46h0.2V24.1
+		C226.1,24.1,228.5,24.1,228.5,24.1z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M233.8,26.3v-2.1h18.9v2.1h-8.3v24h-2.4v-24C242.1,26.3,233.8,26.3,233.8,26.3z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M258.1,50.2V24.1h8.4c1.9,0,3.4,0.3,4.6,1s2.2,1.6,2.8,2.8c0.6,1.2,0.9,2.5,0.9,4c0,1.5-0.3,2.9-0.9,4
+		c-0.6,1.2-1.6,2.1-2.8,2.7c-1.2,0.7-2.8,1-4.6,1h-7.2v-2.2h7.1c1.4,0,2.5-0.2,3.4-0.7c0.9-0.5,1.6-1.1,2-1.9c0.4-0.8,0.7-1.8,0.7-3
+		c0-1.1-0.2-2.1-0.7-3s-1.1-1.5-2-2c-0.9-0.5-2-0.7-3.4-0.7h-6v24H258.1z M269.6,38.5l6.4,11.8h-2.8l-6.4-11.8H269.6z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M302.2,37.2c0,2.7-0.5,5.1-1.5,7.1c-1,2-2.3,3.6-4,4.7c-1.7,1.1-3.6,1.7-5.8,1.7c-2.2,0-4.1-0.5-5.8-1.7
+		c-1.7-1.1-3-2.7-4-4.7c-1-2-1.4-4.4-1.4-7.1c0-2.7,0.5-5.1,1.4-7.1c1-2,2.3-3.6,4-4.7c1.7-1.1,3.6-1.7,5.8-1.7
+		c2.2,0,4.1,0.6,5.8,1.7c1.7,1.1,3,2.7,4,4.7C301.7,32.1,302.2,34.5,302.2,37.2z M299.8,37.2c0-2.3-0.4-4.3-1.2-6s-1.8-2.9-3.2-3.8
+		c-1.4-0.9-2.9-1.3-4.6-1.3c-1.7,0-3.2,0.4-4.6,1.3c-1.4,0.9-2.4,2.2-3.2,3.8c-0.8,1.7-1.2,3.7-1.2,6c0,2.3,0.4,4.3,1.2,6
+		c0.8,1.7,1.8,2.9,3.2,3.8c1.4,0.9,2.9,1.3,4.6,1.3c1.7,0,3.3-0.4,4.6-1.3c1.4-0.9,2.4-2.2,3.2-3.8S299.8,39.5,299.8,37.2z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M307.9,50.2V24.1h2.4v24h12.4v2.1H307.9z"
+        />
+        <rect
+          x="21.9"
+          y="0.6"
+          className={"logoSection"}
+          width="3.8"
+          height="11.1"
+        />
+        <path
+          className={"logoSection"}
+          d="M17.3,0.7L9.6,5.4c-0.1,0.1-0.2,0.1-0.4,0L1.6,0.7C1.4,0.6,1.3,0.6,1.1,0.6h0C0.5,0.6,0,1,0,1.6v10.1h3.8V6.9
+		c0-0.3,0.3-0.5,0.6-0.3l4.3,2.6c0.4,0.3,1,0.3,1.4,0l4.5-2.7c0.3-0.1,0.6,0,0.6,0.3v4.8h3.8V1.6c0-0.6-0.5-1.1-1.1-1.1h0
+		C17.7,0.6,17.5,0.6,17.3,0.7L17.3,0.7z"
+        />
+        <path
+          className={"logoSection"}
+          d="M44.6,0.6h-3.8v5.1c0,0.3-0.3,0.5-0.6,0.3l-9.9-5.3c-0.2-0.1-0.3-0.1-0.5-0.1h0c-0.6,0-1.1,0.5-1.1,1.1v10h3.8
+		v-5c0-0.3,0.3-0.5,0.6-0.3l10,5.3c0.2,0.1,0.3,0.1,0.5,0.1l0,0c0.6,0,1.1-0.5,1.1-1.1L44.6,0.6L44.6,0.6L44.6,0.6z"
+        />
+        <path
+          className={"logoSection"}
+          d="M47.6,11.7V0.6h1.8v11.1L47.6,11.7L47.6,11.7z"
+        />
+        <path
+          className={"logoSection"}
+          d="M59.5,11.9c-4.7,0-8-2.2-8-5.8c0-3.5,3.3-5.8,8-5.8c4.7,0,8,2.2,8,5.8S64.3,11.9,59.5,11.9z M59.5,1.9
+		c-3.5,0-6.2,1.5-6.2,4.3c0,2.8,2.7,4.3,6.2,4.3c3.5,0,6.2-1.5,6.2-4.3C65.7,3.4,63,1.9,59.5,1.9L59.5,1.9z"
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default MissionControl;

src/components/ApplicationLogo/Logos/Monitor/Monitor.tsx

@@ -0,0 +1,98 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const Monitor: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 167.8 51" inverse={inverse} onClick={onClick}>
+      <g>
+        <path
+          className={"logoApplicationName"}
+          d="M1.4,24.1h3.8l9,22h0.3l9-22h3.8v26.5h-3V30.5h-0.3l-8.3,20.1H13L4.7,30.5H4.5v20.1h-3V24.1z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M56.2,37.4c0,2.8-0.5,5.2-1.5,7.2c-1,2-2.4,3.6-4.2,4.7c-1.8,1.1-3.8,1.7-6,1.7c-2.3,0-4.3-0.6-6-1.7
+		c-1.8-1.1-3.1-2.7-4.2-4.7c-1-2-1.5-4.5-1.5-7.2c0-2.8,0.5-5.2,1.5-7.2c1-2,2.4-3.6,4.2-4.7c1.8-1.1,3.8-1.7,6-1.7
+		c2.3,0,4.3,0.6,6,1.7c1.8,1.1,3.1,2.7,4.2,4.7C55.7,32.2,56.2,34.6,56.2,37.4z M53.1,37.4c0-2.3-0.4-4.2-1.1-5.8
+		c-0.8-1.6-1.8-2.8-3.1-3.6c-1.3-0.8-2.8-1.2-4.4-1.2s-3.1,0.4-4.4,1.2c-1.3,0.8-2.3,2-3.1,3.6c-0.8,1.6-1.1,3.5-1.1,5.8
+		s0.4,4.2,1.1,5.8c0.8,1.6,1.8,2.8,3.1,3.6c1.3,0.8,2.8,1.2,4.4,1.2s3.1-0.4,4.4-1.2c1.3-0.8,2.3-2,3.1-3.6
+		C52.7,41.6,53.1,39.7,53.1,37.4z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M82.6,24.1v26.5h-3.1L65.1,29.8h-0.3v20.8h-3.2V24.1h3.1L79.2,45h0.3V24.1H82.6z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M92.3,24.1v26.5h-3.2V24.1H92.3z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M97.2,27v-2.8h19.9V27h-8.3v23.7h-3.2V27H97.2z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M143.4,37.4c0,2.8-0.5,5.2-1.5,7.2c-1,2-2.4,3.6-4.2,4.7c-1.8,1.1-3.8,1.7-6,1.7c-2.3,0-4.3-0.6-6-1.7
+		c-1.8-1.1-3.1-2.7-4.2-4.7c-1-2-1.5-4.5-1.5-7.2c0-2.8,0.5-5.2,1.5-7.2c1-2,2.4-3.6,4.2-4.7c1.8-1.1,3.8-1.7,6-1.7
+		c2.3,0,4.3,0.6,6,1.7c1.8,1.1,3.1,2.7,4.2,4.7C142.9,32.2,143.4,34.6,143.4,37.4z M140.3,37.4c0-2.3-0.4-4.2-1.1-5.8
+		c-0.8-1.6-1.8-2.8-3.1-3.6c-1.3-0.8-2.8-1.2-4.4-1.2c-1.6,0-3.1,0.4-4.4,1.2s-2.3,2-3.1,3.6c-0.8,1.6-1.1,3.5-1.1,5.8
+		s0.4,4.2,1.1,5.8c0.8,1.6,1.8,2.8,3.1,3.6c1.3,0.8,2.8,1.2,4.4,1.2c1.6,0,3.1-0.4,4.4-1.2c1.3-0.8,2.3-2,3.1-3.6
+		C139.9,41.6,140.3,39.7,140.3,37.4z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M148.8,50.6V24.1h9c2.1,0,3.8,0.4,5.1,1.1c1.3,0.7,2.3,1.7,3,2.9c0.6,1.2,1,2.6,1,4.2s-0.3,2.9-1,4.2
+		c-0.6,1.2-1.6,2.2-2.9,2.8c-1.3,0.7-3,1-5.1,1h-7.2v-2.9h7.1c1.4,0,2.6-0.2,3.4-0.6c0.9-0.4,1.5-1,1.9-1.8c0.4-0.8,0.6-1.7,0.6-2.7
+		c0-1.1-0.2-2-0.6-2.8c-0.4-0.8-1-1.4-1.9-1.8c-0.9-0.4-2-0.7-3.5-0.7H152v23.7L148.8,50.6L148.8,50.6z M161.2,38.7l6.5,11.9H164
+		l-6.4-11.9H161.2z"
+        />
+        <rect
+          x="22.2"
+          y="0.2"
+          className={"logoSection"}
+          width="3.8"
+          height="11.3"
+        />
+        <path
+          className={"logoSection"}
+          d="M17.6,0.4L9.8,5.1c-0.1,0.1-0.3,0.1-0.4,0L1.6,0.4C1.5,0.3,1.3,0.2,1.1,0.2h0C0.5,0.2,0,0.7,0,1.3v10.2h3.8
+		V6.6c0-0.3,0.3-0.5,0.6-0.3L8.8,9c0.4,0.3,1,0.3,1.4,0l4.6-2.7c0.3-0.2,0.6,0,0.6,0.3v4.9h3.8V1.3c0-0.6-0.5-1.1-1.1-1.1h0
+		C18,0.2,17.8,0.3,17.6,0.4L17.6,0.4z"
+        />
+        <path
+          className={"logoSection"}
+          d="M45.3,0.2h-3.9v5.2c0,0.3-0.3,0.5-0.6,0.3L30.7,0.4c-0.2-0.1-0.3-0.1-0.5-0.1h0c-0.6,0-1.1,0.5-1.1,1.1v10.2
+		H33V6.4c0-0.3,0.3-0.5,0.6-0.3l10.1,5.4c0.2,0.1,0.3,0.1,0.5,0.1l0,0c0.6,0,1.1-0.5,1.1-1.1L45.3,0.2L45.3,0.2L45.3,0.2z"
+        />
+        <path
+          className={"logoSection"}
+          d="M48.4,11.5V0.2h1.8v11.3L48.4,11.5L48.4,11.5z"
+        />
+        <path
+          className={"logoSection"}
+          d="M60.5,11.8c-4.8,0-8.1-2.3-8.1-5.9c0-3.6,3.4-5.9,8.1-5.9c4.7,0,8.2,2.3,8.2,5.9S65.3,11.8,60.5,11.8z
+		 M60.5,1.5c-3.5,0-6.3,1.5-6.3,4.4c0,2.8,2.7,4.4,6.3,4.4c3.5,0,6.3-1.5,6.3-4.4C66.7,3,64,1.5,60.5,1.5L60.5,1.5z"
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default Monitor;

src/components/ApplicationLogo/Logos/Observe/Observe.tsx

@@ -0,0 +1,104 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const Observe: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 161.2 51" inverse={inverse} onClick={onClick}>
+      <g>
+        <path
+          className={"logoApplicationName"}
+          d="M23.8,37.3c0,2.8-0.5,5.2-1.5,7.2c-1,2-2.4,3.6-4.1,4.7c-1.8,1.1-3.8,1.7-6,1.7c-2.3,0-4.3-0.6-6-1.7
+		s-3.1-2.7-4.1-4.7c-1-2-1.5-4.4-1.5-7.2s0.5-5.2,1.5-7.2c1-2,2.4-3.6,4.1-4.7c1.8-1.1,3.8-1.7,6-1.7c2.3,0,4.3,0.6,6,1.7
+		c1.8,1.1,3.1,2.7,4.1,4.7C23.3,32.1,23.8,34.5,23.8,37.3z M20.7,37.3c0-2.3-0.4-4.2-1.1-5.8c-0.8-1.6-1.8-2.8-3.1-3.6
+		c-1.3-0.8-2.7-1.2-4.3-1.2S9,27.1,7.7,27.9c-1.3,0.8-2.3,2-3.1,3.6c-0.8,1.6-1.1,3.5-1.1,5.8s0.4,4.2,1.1,5.8
+		c0.8,1.6,1.8,2.8,3.1,3.6c1.3,0.8,2.7,1.2,4.3,1.2s3.1-0.4,4.3-1.2c1.3-0.8,2.3-2,3.1-3.6C20.3,41.5,20.7,39.6,20.7,37.3z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M29.1,50.5V24.1h9.2c1.8,0,3.4,0.3,4.6,0.9c1.2,0.6,2.1,1.5,2.7,2.5c0.6,1.1,0.9,2.2,0.9,3.5
+		c0,1.1-0.2,2.1-0.6,2.8c-0.4,0.7-0.9,1.3-1.6,1.8c-0.7,0.4-1.4,0.7-2.1,1v0.3c0.8,0.1,1.6,0.3,2.4,0.9c0.8,0.5,1.5,1.3,2.1,2.2
+		c0.6,1,0.8,2.1,0.8,3.5c0,1.3-0.3,2.5-0.9,3.6c-0.6,1.1-1.6,1.9-2.9,2.5c-1.3,0.6-3,0.9-5.1,0.9L29.1,50.5L29.1,50.5z M32.3,35.7
+		h5.9c1,0,1.8-0.2,2.6-0.6c0.8-0.4,1.4-0.9,1.9-1.6c0.5-0.7,0.7-1.5,0.7-2.4c0-1.2-0.4-2.2-1.2-3c-0.8-0.8-2.1-1.2-3.8-1.2h-6V35.7z
+		 M32.3,47.7h6.4c2.1,0,3.6-0.4,4.5-1.2c0.9-0.8,1.3-1.8,1.3-3c0-0.9-0.2-1.7-0.7-2.5c-0.5-0.8-1.1-1.4-2-1.8
+		c-0.8-0.5-1.8-0.7-3-0.7h-6.5C32.3,38.5,32.3,47.7,32.3,47.7z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M67.3,30.7c-0.2-1.3-0.8-2.3-1.9-3c-1.1-0.7-2.5-1.1-4.1-1.1c-1.2,0-2.2,0.2-3.1,0.6c-0.9,0.4-1.6,0.9-2,1.6
+		c-0.5,0.7-0.7,1.4-0.7,2.3c0,0.7,0.2,1.3,0.5,1.8c0.3,0.5,0.8,0.9,1.3,1.3c0.5,0.3,1.1,0.6,1.7,0.8c0.6,0.2,1.1,0.4,1.6,0.5
+		l2.7,0.7c0.7,0.2,1.5,0.4,2.3,0.7c0.8,0.3,1.7,0.8,2.4,1.3c0.8,0.5,1.4,1.2,1.9,2.1c0.5,0.9,0.8,1.9,0.8,3.1c0,1.4-0.4,2.7-1.1,3.9
+		c-0.7,1.2-1.8,2.1-3.3,2.8c-1.4,0.7-3.2,1-5.2,1c-1.9,0-3.5-0.3-4.9-0.9c-1.4-0.6-2.5-1.5-3.3-2.6c-0.8-1.1-1.2-2.4-1.3-3.8H55
+		c0.1,1,0.4,1.8,1,2.5c0.6,0.7,1.3,1.1,2.2,1.4c0.9,0.3,1.9,0.5,2.9,0.5c1.2,0,2.3-0.2,3.3-0.6c1-0.4,1.7-1,2.3-1.7
+		c0.6-0.7,0.9-1.6,0.9-2.5c0-0.9-0.2-1.6-0.7-2.1c-0.5-0.6-1.1-1-1.9-1.3s-1.7-0.6-2.6-0.9L59.1,38c-2.1-0.6-3.7-1.4-4.9-2.5
+		c-1.2-1.1-1.8-2.5-1.8-4.3c0-1.5,0.4-2.8,1.2-3.9c0.8-1.1,1.9-2,3.3-2.6c1.4-0.6,2.9-0.9,4.6-0.9c1.7,0,3.2,0.3,4.5,0.9
+		c1.3,0.6,2.4,1.4,3.2,2.5c0.8,1.1,1.2,2.2,1.2,3.6L67.3,30.7L67.3,30.7z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M76,50.5V24.1h16v2.8H79.2v8.9h11.9v2.8H79.2v9h13v2.8H76z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M97.8,50.5V24.1h8.9c2.1,0,3.8,0.4,5.1,1.1c1.3,0.7,2.3,1.7,2.9,2.9c0.6,1.2,1,2.6,1,4.2s-0.3,2.9-1,4.1
+		c-0.6,1.2-1.6,2.2-2.9,2.8c-1.3,0.7-3,1-5.1,1h-7.2v-2.9h7.1c1.4,0,2.6-0.2,3.4-0.6c0.9-0.4,1.5-1,1.9-1.8c0.4-0.8,0.6-1.7,0.6-2.7
+		c0-1.1-0.2-2-0.6-2.8c-0.4-0.8-1-1.4-1.9-1.8c-0.9-0.4-2-0.7-3.4-0.7H101v23.6L97.8,50.5L97.8,50.5z M110.2,38.6l6.5,11.9H113
+		l-6.4-11.9H110.2z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M121.5,24.1l7.9,22.3h0.3l7.9-22.3h3.4l-9.7,26.5h-3.3l-9.7-26.5H121.5z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M145,50.5V24.1h16v2.8h-12.8v8.9h11.9v2.8h-11.9v9h13v2.8H145z"
+        />
+        <rect
+          x="22.2"
+          y="0.2"
+          className={"logoSection"}
+          width="3.8"
+          height="11.2"
+        />
+        <path
+          className={"logoSection"}
+          d="M17.6,0.4L9.8,5.1c-0.1,0.1-0.2,0.1-0.4,0L1.6,0.4C1.5,0.3,1.3,0.2,1.1,0.2h0C0.5,0.2,0,0.7,0,1.3v10.2h3.8
+		V6.6c0-0.3,0.3-0.5,0.6-0.3L8.8,9c0.4,0.3,1,0.3,1.4,0l4.6-2.7c0.3-0.1,0.6,0,0.6,0.3v4.9h3.8V1.3c0-0.6-0.5-1.1-1.1-1.1h0
+		C17.9,0.2,17.7,0.3,17.6,0.4L17.6,0.4z"
+        />
+        <path
+          className={"logoSection"}
+          d="M45.2,0.2h-3.9v5.2c0,0.3-0.3,0.5-0.6,0.3L30.6,0.4c-0.2-0.1-0.3-0.1-0.5-0.1h0c-0.6,0-1.1,0.5-1.1,1.1v10.2
+		h3.9V6.4c0-0.3,0.3-0.5,0.6-0.3l10.1,5.4c0.2,0.1,0.3,0.1,0.5,0.1l0,0c0.6,0,1.1-0.5,1.1-1.1L45.2,0.2L45.2,0.2L45.2,0.2z"
+        />
+        <path
+          className={"logoSection"}
+          d="M48.3,11.5V0.2h1.8v11.2L48.3,11.5L48.3,11.5z"
+        />
+        <path
+          className={"logoSection"}
+          d="M60.3,11.7c-4.7,0-8.1-2.3-8.1-5.9c0-3.6,3.4-5.9,8.1-5.9c4.7,0,8.1,2.3,8.1,5.9S65.2,11.7,60.3,11.7z
+		 M60.3,1.5c-3.5,0-6.2,1.5-6.2,4.4c0,2.8,2.7,4.4,6.2,4.4c3.5,0,6.3-1.5,6.3-4.4C66.6,3,63.9,1.5,60.3,1.5L60.3,1.5z"
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default Observe;

src/components/ApplicationLogo/Logos/Operator/Operator.tsx

@@ -0,0 +1,69 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const Operator: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 154.498 50.008" inverse={inverse} onClick={onClick}>
+      <g transform="translate(27.666 -11)">
+        <g transform="translate(-29 11)">
+          <g transform="translate(0 0)">
+            <path
+              d="M11.992-20.677A10.225,10.225,0,0,0,1.334-10.15,10.225,10.225,0,0,0,11.992.377,10.237,10.237,0,0,0,22.664-10.15,10.237,10.237,0,0,0,11.992-20.677Zm0,3.886A6.268,6.268,0,0,1,18.43-10.15a6.268,6.268,0,0,1-6.438,6.641A6.276,6.276,0,0,1,5.554-10.15,6.276,6.276,0,0,1,11.992-16.791ZM33.887-7.424c4.814,0,7.4-2.523,7.4-6.424,0-3.929-2.581-6.453-7.424-6.453h-8.28V0h4.046V-7.424Zm-.1-9.15c2.2,0,3.35.914,3.35,2.726s-1.146,2.726-3.35,2.726H29.624v-5.452ZM59.174-3.712H48.053V-8.381h10.5v-3.712h-10.5v-4.5H59.059V-20.3H44.007V0H59.174ZM62.6-20.3V0h4.045V-8.077h1.189L73.747,0h4.9L72.4-8.135c3.9-.377,6.221-2.654,6.221-5.989,0-3.886-2.6-6.177-7.438-6.177Zm8.512,3.726c2.146,0,3.35.769,3.35,2.451,0,1.711-1.146,2.523-3.35,2.523H66.642v-4.974ZM92.278-20.3h-4.93L79.445,0h4.22l1.769-4.727H94.09L95.86,0h4.321Zm-2.508,4L92.7-8.454H86.826Zm25.288-4H98.426v3.785h6.293V0h4.045V-16.516h6.293Zm11.136-.377A10.225,10.225,0,0,0,115.536-10.15,10.225,10.225,0,0,0,126.194.377,10.237,10.237,0,0,0,136.866-10.15,10.237,10.237,0,0,0,126.194-20.677Zm0,3.886a6.268,6.268,0,0,1,6.438,6.641,6.268,6.268,0,0,1-6.438,6.641,6.276,6.276,0,0,1-6.438-6.641A6.276,6.276,0,0,1,126.194-16.791ZM139.78-20.3V0h4.046V-8.077h1.189L150.931,0h4.9l-6.25-8.135c3.9-.377,6.221-2.654,6.221-5.989,0-3.886-2.6-6.177-7.439-6.177Zm8.512,3.726c2.146,0,3.35.769,3.35,2.451,0,1.711-1.146,2.523-3.35,2.523h-4.466v-4.974Z"
+              transform="translate(0 37.951)"
+              className={"logoApplicationName"}
+            />
+            <g transform="translate(2.356 0)">
+              <g transform="translate(0 0.151)">
+                <rect
+                  width="2.928"
+                  height="8.645"
+                  transform="translate(16.956)"
+                  className={"logoSection"}
+                />
+                <path
+                  d="M239.81,365.349l-5.942,3.629a.265.265,0,0,1-.276,0l-5.942-3.629a.816.816,0,0,0-.425-.119h-.007a.815.815,0,0,0-.815.815v7.82h2.926v-3.722a.293.293,0,0,1,.446-.25l3.33,2.037a1.042,1.042,0,0,0,1.072.011l3.515-2.062a.293.293,0,0,1,.44.253v3.733h2.925v-7.82a.814.814,0,0,0-.814-.815h-.007A.816.816,0,0,0,239.81,365.349Z"
+                  transform="translate(-226.403 -365.23)"
+                  className={"logoSection"}
+                />
+                <path
+                  d="M259.662,365.23h-2.969v3.935a.293.293,0,0,1-.431.258l-7.694-4.1a.818.818,0,0,0-.383-.1h-.005a.815.815,0,0,0-.815.815v7.821h2.945v-3.931a.293.293,0,0,1,.43-.258l7.725,4.1a.814.814,0,0,0,.382.1h0a.815.815,0,0,0,.815-.815Z"
+                  transform="translate(-225.18 -365.23)"
+                  className={"logoSection"}
+                />
+              </g>
+              <path
+                d="M261.159,373.875V365.23h1.347v8.646Z"
+                transform="translate(-224.375 -365.079)"
+                className={"logoSection"}
+              />
+              <path
+                d="M270.264,374.038c-3.624,0-6.195-1.719-6.195-4.475s2.587-4.476,6.195-4.476,6.21,1.719,6.21,4.476S273.934,374.038,270.264,374.038Zm0-7.8c-2.695,0-4.77,1.177-4.77,3.33s2.075,3.329,4.77,3.329,4.786-1.162,4.786-3.329S272.958,366.233,270.264,366.233Z"
+                transform="translate(-224.205 -365.087)"
+                className={"logoSection"}
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+    </LogoBase>
+  );
+};
+
+export default Operator;

src/components/ApplicationLogo/Logos/Releases/Releases.tsx

@@ -0,0 +1,86 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const Releases: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 189.7 49.96" inverse={inverse} onClick={onClick}>
+      <g>
+        <g>
+          <rect
+            x="21.86"
+            y=".19"
+            width="3.76"
+            height="11.1"
+            className={"logoSection"}
+          />
+          <path
+            d="m17.3.35l-7.63,4.66c-.11.07-.25.07-.35,0L1.69.35c-.16-.1-.35-.15-.55-.15h0C.55.19.08.66.08,1.24v10.04h3.76v-4.78c0-.21.17-.38.38-.38.07,0,.14.02.2.06l4.28,2.62c.42.26.95.26,1.38.01l4.51-2.65c.18-.1.41-.04.51.14.03.06.05.12.05.19v4.79h3.76V1.24c0-.58-.47-1.05-1.04-1.05h0c-.19,0-.38.05-.55.15Z"
+            className={"logoSection"}
+          />
+          <path
+            d="m44.37.19h-3.81v5.05c0,.21-.17.38-.38.38-.06,0-.12-.02-.18-.04L30.12.32c-.15-.08-.32-.12-.49-.12h0c-.58,0-1.05.47-1.05,1.05v10.05h3.78v-5.05c0-.21.17-.38.38-.38.06,0,.12.02.18.04l9.92,5.26c.15.08.32.12.49.12h0c.58,0,1.05-.47,1.05-1.05V.19Z"
+            className={"logoSection"}
+          />
+        </g>
+        <path d="m47.32,11.3V.2h1.73v11.1h-1.73Z" className={"logoSection"} />
+        <path
+          d="m59.23,11.49c-4.65,0-7.95-2.21-7.95-5.75s3.32-5.75,7.95-5.75,7.98,2.21,7.98,5.75-3.26,5.75-7.98,5.75Zm0-10.02c-3.46,0-6.13,1.51-6.13,4.28s2.67,4.28,6.13,4.28,6.15-1.49,6.15-4.28c0-2.76-2.68-4.28-6.15-4.28Z"
+          className={"logoSection"}
+        />
+      </g>
+      <g>
+        <path
+          d="m0,24.14h10.73c3,0,5.29.67,6.89,2.02,1.6,1.35,2.4,3.25,2.4,5.7,0,2.09-.69,3.8-2.07,5.14s-3.28,2.12-5.71,2.35l7.81,10.17h-6.12l-7.39-10.09h-1.49v10.09H0v-25.37Zm10.64,4.66h-5.58v6.21h5.58c2.79,0,4.19-1.05,4.19-3.15s-1.4-3.06-4.19-3.06Z"
+          className={"logoApplicationName"}
+        />
+        <path
+          d="m43.59,44.87v4.64h-18.95v-25.37h18.81v4.64h-13.75v5.62h13.12v4.64h-13.12v5.83h13.9Z"
+          className={"logoApplicationName"}
+        />
+        <path
+          d="m67.24,44.78v4.73h-18.46v-25.37h5.06v20.64h13.41Z"
+          className={"logoApplicationName"}
+        />
+        <path
+          d="m89.65,44.87v4.64h-18.95v-25.37h18.81v4.64h-13.75v5.62h13.12v4.64h-13.12v5.83h13.9Z"
+          className={"logoApplicationName"}
+        />
+        <path
+          d="m108.37,24.14l9.88,25.37h-5.4l-2.21-5.91h-10.82l-2.21,5.91h-5.27l9.88-25.37h6.16Zm-3.13,5l-3.68,9.8h7.34l-3.66-9.8Z"
+          className={"logoApplicationName"}
+        />
+        <path
+          d="m140.8,26.4l-2.39,4.13c-2.33-1.44-4.73-2.16-7.19-2.16-1.45,0-2.62.27-3.51.81-.89.54-1.34,1.29-1.34,2.23,0,.45.12.83.36,1.16.24.33.62.6,1.14.82s1.05.4,1.6.53c.55.13,1.26.27,2.13.42l1.43.24c5.39.88,8.08,3.25,8.08,7.1,0,1.35-.28,2.57-.85,3.64-.57,1.08-1.33,1.94-2.3,2.6-.97.66-2.07,1.16-3.3,1.5-1.23.34-2.54.52-3.93.52-1.98,0-3.93-.29-5.84-.86-1.92-.57-3.53-1.39-4.85-2.46l2.63-4.08c.99.79,2.2,1.44,3.62,1.96,1.42.52,2.91.78,4.46.78,1.45,0,2.64-.27,3.58-.81.94-.54,1.4-1.29,1.4-2.25,0-.83-.42-1.46-1.27-1.88-.85-.42-2.22-.78-4.11-1.09l-1.61-.25c-5.16-.81-7.74-3.23-7.74-7.27,0-1.28.27-2.44.82-3.48.54-1.04,1.28-1.88,2.22-2.54.94-.65,2.01-1.15,3.22-1.5,1.21-.35,2.49-.53,3.86-.53,1.79,0,3.46.21,5,.64s3.11,1.11,4.69,2.06Z"
+          className={"logoApplicationName"}
+        />
+        <path
+          d="m164.66,44.87v4.64h-18.95v-25.37h18.81v4.64h-13.75v5.62h13.12v4.64h-13.12v5.83h13.9Z"
+          className={"logoApplicationName"}
+        />
+        <path
+          d="m189.4,26.4l-2.39,4.13c-2.33-1.44-4.73-2.16-7.19-2.16-1.45,0-2.62.27-3.51.81-.89.54-1.34,1.29-1.34,2.23,0,.45.12.83.36,1.16.24.33.62.6,1.14.82s1.05.4,1.6.53c.55.13,1.26.27,2.13.42l1.43.24c5.39.88,8.08,3.25,8.08,7.1,0,1.35-.28,2.57-.85,3.64-.57,1.08-1.33,1.94-2.3,2.6-.97.66-2.07,1.16-3.3,1.5-1.23.34-2.54.52-3.93.52-1.98,0-3.93-.29-5.84-.86-1.92-.57-3.53-1.39-4.85-2.46l2.63-4.08c.99.79,2.2,1.44,3.62,1.96,1.42.52,2.91.78,4.46.78,1.45,0,2.64-.27,3.58-.81.94-.54,1.4-1.29,1.4-2.25,0-.83-.42-1.46-1.27-1.88-.85-.42-2.22-.78-4.11-1.09l-1.61-.25c-5.16-.81-7.74-3.23-7.74-7.27,0-1.28.27-2.44.82-3.48.54-1.04,1.28-1.88,2.22-2.54.94-.65,2.01-1.15,3.22-1.5,1.21-.35,2.49-.53,3.86-.53,1.79,0,3.46.21,5,.64s3.11,1.11,4.69,2.06Z"
+          className={"logoApplicationName"}
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default Releases;

src/components/ApplicationLogo/Logos/SUBNET/SUBNET.tsx

@@ -0,0 +1,69 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const SUBNET: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 184.538 50.008" inverse={inverse} onClick={onClick}>
+      <g transform="translate(27.622 -11)">
+        <g transform="translate(-29 11)">
+          <g transform="translate(0 0)">
+            <path
+              d="M17.995-18.488a14.283,14.283,0,0,0-7.758-2.161c-4.321,0-8.091,2.2-8.091,6.438,0,3.668,2.61,5.249,6.192,5.814l1.29.2c2.828.45,4.307.972,4.307,2.378,0,1.566-1.74,2.451-3.988,2.451A10.718,10.718,0,0,1,3.48-5.554l-2.1,3.263A14.124,14.124,0,0,0,9.933.363c4.365,0,8.309-2.132,8.309-6.612,0-3.538-2.842-5.09-6.467-5.684l-1.146-.188c-2.436-.406-4.191-.856-4.191-2.349,0-1.537,1.609-2.436,3.886-2.436a10.91,10.91,0,0,1,5.757,1.726ZM38.353-20.3h-4.06V-8.309c0,3.335-1.885,4.8-4.684,4.8s-4.684-1.465-4.684-4.8V-20.3h-4.06V-8.106c0,5.612,3.582,8.468,8.744,8.468s8.743-2.857,8.743-8.468Zm3.654,0V0h8.787c4.872,0,7.642-1.914,7.642-5.815a4.874,4.874,0,0,0-3.379-4.553A4.528,4.528,0,0,0,58-14.674c0-3.871-2.972-5.626-7.7-5.626ZM50.59-8.439c2.233,0,3.64.522,3.64,2.421,0,1.943-1.407,2.465-3.64,2.465l-4.538-.015V-8.439Zm-.406-8.294c2,0,3.6.435,3.6,2.349,0,1.972-1.566,2.393-3.582,2.393H46.052v-4.741ZM79.5-20.3h-4.06V-6.743L65.134-20.3H61.349V0h4.045l.015-13.558L75.7,0h3.8ZM98.557-3.712H87.435V-8.381h10.5v-3.712h-10.5v-4.5H98.441V-20.3H83.39V0H98.557ZM116.769-20.3H100.137v3.785h6.293V0h4.045V-16.516h6.293Z"
+              transform="translate(0 38.028)"
+              className={"logoApplicationName"}
+            />
+            <g transform="translate(2.376 0)">
+              <g transform="translate(0 0.153)">
+                <rect
+                  width="2.953"
+                  height="8.72"
+                  transform="translate(17.103)"
+                  className={"logoSection"}
+                />
+                <path
+                  d="M239.926,365.35l-5.993,3.661a.267.267,0,0,1-.279,0l-5.993-3.661a.823.823,0,0,0-.429-.12h-.007a.822.822,0,0,0-.822.822v7.888h2.952v-3.754a.3.3,0,0,1,.449-.252l3.358,2.055a1.051,1.051,0,0,0,1.081.011l3.545-2.08a.3.3,0,0,1,.444.255v3.765h2.951v-7.888a.821.821,0,0,0-.821-.822h-.007A.823.823,0,0,0,239.926,365.35Z"
+                  transform="translate(-226.403 -365.23)"
+                  className={"logoSection"}
+                />
+                <path
+                  d="M259.769,365.23h-2.994V369.2a.3.3,0,0,1-.434.26l-7.761-4.133a.825.825,0,0,0-.386-.1h-.005a.822.822,0,0,0-.822.822v7.889h2.971v-3.965a.3.3,0,0,1,.433-.26l7.792,4.132a.822.822,0,0,0,.385.1h0a.822.822,0,0,0,.822-.822Z"
+                  transform="translate(-224.988 -365.23)"
+                  className={"logoSection"}
+                />
+              </g>
+              <path
+                d="M261.159,373.95v-8.72h1.359v8.72Z"
+                transform="translate(-224.056 -365.077)"
+                className={"logoSection"}
+              />
+              <path
+                d="M270.317,374.115c-3.655,0-6.248-1.734-6.248-4.513s2.609-4.515,6.248-4.515,6.264,1.734,6.264,4.515S274.019,374.115,270.317,374.115Zm0-7.872c-2.718,0-4.811,1.187-4.811,3.358s2.093,3.358,4.811,3.358,4.827-1.172,4.827-3.358S273.035,366.243,270.317,366.243Z"
+                transform="translate(-223.86 -365.087)"
+                className={"logoSection"}
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+    </LogoBase>
+  );
+};
+
+export default SUBNET;

src/components/ApplicationLogo/Logos/Storage/StorageEnterprise.tsx

@@ -0,0 +1,81 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2024 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const StorageEnterprise: FC<SVGProps<any> & LogoBaseProps> = ({
+  inverse,
+  onClick,
+}) => {
+  return (
+    <LogoBase viewBox="0 0 174.3 51" inverse={inverse} onClick={onClick}>
+      <g transform="translate(5485.708 23935.906)">
+        <g transform="translate(-5507 -23935.906)">
+          <g transform="translate(21.291 0)">
+            <g transform="translate(0 5.05)">
+              <rect
+                x="56.7"
+                y="-4.4"
+                className={"logoSection"}
+                width="9.7"
+                height="28.7"
+              />
+              <path
+                className={"logoSection"}
+                d="M45-4L25.3,8c-0.3,0.2-0.6,0.2-0.9,0L4.6-4C4.2-4.3,3.7-4.4,3.2-4.4h0c-1.5,0-2.7,1.2-2.7,2.7v25.9h9.7
+					V11.9c0-0.5,0.4-1,1-1c0.2,0,0.4,0,0.5,0.1l11,6.8c1.1,0.7,2.5,0.7,3.6,0L37.9,11c0.5-0.3,1.1-0.1,1.3,0.3
+					c0.1,0.1,0.1,0.3,0.1,0.5v12.4h9.7V-1.7c0-1.5-1.2-2.7-2.7-2.7c0,0,0,0,0,0h0C45.9-4.4,45.4-4.3,45-4z"
+              />
+              <path
+                className={"logoSection"}
+                d="M114.9-4.4H105v13c0,0.5-0.4,1-1,1c-0.2,0-0.3,0-0.5-0.1L78.1-4.1c-0.4-0.2-0.8-0.3-1.3-0.3h0
+					c-1.5,0-2.7,1.2-2.7,2.7v25.9h9.8v-13c0-0.5,0.4-1,1-1c0.2,0,0.3,0,0.5,0.1l25.6,13.6c0.4,0.2,0.8,0.3,1.3,0.3l0,0
+					c1.5,0,2.7-1.2,2.7-2.7L114.9-4.4z"
+              />
+            </g>
+            <path
+              className={"logoSection"}
+              d="M122.5,29.3V0.7h4.5v28.7H122.5z"
+            />
+            <path
+              className={"logoSection"}
+              d="M153.2,29.8c-12,0-20.5-5.7-20.5-14.8c0-9.1,8.6-14.8,20.5-14.8c12,0,20.6,5.7,20.6,14.8
+				C173.8,24.1,165.4,29.8,153.2,29.8z M153.2,4c-8.9,0-15.8,3.9-15.8,11c0,7.2,6.9,11,15.8,11c8.9,0,15.9-3.9,15.9-11
+				C169.1,7.9,162.2,4,153.2,4L153.2,4z"
+            />
+          </g>
+          <path
+            className={"logoApplicationName"}
+            d="M33.3,48.2h-9v-4.4h8.5v-2.4h-8.5v-4.3h8.8v-2.4H21.8v15.8h11.5V48.2z M54,34.8h-2.5v11.4l-8.8-11.4h-2.3v15.8h2.5l0-11.4
+			l8.8,11.4H54V34.8z M72.5,34.8H59.8v2.4h5.1v13.4h2.5V37.2h5.1L72.5,34.8z M89.8,48.2h-9v-4.4h8.5v-2.4h-8.5v-4.3h8.8v-2.4H78.2
+			v15.8h11.5V48.2z M96.8,34.8v15.8h2.5v-6.6h1.3l5,6.6h3.2l-5.2-6.6c3.2-0.1,5.3-1.9,5.3-4.6c0-2.9-2-4.6-5.6-4.6L96.8,34.8z
+			 M103.2,37.2c2,0,3,0.7,3,2.2c0,1.5-1,2.3-3,2.3h-3.9v-4.4H103.2z M121.5,44.4c3.6,0,5.6-1.8,5.6-4.8s-2-4.8-5.6-4.8h-6.1v15.8
+			h2.5v-6.2H121.5z M121.5,37.2c2.1,0,3,0.8,3,2.4s-0.9,2.4-3,2.4H118v-4.8H121.5z M133.5,34.8v15.8h2.5v-6.6h1.3l5,6.6h3.2
+			l-5.2-6.6c3.2-0.1,5.3-1.9,5.3-4.6c0-2.9-2-4.6-5.6-4.6H133.5z M139.9,37.2c2,0,3,0.7,3,2.2c0,1.5-1,2.3-3,2.3H136v-4.4
+			L139.9,37.2z M154.7,34.8h-2.5v15.8h2.5V34.8z M173.8,36.2c-1.6-1.1-3.4-1.7-5.7-1.7c-3.4,0-6.2,1.8-6.2,4.9c0,2.9,2.3,4,4.7,4.4
+			l1.2,0.2c2.3,0.3,3.6,0.9,3.6,2.1c0,1.5-1.6,2.3-3.7,2.3c-1.8,0-3.9-0.7-5-1.7l-1.4,2c1.6,1.4,4.2,2.1,6.3,2.1
+			c3.4,0,6.3-1.8,6.3-5c0-2.9-2.5-4-5.1-4.3l-1.1-0.1c-2.1-0.3-3.3-0.8-3.3-2.1c0-1.4,1.4-2.4,3.6-2.4c1.6,0,3.1,0.5,4.4,1.4
+			L173.8,36.2z M192,48.2h-9v-4.4h8.5v-2.4h-8.5v-4.3h8.8v-2.4h-11.4v15.8H192V48.2z"
+          />
+        </g>
+      </g>
+    </LogoBase>
+  );
+};
+
+export default StorageEnterprise;

src/components/ApplicationLogo/Logos/Storage/StorageEnterpriseOS.tsx

@@ -0,0 +1,185 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2024 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const StorageEnterpriseOS: FC<SVGProps<any> & LogoBaseProps> = ({
+  inverse,
+  onClick,
+}) => {
+  return (
+    <LogoBase viewBox="0 0 482.6 67.4" inverse={inverse} onClick={onClick}>
+      <g id="Group_16740">
+        <g id="Group_1082">
+          <rect
+            id="Rectangle_674"
+            x="28.6"
+            y="0.3"
+            className={"logoSection"}
+            width="4.9"
+            height="14.6"
+          />
+          <path
+            id="Path_87"
+            className={"logoSection"}
+            d="M22.6,0.5l-10,6.1c-0.1,0.1-0.3,0.1-0.5,0l-10-6.1C1.9,0.3,1.6,0.3,1.4,0.3h0
+			C0.6,0.3,0,0.9,0,1.6v13.2h4.9V8.5C4.9,8.3,5.1,8,5.4,8c0.1,0,0.2,0,0.3,0.1l5.6,3.4c0.6,0.3,1.2,0.4,1.8,0L19,8.1
+			c0.2-0.1,0.5-0.1,0.7,0.2c0,0.1,0.1,0.2,0.1,0.3v6.3h4.9V1.6c0-0.8-0.6-1.4-1.4-1.4h0C23.1,0.3,22.8,0.3,22.6,0.5L22.6,0.5
+			L22.6,0.5z"
+          />
+          <path
+            id="Path_88"
+            className={"logoSection"}
+            d="M58.1,0.3h-5v6.6c0,0.3-0.2,0.5-0.5,0.5c-0.1,0-0.2,0-0.2-0.1l-13-6.9c-0.2-0.1-0.4-0.2-0.7-0.2
+			l0,0c-0.8,0-1.4,0.6-1.4,1.4v13.2h5V8.2c0-0.3,0.2-0.5,0.5-0.5c0.1,0,0.2,0,0.2,0.1l13,6.9c0.2,0.1,0.4,0.2,0.7,0.2l0,0
+			c0.8,0,1.4-0.6,1.4-1.4L58.1,0.3L58.1,0.3z"
+          />
+        </g>
+        <path
+          id="Path_89"
+          className={"logoSection"}
+          d="M62,14.8V0.3h2.3v14.6L62,14.8L62,14.8z"
+        />
+        <path
+          id="Path_90"
+          className={"logoSection"}
+          d="M77.7,15.1c-6.1,0-10.4-2.9-10.4-7.5S71.6,0,77.7,0s10.5,2.9,10.5,7.6S83.9,15.1,77.7,15.1z
+		 M77.7,1.9c-4.5,0-8,2-8,5.6s3.5,5.6,8,5.6s8.1-2,8.1-5.6C85.7,3.9,82.2,1.9,77.7,1.9L77.7,1.9z"
+        />
+      </g>
+      <g id="ENTERPRISE">
+        <g>
+          <path
+            className={"logoApplicationName"}
+            d="M23.8,57.9H0V26.1h23.6v5.8H6.3V39h16.5v5.8H6.3v7.3h17.4V57.9z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M49.9,43.9v14H44V45.8c0-3.2-1.6-4.9-4.3-4.9c-2.5,0-4.7,1.7-4.7,5v12.1h-5.9v-22h5.8v2.6
+			c1.6-2.3,4-3.2,6.5-3.2C46.4,35.3,49.9,38.8,49.9,43.9z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M71.1,41.2h-8v8c0,2.8,1.5,3.8,3.3,3.8c1.4,0,2.9-0.7,4.1-1.4l2.2,4.6c-1.9,1.3-4.2,2.3-7.3,2.3
+			c-5.5,0-8.2-3.1-8.2-8.8v-8.5h-4.2v-5.3h4.2v-6.5h5.9v6.5h8V41.2z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M95.8,46.9c0,0.7-0.1,1.5-0.1,2H80.1c0.6,3.2,2.9,4.6,5.7,4.6c1.9,0,4-0.8,5.6-2.1l3.5,3.8
+			c-2.5,2.3-5.7,3.3-9.4,3.3C78.7,58.5,74,53.9,74,47s4.6-11.7,11.1-11.7S95.8,40,95.8,46.9z M80.1,44.8h9.8
+			c-0.6-2.8-2.2-4.4-4.8-4.4C82.3,40.4,80.6,42.1,80.1,44.8L80.1,44.8z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M115,35.8l-0.9,5.9c-1-0.4-2.4-0.7-3.6-0.7c-2.8,0-4.6,1.7-4.6,5v12H100v-22h5.8v2.4c1.4-2.1,3.5-3,6.2-3
+			C113.2,35.3,114.2,35.5,115,35.8L115,35.8z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M141.5,46.9c0,6.6-4.6,11.6-10.7,11.6c-3,0-5.1-1.2-6.5-2.9V67h-5.9V35.9h5.8v2.4c1.4-1.8,3.6-3,6.6-3
+			C136.9,35.3,141.5,40.3,141.5,46.9L141.5,46.9z M124,46.9c0,3.5,2.3,6.1,5.7,6.1s5.7-2.7,5.7-6.1s-2.2-6.1-5.7-6.1
+			S124,43.4,124,46.9z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M160.7,35.8l-0.9,5.9c-1-0.4-2.4-0.7-3.6-0.7c-2.8,0-4.6,1.7-4.6,5v12h-5.9v-22h5.8v2.4c1.4-2.1,3.5-3,6.2-3
+			C158.9,35.3,159.9,35.5,160.7,35.8L160.7,35.8z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M170.8,28.7c0,2.1-1.7,3.8-3.8,3.8s-3.8-1.6-3.8-3.8s1.6-3.8,3.8-3.8S170.8,26.6,170.8,28.7z M170,57.9h-5.9
+			v-22h5.9V57.9z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M191.3,42c-1.8-0.9-4.6-1.8-7-1.8c-2.2,0-3.4,0.8-3.4,2c0,1.3,1.6,1.6,3.6,1.9l2,0.3c4.8,0.7,7.4,2.9,7.4,6.6
+			c0,4.5-3.7,7.5-10.1,7.5c-3,0-6.9-0.6-9.8-2.6l2.3-4.5c1.9,1.2,4.2,2.2,7.5,2.2c2.8,0,4.1-0.8,4.1-2.1c0-1.1-1.1-1.7-3.7-2
+			l-1.8-0.2c-5.1-0.7-7.6-2.9-7.6-6.7c0-4.5,3.5-7.2,9.3-7.2c3.5,0,6.3,0.7,9.2,2.1L191.3,42L191.3,42z"
+          />
+          <path
+            className={"logoApplicationName"}
+            d="M218.3,46.9c0,0.7-0.1,1.5-0.1,2h-15.6c0.6,3.2,2.9,4.6,5.7,4.6c1.9,0,4-0.8,5.6-2.1l3.5,3.8
+			c-2.5,2.3-5.7,3.3-9.4,3.3c-6.8,0-11.4-4.6-11.4-11.5s4.6-11.7,11.1-11.7S218.3,40,218.3,46.9L218.3,46.9z M202.6,44.8h9.8
+			c-0.6-2.8-2.2-4.4-4.8-4.4C204.8,40.4,203.1,42.1,202.6,44.8L202.6,44.8z"
+          />
+          <path
+            className={"logoSection"}
+            d="M263.1,42c0,9.5-6.9,16.4-16.5,16.4s-16.5-6.9-16.5-16.4s6.9-16.4,16.5-16.4S263.1,32.5,263.1,42z M234.4,42
+			c0,7.5,5.3,12.5,12.3,12.5S259,49.5,259,42s-5.3-12.5-12.3-12.5S234.4,34.5,234.4,42z"
+          />
+          <path
+            className={"logoSection"}
+            d="M289.1,47.1c0,6.5-4.8,11.2-10.8,11.2c-3.4,0-5.9-1.3-7.6-3.3v2.9h-3.7V25.2h3.7v14c1.7-2,4.2-3.3,7.6-3.3
+			C284.3,35.9,289.1,40.6,289.1,47.1z M270.4,47.1c0,4.4,3,7.8,7.4,7.8s7.4-3.5,7.4-7.8s-3-7.8-7.4-7.8S270.4,42.7,270.4,47.1z"
+          />
+          <path
+            className={"logoSection"}
+            d="M297.4,61.3c0,4-2.2,6.1-5.6,6.1c-1.1,0-2.3-0.3-3.1-0.7l0.9-3.2c0.6,0.2,1.2,0.4,1.9,0.4
+			c1.3,0,2.2-0.8,2.2-2.8V36.3h3.7L297.4,61.3L297.4,61.3z M298.1,28.8c0,1.5-1.2,2.6-2.7,2.6s-2.6-1.1-2.6-2.6s1.1-2.7,2.6-2.7
+			S298.1,27.2,298.1,28.8z"
+          />
+          <path
+            className={"logoSection"}
+            d="M322.7,47.1c0,0.5,0,1-0.1,1.4h-17c0.5,4.5,3.6,6.7,7.3,6.7c2.5,0,4.8-1,6.7-2.6l2,2.5
+			c-2.7,2.5-5.7,3.3-8.9,3.3c-6.4,0-11-4.5-11-11.2s4.5-11.2,10.7-11.2S322.7,40.5,322.7,47.1L322.7,47.1z M305.7,45.5h13.2
+			c-0.5-3.8-2.9-6.3-6.4-6.3C308.6,39.2,306.3,41.8,305.7,45.5L305.7,45.5z"
+          />
+          <path
+            className={"logoSection"}
+            d="M344.8,39.3l-2.4,2.5c-1.6-1.5-3.4-2.4-5.7-2.4c-4.2,0-7.3,3.2-7.3,7.8s3.2,7.8,7.3,7.8c2.3,0,4.3-1,5.8-2.5
+			l2.3,2.6c-2,2.2-4.8,3.4-8,3.4c-6.7,0-11.2-4.8-11.2-11.2s4.5-11.2,11.2-11.2C339.9,35.9,342.8,37.1,344.8,39.3L344.8,39.3z"
+          />
+          <path
+            className={"logoSection"}
+            d="M364.4,39.7h-9.1v10.5c0,3.2,1.7,4.7,4.1,4.7c1.6,0,3.2-0.6,4.4-1.5l1.8,2.8c-1.7,1.2-3.8,2.1-6.5,2.1
+			c-4.7,0-7.5-2.6-7.5-8.1V39.7H347v-3.4h4.6v-6.8h3.7v6.8h9.1V39.7L364.4,39.7z"
+          />
+          <path
+            className={"logoSection"}
+            d="M398.1,32.4c-2.6-1.8-5.8-2.9-9.4-2.9c-4.7,0-8,2.1-8,5.5c0,2.9,2.4,4.4,7.2,5l2.8,0.3c5.4,0.7,10,2.8,10,8.5
+			c0,6.3-5.8,9.7-12.6,9.7c-4.5,0-9.5-1.6-12.5-4.1l2.2-3.2c2.2,1.9,6.3,3.5,10.4,3.5c4.8,0,8.5-1.9,8.5-5.5c0-3-2.7-4.4-7.6-5
+			l-3-0.4c-5.2-0.6-9.4-3.1-9.4-8.5c0-6.1,5.5-9.6,12.2-9.6c4.8,0,8.5,1.4,11.5,3.5L398.1,32.4L398.1,32.4z"
+          />
+          <path
+            className={"logoSection"}
+            d="M419.2,39.7h-9.1v10.5c0,3.2,1.7,4.7,4.1,4.7c1.6,0,3.2-0.6,4.4-1.5l1.8,2.8c-1.7,1.2-3.8,2.1-6.5,2.1
+			c-4.7,0-7.5-2.6-7.5-8.1V39.7h-4.6v-3.4h4.6v-6.8h3.7v6.8h9.1V39.7L419.2,39.7z"
+          />
+          <path
+            className={"logoSection"}
+            d="M443.8,47.1c0,6.4-4.9,11.2-11.4,11.2S421,53.5,421,47.1s4.9-11.2,11.4-11.2S443.8,40.7,443.8,47.1z
+			 M424.8,47.1c0,4.5,3.3,7.8,7.6,7.8s7.6-3.2,7.6-7.8s-3.3-7.8-7.6-7.8S424.8,42.6,424.8,47.1z"
+          />
+          <path
+            className={"logoSection"}
+            d="M461.5,36.6l-0.9,3.7c-1-0.5-2.5-0.8-3.7-0.8c-3.3,0-5.6,2.5-5.6,6.5v12h-3.7V36.3h3.7v2.8
+			c1.5-2.1,3.8-3.3,6.3-3.3C459.1,35.9,460.3,36.1,461.5,36.6L461.5,36.6z"
+          />
+          <path
+            className={"logoSection"}
+            d="M482.6,47.1c0,0.5,0,1-0.1,1.4h-17c0.5,4.5,3.6,6.7,7.3,6.7c2.5,0,4.8-1,6.7-2.6l2,2.5
+			c-2.7,2.5-5.7,3.3-8.9,3.3c-6.4,0-11-4.5-11-11.2s4.5-11.2,10.7-11.2S482.6,40.5,482.6,47.1L482.6,47.1z M465.6,45.5h13.2
+			c-0.5-3.8-2.9-6.3-6.4-6.3C468.6,39.2,466.2,41.8,465.6,45.5L465.6,45.5z"
+          />
+        </g>
+      </g>
+    </LogoBase>
+  );
+};
+
+export default StorageEnterpriseOS;

src/components/ApplicationLogo/Logos/Storage/StorageEnterpriseOSVertical.tsx

@@ -0,0 +1,183 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2024 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const StorageEnterpriseOSVertical: FC<SVGProps<any> & LogoBaseProps> = ({
+  inverse,
+  onClick,
+}) => {
+  return (
+    <LogoBase viewBox="0 0 252.6 117.4" inverse={inverse} onClick={onClick}>
+      <g id="Group_16740">
+        <g id="Group_1082">
+          <rect
+            id="Rectangle_674"
+            x="28.6"
+            y="0.3"
+            className={"logoSection"}
+            width="4.9"
+            height="14.6"
+          />
+          <path
+            id="Path_87"
+            className={"logoSection"}
+            d="M22.6,0.5l-10,6.1c-0.1,0.1-0.3,0.1-0.5,0l-10-6.1C1.9,0.3,1.6,0.3,1.4,0.3h0
+			C0.6,0.3,0,0.9,0,1.6v13.2h4.9V8.5C4.9,8.3,5.1,8,5.4,8c0.1,0,0.2,0,0.3,0.1l5.6,3.4c0.6,0.3,1.2,0.4,1.8,0L19,8.1
+			c0.2-0.1,0.5-0.1,0.7,0.2c0,0.1,0.1,0.2,0.1,0.3v6.3h4.9V1.6c0-0.8-0.6-1.4-1.4-1.4h0C23.1,0.3,22.8,0.3,22.6,0.5L22.6,0.5
+			L22.6,0.5z"
+          />
+          <path
+            id="Path_88"
+            className={"logoSection"}
+            d="M58.1,0.3h-5v6.6c0,0.3-0.2,0.5-0.5,0.5c-0.1,0-0.2,0-0.2-0.1l-13-6.9c-0.2-0.1-0.4-0.2-0.7-0.2
+			l0,0c-0.8,0-1.4,0.6-1.4,1.4v13.2h5V8.2c0-0.3,0.2-0.5,0.5-0.5c0.1,0,0.2,0,0.2,0.1l13,6.9c0.2,0.1,0.4,0.2,0.7,0.2l0,0
+			c0.8,0,1.4-0.6,1.4-1.4L58.1,0.3L58.1,0.3z"
+          />
+        </g>
+        <path
+          id="Path_89"
+          className={"logoSection"}
+          d="M62,14.8V0.3h2.3v14.6L62,14.8L62,14.8z"
+        />
+        <path
+          id="Path_90"
+          className={"logoSection"}
+          d="M77.7,15.1c-6.1,0-10.4-2.9-10.4-7.5S71.6,0,77.7,0s10.5,2.9,10.5,7.6S83.9,15.1,77.7,15.1z
+		 M77.7,1.9c-4.5,0-8,2-8,5.6s3.5,5.6,8,5.6s8.1-2,8.1-5.6C85.7,3.9,82.2,1.9,77.7,1.9L77.7,1.9z"
+        />
+      </g>
+      <g>
+        <path
+          className={"logoApplicationName"}
+          d="M23.8,58.9H0V27.1h23.6v5.8H6.3v7h16.5v5.8H6.3v7.3h17.4V58.9z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M49.9,44.9v14H44V46.8c0-3.2-1.6-4.9-4.3-4.9c-2.5,0-4.7,1.7-4.7,5v12.1h-5.9v-22h5.8v2.6c1.6-2.3,4-3.2,6.5-3.2
+		C46.4,36.3,49.9,39.8,49.9,44.9z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M71.1,42.2h-8v8c0,2.8,1.5,3.8,3.3,3.8c1.4,0,2.9-0.7,4.1-1.4l2.2,4.6c-1.9,1.3-4.2,2.3-7.3,2.3c-5.5,0-8.2-3.1-8.2-8.8
+		v-8.5h-4.2v-5.3h4.2v-6.5h5.9v6.5h8V42.2z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M95.8,47.9c0,0.7-0.1,1.5-0.1,2H80.1c0.6,3.2,2.9,4.6,5.7,4.6c1.9,0,4-0.8,5.6-2.1l3.5,3.8c-2.5,2.3-5.7,3.3-9.4,3.3
+		C78.7,59.5,74,54.9,74,48s4.6-11.7,11.1-11.7S95.8,41,95.8,47.9z M80.1,45.8h9.8c-0.6-2.8-2.2-4.4-4.8-4.4
+		C82.3,41.4,80.6,43.1,80.1,45.8L80.1,45.8z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M115,36.8l-0.9,5.9c-1-0.4-2.4-0.7-3.6-0.7c-2.8,0-4.6,1.7-4.6,5v12H100v-22h5.8v2.4c1.4-2.1,3.5-3,6.2-3
+		C113.2,36.3,114.2,36.5,115,36.8L115,36.8z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M141.5,47.9c0,6.6-4.6,11.6-10.7,11.6c-3,0-5.1-1.2-6.5-2.9V68h-5.9V36.9h5.8v2.4c1.4-1.8,3.6-3,6.6-3
+		C136.9,36.3,141.5,41.3,141.5,47.9L141.5,47.9z M124,47.9c0,3.5,2.3,6.1,5.7,6.1s5.7-2.7,5.7-6.1s-2.2-6.1-5.7-6.1
+		S124,44.4,124,47.9z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M160.7,36.8l-0.9,5.9c-1-0.4-2.4-0.7-3.6-0.7c-2.8,0-4.6,1.7-4.6,5v12h-5.9v-22h5.8v2.4c1.4-2.1,3.5-3,6.2-3
+		C158.9,36.3,159.9,36.5,160.7,36.8L160.7,36.8z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M170.8,29.7c0,2.1-1.7,3.8-3.8,3.8s-3.8-1.6-3.8-3.8s1.6-3.8,3.8-3.8S170.8,27.6,170.8,29.7z M170,58.9h-5.9v-22h5.9V58.9z
+		"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M191.3,43c-1.8-0.9-4.6-1.8-7-1.8c-2.2,0-3.4,0.8-3.4,2c0,1.3,1.6,1.6,3.6,1.9l2,0.3c4.8,0.7,7.4,2.9,7.4,6.6
+		c0,4.5-3.7,7.5-10.1,7.5c-3,0-6.9-0.6-9.8-2.6l2.3-4.5c1.9,1.2,4.2,2.2,7.5,2.2c2.8,0,4.1-0.8,4.1-2.1c0-1.1-1.1-1.7-3.7-2
+		l-1.8-0.2c-5.1-0.7-7.6-2.9-7.6-6.7c0-4.5,3.5-7.2,9.3-7.2c3.5,0,6.3,0.7,9.2,2.1L191.3,43L191.3,43z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="M218.3,47.9c0,0.7-0.1,1.5-0.1,2h-15.6c0.6,3.2,2.9,4.6,5.7,4.6c1.9,0,4-0.8,5.6-2.1l3.5,3.8c-2.5,2.3-5.7,3.3-9.4,3.3
+		c-6.8,0-11.4-4.6-11.4-11.5s4.6-11.7,11.1-11.7S218.3,41,218.3,47.9L218.3,47.9z M202.6,45.8h9.8c-0.6-2.8-2.2-4.4-4.8-4.4
+		C204.8,41.4,203.1,43.1,202.6,45.8L202.6,45.8z"
+        />
+        <path
+          className={"logoSection"}
+          d="M33.1,92c0,9.5-6.9,16.4-16.5,16.4S0.2,101.5,0.2,92s6.9-16.4,16.5-16.4S33.1,82.5,33.1,92L33.1,92z M4.4,92
+		c0,7.5,5.3,12.6,12.3,12.6S29,99.5,29,92s-5.3-12.6-12.3-12.6S4.4,84.5,4.4,92z"
+        />
+        <path
+          className={"logoSection"}
+          d="M59.1,97.1c0,6.5-4.8,11.2-10.8,11.2c-3.4,0-5.9-1.3-7.6-3.3v2.9h-3.7V75.2h3.7v14c1.7-2,4.2-3.3,7.6-3.3
+		C54.3,85.9,59.1,90.6,59.1,97.1z M40.4,97.1c0,4.4,3,7.8,7.4,7.8s7.4-3.5,7.4-7.8s-3-7.8-7.4-7.8S40.4,92.7,40.4,97.1z"
+        />
+        <path
+          className={"logoSection"}
+          d="M67.3,111.3c0,4-2.2,6.1-5.6,6.1c-1.1,0-2.3-0.3-3.1-0.7l0.9-3.2c0.6,0.2,1.2,0.4,1.9,0.4
+		c1.3,0,2.2-0.8,2.2-2.8V86.3h3.7V111.3L67.3,111.3z M68.1,78.8c0,1.5-1.2,2.6-2.7,2.6s-2.6-1.1-2.6-2.6s1.1-2.7,2.6-2.7
+		S68.1,77.2,68.1,78.8z"
+        />
+        <path
+          className={"logoSection"}
+          d="M92.7,97.1c0,0.5-0.1,1-0.1,1.4h-17c0.5,4.5,3.6,6.7,7.3,6.7c2.5,0,4.8-1,6.7-2.6l2,2.6
+		c-2.7,2.5-5.7,3.3-8.9,3.3c-6.4,0-11-4.5-11-11.2s4.5-11.2,10.7-11.2S92.7,90.5,92.7,97.1L92.7,97.1z M75.7,95.5h13.2
+		c-0.4-3.8-2.9-6.3-6.4-6.3C78.6,89.2,76.3,91.8,75.7,95.5L75.7,95.5z"
+        />
+        <path
+          className={"logoSection"}
+          d="M114.8,89.3l-2.4,2.5c-1.6-1.6-3.4-2.4-5.7-2.4c-4.2,0-7.3,3.2-7.3,7.8s3.2,7.8,7.3,7.8c2.3,0,4.3-1,5.8-2.5
+		l2.3,2.6c-1.9,2.2-4.8,3.4-8,3.4c-6.7,0-11.2-4.8-11.2-11.2s4.5-11.2,11.2-11.2C109.9,85.9,112.8,87.1,114.8,89.3L114.8,89.3z"
+        />
+        <path
+          className={"logoSection"}
+          d="M134.4,89.7h-9.1v10.5c0,3.2,1.7,4.7,4.1,4.7c1.6,0,3.2-0.6,4.4-1.5l1.8,2.8c-1.7,1.2-3.8,2.1-6.5,2.1
+		c-4.7,0-7.5-2.6-7.5-8.1V89.7H117v-3.4h4.6v-6.8h3.7v6.8h9.1V89.7L134.4,89.7z"
+        />
+        <path
+          className={"logoSection"}
+          d="M168.1,82.4c-2.6-1.8-5.8-2.9-9.4-2.9c-4.7,0-8,2.1-8,5.5c0,2.9,2.4,4.4,7.2,5l2.8,0.3c5.4,0.7,10,2.8,10,8.5
+		c0,6.3-5.8,9.7-12.6,9.7c-4.5,0-9.5-1.6-12.6-4.1l2.2-3.2c2.2,1.9,6.3,3.5,10.4,3.5c4.8,0,8.5-1.9,8.5-5.5c0-3-2.7-4.4-7.6-5
+		l-3-0.4c-5.2-0.6-9.4-3.1-9.4-8.5c0-6.1,5.5-9.6,12.2-9.6c4.8,0,8.5,1.4,11.5,3.5L168.1,82.4L168.1,82.4z"
+        />
+        <path
+          className={"logoSection"}
+          d="M189.2,89.7h-9.1v10.5c0,3.2,1.7,4.7,4.1,4.7c1.6,0,3.2-0.6,4.4-1.5l1.8,2.8c-1.7,1.2-3.8,2.1-6.5,2.1
+		c-4.7,0-7.5-2.6-7.5-8.1V89.7h-4.6v-3.4h4.6v-6.8h3.7v6.8h9.1V89.7L189.2,89.7z"
+        />
+        <path
+          className={"logoSection"}
+          d="M213.8,97.1c0,6.4-4.9,11.2-11.4,11.2S191,103.5,191,97.1s4.9-11.2,11.4-11.2S213.8,90.7,213.8,97.1z
+		 M194.8,97.1c0,4.5,3.3,7.8,7.6,7.8s7.6-3.2,7.6-7.8s-3.3-7.8-7.6-7.8S194.8,92.6,194.8,97.1z"
+        />
+        <path
+          className={"logoSection"}
+          d="M231.5,86.6l-0.9,3.7c-1-0.6-2.5-0.8-3.7-0.8c-3.3,0-5.6,2.5-5.6,6.5v12h-3.7V86.3h3.7v2.8
+		c1.5-2.1,3.8-3.3,6.3-3.3C229.1,85.9,230.3,86.1,231.5,86.6z"
+        />
+        <path
+          className={"logoSection"}
+          d="M252.6,97.1c0,0.5-0.1,1-0.1,1.4h-17c0.5,4.5,3.6,6.7,7.3,6.7c2.5,0,4.8-1,6.7-2.6l2,2.6
+		c-2.7,2.5-5.7,3.3-8.9,3.3c-6.4,0-11-4.5-11-11.2s4.5-11.2,10.7-11.2S252.6,90.5,252.6,97.1L252.6,97.1z M235.6,95.5h13.2
+		c-0.4-3.8-2.9-6.3-6.4-6.3C238.6,89.2,236.2,91.8,235.6,95.5L235.6,95.5z"
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default StorageEnterpriseOSVertical;

src/components/ApplicationLogo/Logos/SubnetOPS/SubnetOPS.tsx

@@ -0,0 +1,91 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const DirectPV: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 665.85156 145.5" inverse={inverse} onClick={onClick}>
+      <g>
+        <rect
+          className={"logoSection"}
+          x="67.37841"
+          y=".72967"
+          width="11.2565"
+          height="32.97504"
+        />
+        <path
+          className={"logoSection"}
+          d="m53.83768,1.04115l-22.84946,13.95519c-.32497.19877-.73368.19877-1.05894,0L7.07897,1.04115c-.49161-.30001-1.05636-.45948-1.63315-.45948h-.02811c-1.73067,0-3.13293,1.40226-3.13293,3.13293v29.99011s11.24934,0,11.24934,0v-14.23111c0-.87853.96228-1.41832,1.71202-.95998l12.80533,7.83389c1.26229.7724,2.84639.78674,4.12331.03872l13.51263-7.92568c.74975-.43998,1.69453.10067,1.69453.97031v14.27385s11.24934,0,11.24934,0V3.7146c0-1.73067-1.40226-3.13293-3.13293-3.13293h-.02811c-.57536,0-1.14097.15861-1.63258.45948Z"
+        />
+        <path
+          className={"logoSection"}
+          d="m134.87128.72164h-11.41598s0,15.13144,0,15.13144c0,.8487-.90435,1.39193-1.65409.99297L92.2161,1.08934c-.45289-.2415-.95912-.3677-1.47224-.3677h-.02008c-1.73067,0-3.13293,1.40226-3.13293,3.13293v29.85014s11.32505,0,11.32505,0v-14.88936c0-.84812.90262-1.39107,1.65265-.99354l29.70271,15.75412c.45202.23978.95568.36541,1.46822.36541h0c1.73067,0,3.13293-1.40226,3.13293-3.13293V.72164s-.00114,0-.00114,0Z"
+        />
+        <path
+          className={"logoSection"}
+          d="m144.00791,33.69667V.72164h5.23446v32.97504h-5.23446Z"
+        />
+        <path
+          className={"logoSection"}
+          d="m179.38707,34.41831c-13.93426,0-23.8189-6.61032-23.8189-17.20887C155.56787,6.66969,165.51219,0,179.38707,0c13.8746,0,23.87856,6.60946,23.87856,17.20887,0,10.59941-9.76591,17.20944-23.87856,17.20944Zm0-30.01248c-10.36107,0-18.34066,4.52572-18.34066,12.80304,0,8.33698,7.97959,12.80218,18.34066,12.80218,10.36107,0,18.40032-4.46606,18.40032-12.80218,0-8.27732-8.03927-12.80304-18.40032-12.80304Z"
+        />
+      </g>
+      <g>
+        <path
+          className={"logoApplicationName"}
+          d="m54.1377,87.12884c-5.87305-3.63086-13.02734-6.35352-21.1958-6.35352-8.38232,0-14.30859,3.30957-14.30859,8.96875,0,5.5,6.45996,7.15527,15.42969,8.64941l4.21777.69434c13.34766,2.18945,23.81201,7.90137,23.81201,20.92871,0,16.49805-14.52197,24.34668-30.59277,24.34668-11.31836,0-23.4917-3.31055-31.5-9.77051l7.74121-12.0127c5.39258,4.32422,14.20215,8.06152,23.8125,8.06152,8.27539,0,14.68213-3.25684,14.68213-9.02246,0-5.17969-5.4458-7.10156-15.85693-8.75684l-4.75146-.74707c-13.1875-2.08203-22.79785-7.90137-22.79785-21.40918,0-15.59082,13.88135-23.70605,29.79199-23.70605,10.46436,0,19.16699,2.34961,28.56396,7.95508l-7.04785,12.17383Z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="m138.80615,113.18255c0,20.66211-13.1875,31.18066-32.19482,31.18066s-32.19434-10.51855-32.19434-31.18066v-44.90137h14.94922v44.1543c0,12.28027,6.94092,17.67188,17.24512,17.67188s17.24512-5.3916,17.24512-17.67188v-44.1543h14.94971v44.90137Z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="m185.45703,68.28118c17.40527,0,28.35059,6.46094,28.35059,20.71582,0,7.52832-4.5918,13.56152-10.83838,15.85742,6.83398,2.29492,12.43994,8.70215,12.43994,16.76465,0,14.36133-10.19775,21.40918-28.13672,21.40918h-32.35449v-74.74707h30.53906Zm-15.64307,13.13477v17.45801h15.26953c7.42139,0,13.1875-1.54785,13.1875-8.80859,0-7.04785-5.87305-8.64941-13.24072-8.64941h-15.21631Zm0,30.53906v17.93945l16.71094.05273c8.22217,0,13.40088-1.92188,13.40088-9.07617,0-6.99414-5.17871-8.91602-13.40088-8.91602h-16.71094Z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="m295.64355,143.02825h-13.98828l-37.90723-49.91992-.05322,49.91992h-14.896v-74.74707h13.93457l37.96094,49.9209v-49.9209h14.94922v74.74707Z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="m368.45557,143.02825h-55.84619v-74.74707h55.41895v13.66797h-40.52295v16.55176h38.6543v13.66797h-38.6543v17.19141h40.9502v13.66797Z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="m438.17188,82.21673h-23.17139v60.81152h-14.896v-60.81152h-23.17139v-13.93555h61.23877v13.93555Z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="m523.16113,105.65521c0,22.42383-16.44434,38.22754-38.28076,38.22754s-38.28125-15.80371-38.28125-38.22754,16.44434-38.22754,38.28125-38.22754,38.28076,15.80371,38.28076,38.22754Zm-69.78125,0c0,19.06055,13.7749,31.92676,31.50049,31.92676,17.67236,0,31.44678-12.86621,31.44678-31.92676s-13.77441-31.92773-31.44678-31.92773c-17.72559,0-31.50049,12.86719-31.50049,31.92773Z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="m547.49512,112.59564v30.43262h-6.51367v-74.74707h27.76318c16.49756,0,26.42822,8.16895,26.42822,22.15723s-9.93066,22.15723-26.42822,22.15723h-21.24951Zm0-38.17383v31.98047h21.08936c12.49316,0,19.80762-5.39258,19.80762-15.96387s-7.31445-16.0166-19.80762-16.0166h-21.08936Z"
+        />
+        <path
+          className={"logoApplicationName"}
+          d="m660.67285,80.98821c-5.81934-4.11035-13.56104-7.31445-23.38525-7.31445-12.0127,0-20.82227,5.55273-20.82227,14.89648,0,7.4209,5.49951,11.95898,18.25977,13.40039l8.16895.9082c13.29395,1.49512,22.95752,6.72656,22.95752,19.16699,0,14.52246-13.24072,21.7832-29.36475,21.7832-11.21191,0-22.31689-4.11133-28.9375-9.34375l3.57715-5.17871c5.23242,4.16504,14.94922,8.3291,25.30713,8.3291,12.65332,0,22.6377-4.96484,22.6377-15.05566,0-8.11523-6.51367-12.06641-18.95361-13.45508l-8.48926-.96094c-13.66797-1.54785-21.94336-7.6875-21.94336-19.16699,0-13.77441,12.27979-21.5166,27.65625-21.5166,11.58545,0,20.23486,3.63086,26.69531,8.22266l-3.36377,5.28516Z"
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default DirectPV;

src/components/ApplicationLogo/Logos/VMBroker/VMBroker.tsx

@@ -0,0 +1,86 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, SVGProps } from "react";
+import LogoBase from "../LogoBase/LogoBase";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+
+const VMBroker: FC<SVGProps<any> & LogoBaseProps> = ({ inverse, onClick }) => {
+  return (
+    <LogoBase viewBox="0 0 189.7 49.96" inverse={inverse} onClick={onClick}>
+      <g>
+        <g>
+          <rect
+            x="21.92"
+            y=".09"
+            width="3.8"
+            height="11.1"
+            className="logoSection"
+          />
+          <path
+            d="m17.33.29l-7.6,4.6c-.1.1-.2.1-.4,0L1.73.29c-.2-.1-.4-.2-.5-.2h0C.62.09.12.59.12,1.09v10h3.8v-4.7c0-.2.2-.4.4-.4q.1,0,.2.1l4.3,2.6c.4.3,1,.3,1.4,0l4.4-2.6c.2-.1.4,0,.5.1,0,.1.1.1.1.2v4.8h3.8V1.09c0-.6-.5-1-1-1h0c-.3,0-.5.1-.7.2Z"
+            className="logoSection"
+          />
+          <path
+            d="m44.42.09h-3.8v5.1c0,.2-.2.4-.4.4h-.2L30.12.19c-.1-.1-.3-.1-.5-.1h0c-.6,0-1,.5-1,1v10h3.8v-5c0-.2.2-.4.4-.4h.2l9.9,5.3c.2.1.3.1.5.1h0c.6,0,1-.5,1-1V.09Z"
+            className="logoSection"
+          />
+        </g>
+        <path d="m47.33,11.2V.1h1.8v11.1h-1.8Z" className="logoSection" />
+        <path
+          d="m59.33,11.4c-4.7,0-8-2.2-8-5.7s3.3-5.7,8-5.7,8,2.2,8,5.7-3.3,5.7-8,5.7Zm0-10c-3.5,0-6.2,1.5-6.2,4.2s2.7,4.3,6.1,4.3,6.1-1.5,6.1-4.3c.1-2.7-2.6-4.2-6-4.2Z"
+          className="logoSection"
+        />
+      </g>
+      <g>
+        <path
+          d="m21.7,23.5l-8.2,21.8h-5.3L0,23.5h4.6l6.3,17.4,6.3-17.4h4.5Z"
+          className={"logoApplicationName"}
+        />
+        <path
+          d="m48.6,23.5v21.8h-4.3v-16.5l-5.4,14.4h-4.6l-5.4-14.2v16.3h-4.3v-21.8h6.4l5.7,14.7,5.7-14.7s6.2,0,6.2,0Z"
+          className={"logoApplicationName"}
+        />
+        <path
+          d="m51.9,23.5h8.4c2.4,0,4.4.5,5.8,1.4s2.1,2.4,2.1,4.4c0,1.2-.3,2.2-.9,3-.6.8-1.4,1.4-2.4,1.8,1.1.4,2.1,1,2.7,1.9s1,2,1,3.3c0,2.1-.7,3.6-2.1,4.6s-3.3,1.5-5.9,1.5h-8.9v-21.9h.2Zm8.4,2.4h-5.8v7.2h5.9c.8,0,1.5-.1,2.1-.2s1.2-.3,1.7-.6.9-.6,1.2-1.1c.3-.5.4-1.1.4-1.8s-.1-1.3-.4-1.8-.7-.9-1.2-1.1-1.1-.4-1.7-.6c-.7,0-1.4,0-2.2,0Zm.4,9.5h-6.2v7.5h6.2c.9,0,1.6-.1,2.2-.2.6-.1,1.2-.3,1.7-.6s.9-.7,1.1-1.2.4-1.1.4-1.8c0-1.4-.5-2.3-1.4-2.9s-2.3-.8-4-.8Z"
+          className={"logoApplicationName"}
+        />
+        <path
+          d="m73.8,23.5h8.6c2.5,0,4.3.5,5.6,1.6,1.3,1.1,2,2.6,2,4.6s-.7,3.4-2,4.5c-1.4,1.1-3.2,1.7-5.5,1.7h-.4l7.8,9.5h-3.1l-7.7-9.6h-2.8v9.5h-2.5v-21.8Zm8.5,2.4h-6v7.7h6c1.7,0,2.9-.3,3.8-1s1.3-1.6,1.3-2.9-.4-2.2-1.3-2.8-2.1-1-3.8-1Z"
+          className={"logoApplicationName"}
+        />
+        <path
+          d="m104.9,23.2c2.1,0,4.1.5,5.8,1.4,1.7,1,3.1,2.3,4,4,1,1.7,1.5,3.6,1.5,5.8s-.5,4.1-1.5,5.8-2.3,3-4,4-3.6,1.4-5.8,1.4c-1.6,0-3.1-.3-4.5-.8-1.4-.6-2.6-1.3-3.6-2.3s-1.8-2.2-2.3-3.6c-.6-1.4-.9-2.9-.9-4.5s.3-3.1.9-4.5,1.4-2.6,2.3-3.6c1-1,2.2-1.8,3.6-2.3s2.9-.8,4.5-.8Zm0,2.4c-1.2,0-2.4.2-3.4.6-1.1.4-2,1-2.7,1.8-.8.8-1.4,1.7-1.8,2.8-.4,1.1-.7,2.3-.7,3.6s.2,2.5.7,3.6c.4,1.1,1,2,1.8,2.8s1.7,1.4,2.7,1.8c1.1.4,2.2.6,3.4.6,1.6,0,3.1-.4,4.4-1.1,1.3-.7,2.3-1.8,3.1-3.1s1.1-2.9,1.1-4.6-.4-3.2-1.1-4.6-1.8-2.4-3.1-3.1c-1.3-.7-2.8-1.1-4.4-1.1Z"
+          className={"logoApplicationName"}
+        />
+        <path
+          d="m135.9,45.3l-9.6-9.8h-2.6v9.8h-2.5v-21.8h2.5v9.7h2.6l9.1-9.7h3.2l-10.3,10.7,10.9,11.1h-3.3Z"
+          className={"logoApplicationName"}
+        />
+        <path
+          d="m158.2,43v2.4h-15.4v-21.9h15.2v2.4h-12.7v7.3h12.3v2.3h-12.3v7.5h12.9Z"
+          className={"logoApplicationName"}
+        />
+        <path
+          d="m163.8,23.5h8.6c2.5,0,4.3.5,5.6,1.6s2,2.6,2,4.6-.7,3.4-2,4.5c-1.4,1.1-3.2,1.7-5.5,1.7h-.4l7.8,9.5h-3.1l-7.7-9.5h-2.8v9.5h-2.5v-21.9Zm8.6,2.4h-6v7.7h6c1.7,0,2.9-.3,3.8-1s1.3-1.6,1.3-2.9-.4-2.2-1.3-2.8-2.2-1-3.8-1Z"
+          className={"logoApplicationName"}
+        />
+      </g>
+    </LogoBase>
+  );
+};
+
+export default VMBroker;

src/components/Autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,228 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { useState } from "react";
+import { Meta, Story } from "@storybook/react";
+
+import Autocomplete from "./Autocomplete";
+import { AutocompleteProps } from "./Autocomplete.types";
+
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import GlobalStyles from "../GlobalStyles/GlobalStyles";
+import FormLayout from "../FormLayout/FormLayout";
+import DownloadIcon from "../Icons/DownloadIcon";
+import UploadIcon from "../Icons/UploadIcon";
+import UsersIcon from "../Icons/UsersIcon";
+import { SelectorType } from "../../global/global.types";
+import TestIcon from "../../utils/TestIcon";
+
+export default {
+  title: "MDS/Forms/Autocomplete",
+  component: Autocomplete,
+  argTypes: {},
+} as Meta<typeof Autocomplete>;
+
+const Template: Story<AutocompleteProps> = ({
+  label,
+  required,
+  tooltip,
+  disabled,
+  options,
+  placeholder,
+  displayDropArrow,
+}) => {
+  const [AutocompleteedValue, setAutocompleteedValue] = useState<string>(
+    placeholder ? "" : "value1",
+  );
+
+  let useOpts: SelectorType[] = [
+    { label: "Option 1", value: "value1" },
+    { label: "Option 2", value: "value2" },
+    {
+      label: "Option 3",
+      value: "value3",
+    },
+    {
+      label: "Disabled Option",
+      value: "value4",
+      disabled: true,
+    },
+  ];
+
+  if (options && options.length > 0) {
+    useOpts = options;
+  }
+
+  return (
+    <StoryThemeProvider>
+      <GlobalStyles />
+      <FormLayout>
+        <Autocomplete
+          id={"story-Autocomplete"}
+          options={useOpts}
+          value={AutocompleteedValue}
+          onChange={(newValue, extraValue) => {
+            setAutocompleteedValue(newValue);
+
+            console.log(extraValue);
+            if (extraValue) {
+              alert(`Extra Value ${JSON.stringify(extraValue)}`);
+            }
+          }}
+          label={label}
+          required={required}
+          tooltip={tooltip}
+          disabled={disabled}
+          placeholder={placeholder}
+          displayDropArrow={displayDropArrow}
+        />
+      </FormLayout>
+    </StoryThemeProvider>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "An Autocomplete box",
+};
+
+export const RequiredTag = Template.bind({});
+RequiredTag.args = {
+  label: "An Autocomplete box",
+  required: true,
+};
+
+export const WithTooltip = Template.bind({});
+WithTooltip.args = {
+  label: "An Autocomplete box",
+  required: true,
+  tooltip: "Tooltip example",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: "An Autocomplete box",
+  disabled: true,
+};
+
+export const FixedLabel = Template.bind({});
+FixedLabel.args = {
+  fixedLabel: "Autocomplete an option to trigger an action",
+  disabled: false,
+};
+
+export const OptionsWithIcons = Template.bind({});
+OptionsWithIcons.args = {
+  options: [
+    { label: "Option 1", value: "value1", icon: <DownloadIcon /> },
+    { label: "Option 2", value: "value2", icon: <UploadIcon /> },
+    { label: "Option 3", value: "value3", icon: <UsersIcon /> },
+  ],
+};
+
+export const ExtraReturnOption = Template.bind({});
+ExtraReturnOption.args = {
+  options: [
+    {
+      label: "Option 1",
+      value: "value1",
+      icon: <DownloadIcon />,
+      extraValue: { anotherVar: "test1" },
+    },
+    {
+      label: "Option 2",
+      value: "value2",
+      icon: <UploadIcon />,
+      extraValue: { anotherVar: "test2" },
+    },
+    {
+      label: "Option 3",
+      value: "value3",
+      icon: <UsersIcon />,
+      extraValue: { anotherVar: "test3" },
+    },
+    { label: "No Extra Value", value: "value4", icon: <UsersIcon /> },
+  ],
+};
+
+export const WithPlaceholder = Template.bind({});
+WithPlaceholder.args = {
+  placeholder: "This Autocomplete has placeholder",
+  options: [
+    {
+      label: "Option 1",
+      value: "value1",
+      icon: <DownloadIcon />,
+      extraValue: { anotherVar: "test1" },
+    },
+    {
+      label: "Option 2",
+      value: "value2",
+      icon: <UploadIcon />,
+      extraValue: { anotherVar: "test2" },
+    },
+    {
+      label: "Option 3",
+      value: "value3",
+      icon: <UsersIcon />,
+      extraValue: { anotherVar: "test3" },
+    },
+    { label: "No Extra Value", value: "value4", icon: <UsersIcon /> },
+  ],
+};
+
+export const NoDropArrow = Template.bind({});
+NoDropArrow.args = {
+  options: [
+    {
+      label: "Option 1",
+      value: "value1",
+      extraValue: { anotherVar: "test1" },
+    },
+    {
+      label: "Option 2",
+      value: "value2",
+      extraValue: { anotherVar: "test2" },
+    },
+    {
+      label: "Option 3",
+      value: "value3",
+      extraValue: { anotherVar: "test3" },
+    },
+    { label: "No Extra Value", value: "value4", icon: <UsersIcon /> },
+  ],
+  displayDropArrow: false,
+};
+
+export const IndicatorInLabel = Template.bind({});
+IndicatorInLabel.args = {
+  options: [
+    {
+      label: "Option with Indicator",
+      value: "value1",
+      indicator: <TestIcon style={{ fill: "#080" }} />,
+    },
+    {
+      label: "Option 2",
+      value: "value2",
+    },
+    {
+      label: "Option 3",
+      value: "value3",
+    },
+    { label: "No Extra Value", value: "value4", icon: <UsersIcon /> },
+  ],
+};

src/components/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,279 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, Fragment, useEffect, useState } from "react";
+import styled from "styled-components";
+import get from "lodash/get";
+import { AutocompleteProps } from "./Autocomplete.types";
+import { InputContainerProps } from "../InputBox/InputBox.types";
+import HelpIcon from "../Icons/HelpIcon";
+import Tooltip from "../Tooltip/Tooltip";
+import InputLabel from "../InputLabel/InputLabel";
+import Box from "../Box/Box";
+import CollapseCaret from "../Icons/CollapseCaret";
+import ExpandCaret from "../Icons/ExpandCaret";
+import DropdownSelector from "../DropdownSelector/DropdownSelector";
+
+const AutocompleteBase = styled.input(({ theme }) => {
+  let borderColor = get(theme, "inputBox.border", "#E2E2E2");
+  let borderHover = get(theme, "inputBox.hoverBorder", "#000110");
+
+  return {
+    display: "flex",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    alignItems: "center",
+    height: 38,
+    width: "100%",
+    padding: "0 35px 0 15px",
+    color: get(theme, "inputBox.color", "#07193E"),
+    fontSize: 13,
+    fontWeight: 600,
+    border: `${borderColor} 1px solid`,
+    borderRadius: 3,
+    outline: "none",
+    transitionDuration: "0.1s",
+    transitionProperty: "border",
+    backgroundColor: get(theme, "inputBox.backgroundColor", "#fff"),
+    userAutocomplete: "none",
+    "&:placeholder": {
+      color: "#858585",
+      opacity: 1,
+      fontWeight: 400,
+    },
+    "&:hover": {
+      borderColor: borderHover,
+    },
+    "&:focus": {
+      borderColor: borderHover,
+    },
+    "&.disabled, &:disabled": {
+      border: get(theme, "inputBox.disabledBorder", "#494A4D"),
+      backgroundColor: get(theme, "inputBox.disabledBackground", "#B4B4B4"),
+      color: get(theme, "inputBox.disabledText", "#E6EBEB"),
+      "&:placeholder": {
+        color: get(theme, "inputBox.disabledPlaceholder", "#E6EBEB"),
+      },
+      "&:hover": {
+        borderColor: get(theme, "inputBox.disabledBorder", "#494A4D"),
+      },
+      "&:focus": {
+        borderColor: get(theme, "inputBox.disabledBorder", "#494A4D"),
+      },
+    },
+    "&.withIcon": {
+      paddingLeft: 38,
+    },
+  };
+});
+
+const InputContainer = styled.div<InputContainerProps>(
+  ({ theme, error, sx }) => ({
+    display: "flex",
+    flexGrow: 1,
+    width: "100%",
+    height: 38,
+    position: "relative",
+    "& .AutocompleteContainer": {
+      width: "100%",
+      flexGrow: 1,
+      position: "relative",
+      minWidth: 80,
+    },
+    "& .tooltipContainer": {
+      marginLeft: 5,
+      display: "flex",
+      alignItems: "center",
+      "& .min-icon": {
+        width: 13,
+      },
+    },
+    "& .overlayArrow": {
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      marginTop: 2,
+      right: 5,
+      "& svg": {
+        width: 26,
+        height: 26,
+        fill: get(theme, "inputBox.color", "#07193E"),
+      },
+    },
+    "& .inputLabel": {
+      marginBottom: error ? 18 : 0,
+    },
+    "& .iconOption": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "absolute",
+      marginLeft: 15,
+      height: 38,
+      "& svg": {
+        width: 16,
+        height: 16,
+      },
+    },
+    ...sx,
+  }),
+);
+
+const Autocomplete: FC<AutocompleteProps> = ({
+  id,
+  label = "",
+  required,
+  className,
+  tooltip = "",
+  noLabelMinWidth = false,
+  value = "",
+  sx,
+  options,
+  onChange,
+  disabled = false,
+  name,
+  placeholder = "",
+  helpTip,
+  helpTipPlacement,
+  displayDropArrow = true,
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [searchBoxVal, setSearchBoxVal] = useState<string>("");
+  const [valueSelected, setValueSelected] = useState<number | null>(null);
+  const [filterVal, setFilterVal] = useState<string>("");
+  const [anchorEl, setAnchorEl] = React.useState<
+    (EventTarget & HTMLDivElement) | null
+  >(null);
+
+  useEffect(() => {
+    if (value !== "") {
+      const index = options.findIndex((option) => option.value === value);
+
+      setValueSelected(index);
+      setSearchBoxVal(options[index]?.label || "");
+    }
+  }, []);
+
+  const filteredOptions = options.filter((item) =>
+    item.label.toLowerCase().includes(filterVal.toLowerCase()),
+  );
+
+  const optionWithIcon =
+    valueSelected !== null &&
+    (options[valueSelected]?.icon || options[valueSelected]?.indicator);
+
+  return (
+    <InputContainer
+      sx={sx}
+      className={`inputItem ${className}`}
+      onKeyDown={() => {
+        if (!isOpen) {
+          setIsOpen(true);
+        }
+      }}
+    >
+      {label !== "" && (
+        <InputLabel
+          htmlFor={id}
+          noMinWidth={noLabelMinWidth}
+          className={"inputLabel"}
+          helpTip={helpTip}
+          helpTipPlacement={helpTipPlacement}
+        >
+          {label}
+          {required ? "*" : ""}
+          {tooltip !== "" && (
+            <Box className={"tooltipContainer"}>
+              <Tooltip tooltip={tooltip} placement="top">
+                <Box className={tooltip}>
+                  <HelpIcon />
+                </Box>
+              </Tooltip>
+            </Box>
+          )}
+        </InputLabel>
+      )}
+
+      <Box
+        id={`${id}-Autocomplete`}
+        className={"AutocompleteContainer"}
+        onClick={(e) => {
+          if (!disabled) {
+            setIsOpen(!isOpen);
+            setAnchorEl(e.currentTarget);
+          }
+        }}
+      >
+        {optionWithIcon && (
+          <Box className={"iconOption"}>
+            {options[valueSelected]?.indicator
+              ? options[valueSelected]?.indicator
+              : options[valueSelected].icon}
+          </Box>
+        )}
+        <AutocompleteBase
+          disabled={disabled}
+          id={id}
+          name={name}
+          value={searchBoxVal}
+          onChange={(e) => {
+            setSearchBoxVal(e.target.value);
+            setFilterVal(e.target.value);
+          }}
+          placeholder={placeholder}
+          className={`${optionWithIcon ? "withIcon" : ""}`}
+        />
+        {displayDropArrow && (
+          <Box className={"overlayArrow"}>
+            <Fragment>{isOpen ? <CollapseCaret /> : <ExpandCaret />}</Fragment>
+          </Box>
+        )}
+        {isOpen && (
+          <DropdownSelector
+            id={`${id}-options-Autocomplete`}
+            options={filteredOptions}
+            selectedOption={value}
+            onSelect={(nValue, extraValue, label, id) => {
+              setSearchBoxVal(label || "");
+              setFilterVal("");
+              if (id !== undefined) {
+                setValueSelected(id);
+              }
+              onChange(nValue, extraValue);
+            }}
+            hideTriggerAction={() => {
+              setIsOpen(false);
+              if (
+                (value !== "" && searchBoxVal === "") ||
+                filteredOptions.length === 0
+              ) {
+                const option = options.find((option) => option.value === value);
+
+                setSearchBoxVal(option?.label || "");
+              }
+            }}
+            open={isOpen}
+            anchorEl={anchorEl}
+            useAnchorWidth
+          />
+        )}
+      </Box>
+    </InputContainer>
+  );
+};
+
+export default Autocomplete;

src/components/Autocomplete/Autocomplete.types.ts

@@ -0,0 +1,38 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { CSSObject } from "styled-components";
+import { SelectorType } from "../../global/global.types";
+import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";
+
+export interface AutocompleteProps {
+  options: SelectorType[];
+  value?: string;
+  id: string;
+  name?: string;
+  required?: boolean;
+  className?: string;
+  disabled?: boolean;
+  displayDropArrow?: boolean;
+  label?: string;
+  tooltip?: string;
+  noLabelMinWidth?: boolean;
+  placeholder?: string;
+  onChange: (newValue: string, extraValue?: any) => void;
+  sx?: CSSObject;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: CommonHelpTipPlacement;
+}

src/components/BackLink/BackLink.stories.tsx

@@ -0,0 +1,43 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+
+import BackLink from "./BackLink";
+import { BackLinkProps } from "./BackLink.types";
+
+import TestIcon from "../../utils/TestIcon";
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import GlobalStyles from "../GlobalStyles/GlobalStyles";
+
+export default {
+  title: "MDS/Layout/BackLink",
+  component: BackLink,
+  argTypes: {},
+} as Meta<typeof BackLink>;
+
+const Template: Story<BackLinkProps> = (args) => (
+  <StoryThemeProvider>
+    <GlobalStyles />
+    <BackLink {...args} onClick={() => alert("You clicked me!")} />
+  </StoryThemeProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Click here to go back",
+};

src/components/BackLink/BackLink.tsx

@@ -0,0 +1,75 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC } from "react";
+import styled from "styled-components";
+import get from "lodash/get";
+import { BackLinkProps } from "./BackLink.types";
+import BackSettingsIcon from "../Icons/BackSettingsIcon";
+
+const BackLinkBasic = styled.button<BackLinkProps>(({ theme, sx }) => ({
+  display: "flex",
+  alignItems: "center",
+  textDecoration: "none",
+  justifyContent: "center",
+  flexDirection: "row",
+  height: "30px",
+  paddingLeft: 0,
+  background: "transparent",
+  border: 0,
+  cursor: "pointer",
+  "& .label": {
+    color: get(theme, "backLink.color", "#073052"),
+    fontSize: 14,
+    fontWeight: 600,
+    lineHeight: 1,
+    paddingTop: 1,
+    marginRight: 10,
+  },
+  "&:hover .icon": {
+    background: get(theme, "backLink.hover", "#eaedee"),
+    borderRadius: "2px",
+  },
+  "& .icon": {
+    lineHeight: 1,
+    marginRight: "3px",
+    display: "flex",
+    alignItems: "center",
+    width: "28px",
+    height: "30px",
+
+    "& .min-icon": {
+      width: "17px",
+      height: "11px",
+      margin: "auto",
+      color: get(theme, "backLink.arrow", "#081C42"),
+    },
+  },
+  ...sx,
+}));
+
+const BackLink: FC<BackLinkProps> = ({ label, sx, ...props }) => {
+  return (
+    <BackLinkBasic sx={sx} {...props}>
+      <span className={"icon"}>
+        <BackSettingsIcon />
+      </span>
+      <span className={"label"}>{label}</span>
+    </BackLinkBasic>
+  );
+};
+
+export default BackLink;

src/components/BackLink/BackLink.types.ts

@@ -0,0 +1,24 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { CSSProperties } from "styled-components";
+
+export interface BackLinkProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  sx?: CSSProperties;
+  label?: string;
+}

src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,78 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+
+import Badge from "./Badge";
+import { BadgeProps } from "./Badge.types";
+
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import GlobalStyles from "../GlobalStyles/GlobalStyles";
+import DownloadIcon from "../Icons/DownloadIcon";
+
+export default {
+  title: "MDS/Information/Badge",
+  component: Badge,
+  argTypes: {},
+} as Meta<typeof Badge>;
+
+const Template: Story<BadgeProps> = (args) => (
+  <StoryThemeProvider>
+    <GlobalStyles />
+    <Badge {...args} onClick={() => alert("You clicked me!")}>
+      <DownloadIcon />
+    </Badge>
+  </StoryThemeProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  badgeContent: 5,
+};
+
+export const DotOnly = Template.bind({});
+DotOnly.args = {
+  badgeContent: 5,
+  dotOnly: true,
+};
+
+export const Warn = Template.bind({});
+Warn.args = { badgeContent: 5, color: "warn" };
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  badgeContent: 5,
+  color: "secondary",
+};
+
+export const Alert = Template.bind({});
+Alert.args = {
+  badgeContent: 5,
+  color: "alert",
+};
+
+export const Ok = Template.bind({});
+Ok.args = {
+  badgeContent: 5,
+  color: "ok",
+};
+
+export const Grey = Template.bind({});
+Grey.args = {
+  badgeContent: 5,
+  color: "grey",
+};

src/components/Badge/Badge.tsx

@@ -0,0 +1,114 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, Fragment, HTMLAttributes } from "react";
+import styled from "styled-components";
+import { BadgeConstruct, BadgeProps } from "./Badge.types";
+import { lightColors } from "../../global/themes";
+import get from "lodash/get";
+
+const BadgeParent = styled.span<
+  HTMLAttributes<HTMLDivElement> & BadgeConstruct
+>(
+  ({
+    theme,
+    sx,
+    verticalPosition,
+    horizontalPosition,
+    color,
+    shape,
+    dotOnly,
+  }) => {
+    let circularRadius = dotOnly ? "100%" : 10;
+
+    return {
+      position: "relative",
+      display: "inline-flex",
+      "& .badgeContent": {
+        fontSize: 10,
+        userSelect: "none",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "absolute",
+        padding: dotOnly ? 0 : "0 6px",
+        borderRadius: shape === "circular" ? circularRadius : 3,
+        right: horizontalPosition === "right" ? 0 : "initial",
+        top: verticalPosition === "top" ? 0 : "initial",
+        left: horizontalPosition === "left" ? 0 : "initial",
+        bottom: verticalPosition === "bottom" ? 0 : "initial",
+        minWidth: !dotOnly ? 20 : 10,
+        width: dotOnly ? 10 : "initial",
+        height: !dotOnly ? 20 : 10,
+        backgroundColor: get(
+          theme,
+          `badge.${color}.backgroundColor`,
+          lightColors.mainBlue,
+        ),
+        color: get(theme, `badge.${color}.textColor`, lightColors.white),
+        fontWeight: "bold",
+        textAlign: "center",
+        zIndex: 1,
+        transform: `scale(1) translate(${
+          horizontalPosition === "right" ? "" : "-"
+        }50%, ${verticalPosition === "bottom" ? "" : "-"}50%)`,
+      },
+      ...sx,
+    };
+  },
+);
+
+const Badge: FC<HTMLAttributes<HTMLSpanElement> & BadgeProps> = ({
+  sx,
+  children,
+  horizontalPosition = "right" as "right" | "left",
+  verticalPosition = "bottom" as "top" | "bottom",
+  color = "default",
+  shape = "circular",
+  dotOnly = false,
+  invisible = false,
+  max = 99,
+  showZero = false,
+  badgeContent = 0,
+  ...props
+}) => {
+  return (
+    <BadgeParent
+      horizontalPosition={horizontalPosition}
+      verticalPosition={verticalPosition}
+      color={color}
+      shape={shape}
+      dotOnly={dotOnly}
+      sx={sx}
+      {...props}
+    >
+      {children}
+      {!invisible &&
+        (badgeContent >= 0 || (showZero && badgeContent === 0)) && (
+          <div className={"badgeContent"}>
+            {!dotOnly ? (
+              <Fragment>
+                {badgeContent > max ? `${max}+` : badgeContent}
+              </Fragment>
+            ) : (
+              ""
+            )}
+          </div>
+        )}
+    </BadgeParent>
+  );
+};
+export default Badge;

src/components/Badge/Badge.types.ts

@@ -0,0 +1,35 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { CSSObject } from "styled-components";
+
+export interface BadgeMain {
+  invisible?: boolean;
+  max?: number;
+  showZero?: boolean;
+  badgeContent?: number;
+}
+
+export interface BadgeConstruct {
+  horizontalPosition?: "left" | "right";
+  verticalPosition?: "bottom" | "top";
+  sx?: CSSObject;
+  color?: "default" | "secondary" | "warn" | "alert" | "ok" | "grey";
+  shape?: "circular" | "rectangular";
+  dotOnly?: boolean;
+}
+
+export type BadgeProps = BadgeMain & BadgeConstruct;

src/components/Box/Box.stories.tsx

@@ -0,0 +1,67 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+
+import Box from "./Box";
+import { BoxProps } from "./Box.types";
+
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import { GlobalStyles } from "../index";
+
+export default {
+  title: "MDS/Layout/Box",
+  component: Box,
+  argTypes: {},
+} as Meta<typeof Box>;
+
+const Template: Story<BoxProps> = (args) => (
+  <StoryThemeProvider>
+    <GlobalStyles />
+    <Box {...args}>Box Content</Box>
+  </StoryThemeProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithBorder = Template.bind({});
+WithBorder.args = {
+  withBorders: true,
+};
+
+export const WithBackgroundColor = Template.bind({});
+WithBackgroundColor.args = {
+  withBorders: true,
+  useBackground: true,
+};
+
+export const WithCustomBorderPadding = Template.bind({});
+WithCustomBorderPadding.args = {
+  withBorders: true,
+  customBorderPadding: "5px 100px",
+};
+
+export const BoxWithCustomStyles = Template.bind({});
+BoxWithCustomStyles.args = {
+  withBorders: true,
+  sx: {
+    color: "#fff",
+    backgroundColor: "#460",
+    borderColor: "#f9a",
+  },
+};

src/components/Box/Box.tsx

@@ -0,0 +1,57 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, HTMLAttributes } from "react";
+import styled from "styled-components";
+import get from "lodash/get";
+import { BoxProps } from "./Box.types";
+
+const BoxParent = styled.div<HTMLAttributes<HTMLDivElement> & BoxProps>(
+  ({ theme, sx, withBorders, customBorderPadding, useBackground }) => {
+    let extraBorders = {};
+
+    if (withBorders) {
+      extraBorders = {
+        border: `${get(theme, "borderColor", "#eaeaea")} 1px solid`,
+        borderRadius: 2,
+        padding: customBorderPadding || 15,
+      };
+    }
+
+    return {
+      backgroundColor: useBackground
+        ? get(theme, "boxBackground", "#FBFAFA")
+        : "transparent",
+      ...extraBorders,
+      ...sx,
+    };
+  },
+);
+
+const Box: FC<HTMLAttributes<HTMLDivElement> & BoxProps> = ({
+  sx,
+  children,
+  customBorderPadding,
+  ...props
+}) => {
+  return (
+    <BoxParent {...props} sx={sx} customBorderPadding={customBorderPadding}>
+      {children}
+    </BoxParent>
+  );
+};
+
+export default Box;

src/components/Box/Box.types.ts

@@ -0,0 +1,26 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { CSSObject } from "styled-components";
+
+export interface BoxProps {
+  sx?: CSSObject;
+  children?: React.ReactNode;
+  withBorders?: boolean;
+  customBorderPadding?: number | string;
+  useBackground?: boolean;
+}

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,90 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Fragment } from "react";
+import { Meta, Story } from "@storybook/react";
+
+import Breadcrumbs from "./Breadcrumbs";
+import { BreadcrumbsProps } from "./Breadcrumbs.types";
+
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import { GlobalStyles } from "../index";
+import Button from "../Button/Button";
+import CopyIcon from "../Icons/CopyIcon";
+
+export default {
+  title: "MDS/Layout/Breadcrumbs",
+  component: Breadcrumbs,
+  argTypes: {},
+} as Meta<typeof Breadcrumbs>;
+
+const Template: Story<BreadcrumbsProps> = (args) => (
+  <StoryThemeProvider>
+    <GlobalStyles />
+    <Breadcrumbs
+      additionalOptions={
+        <Fragment>
+          <Button
+            id={"copy-path"}
+            icon={
+              <CopyIcon
+                style={{
+                  width: "12px",
+                  height: "12px",
+                  fill: "#969FA8",
+                  marginTop: -1,
+                }}
+              />
+            }
+            variant={"regular"}
+            onClick={() => {
+              alert("Copy test");
+            }}
+            style={{
+              width: "28px",
+              height: "28px",
+              color: "#969FA8",
+              border: "#969FA8 1px solid",
+              marginRight: 5,
+            }}
+          />
+        </Fragment>
+      }
+      goBackFunction={() => {
+        alert("Go back!");
+      }}
+    >
+      <a href="#">First Link</a>
+      <span className={"slashSpacingStyle"}>/</span>
+      <a href="#">Second Link</a>
+      <span className={"slashSpacingStyle"}>/</span>
+      <a href="#">Third Link</a>
+      <span className={"slashSpacingStyle"}>/</span>
+      <a href="#">Fourth Link</a>
+      <span className={"slashSpacingStyle"}>/</span>
+      <a href="#">Fifth Link</a>
+      <span className={"slashSpacingStyle"}>/</span>
+      <a href="#">Sixth Link</a>
+      <span className={"slashSpacingStyle"}>/</span>
+      <a href="#">Seventh Link</a>
+      <span className={"slashSpacingStyle"}>/</span>
+      <a href="#">Eighth Link</a>
+    </Breadcrumbs>
+  </StoryThemeProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,110 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC } from "react";
+import get from "lodash/get";
+import {
+  BreadcrumbsContainerProps,
+  BreadcrumbsProps,
+} from "./Breadcrumbs.types";
+import IconButton from "../IconButton/IconButton";
+import styled from "styled-components";
+import BackCaretIcon from "../Icons/BackCaretIcon";
+import Box from "../Box/Box";
+
+const BoxParent = styled.div<BreadcrumbsContainerProps>(({ theme, sx }) => {
+  return {
+    boxSizing: "border-box",
+    flexBasis: "100%",
+    width: "100%",
+    fontSize: 12,
+    color: get(theme, "breadcrumbs.textColor", "#969FA8"),
+    fontWeight: "bold",
+    border: `${get(theme, "breadcrumbs.border", "#eaeaea")} 1px solid`,
+    height: 38,
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: get(theme, "breadcrumbs.backgroundColor", "#FCFCFD"),
+    marginRight: 10,
+    "& a": {
+      textDecoration: "none",
+      color: get(theme, "breadcrumbs.linksColor", "#969FA8"),
+      "&:hover": {
+        textDecoration: "underline",
+      },
+    },
+    "& .min-icon": {
+      width: 16,
+      minWidth: 16,
+    },
+    "& .backButton": {
+      border: `${get(
+        theme,
+        "breadcrumbs.backButton.border",
+        "#EAEDEE",
+      )} 1px solid`,
+      backgroundColor: get(
+        theme,
+        "breadcrumbs.backButton.backgroundColor",
+        "#FFF",
+      ),
+      borderLeft: 0,
+      borderRadius: 0,
+      width: 38,
+      height: 38,
+      marginRight: "10px",
+      "& > svg": {
+        fill: get(theme, "breadcrumbs.textColor", "#969FA8"),
+      },
+    },
+    "& .breadcrumbsList": {
+      textOverflow: "ellipsis" as const,
+      overflow: "hidden" as const,
+      whiteSpace: "nowrap" as const,
+      display: "inline-block" as const,
+      flexGrow: 1,
+      textAlign: "left" as const,
+      marginLeft: 15,
+      marginRight: 10,
+      width: 0, // WA to avoid overflow if child elements in flexbox list.**
+    },
+    "& .slashSpacingStyle": {
+      margin: "0 5px",
+    },
+    ...sx,
+  };
+});
+
+const Breadcrumbs: FC<BreadcrumbsProps> = ({
+  sx,
+  children,
+  additionalOptions,
+  goBackFunction,
+}) => {
+  return (
+    <BoxParent className={"breadcrumbs-bar"} sx={sx}>
+      <IconButton onClick={goBackFunction} className={"backButton"}>
+        <BackCaretIcon />
+      </IconButton>
+      <Box className={"breadcrumbsList"} dir="rtl">
+        {children}
+      </Box>
+      {additionalOptions}
+    </BoxParent>
+  );
+};
+
+export default Breadcrumbs;

src/components/Breadcrumbs/Breadcrumbs.types.ts

@@ -0,0 +1,29 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { CSSObject } from "styled-components";
+
+export interface BreadcrumbsProps {
+  sx?: CSSObject;
+  children: React.ReactNode;
+  additionalOptions?: React.ReactNode;
+  goBackFunction: () => void;
+}
+
+export interface BreadcrumbsContainerProps {
+  sx?: CSSObject;
+}

src/components/Button/Button.stories.tsx

@@ -0,0 +1,115 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+
+import Button from "./Button";
+import { ButtonProps } from "./Button.types";
+
+import TestIcon from "../../utils/TestIcon";
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import GlobalStyles from "../GlobalStyles/GlobalStyles";
+
+export default {
+  title: "MDS/Forms/Button",
+  component: Button,
+  argTypes: {},
+} as Meta<typeof Button>;
+
+const Template: Story<ButtonProps> = (args) => (
+  <StoryThemeProvider>
+    <GlobalStyles />
+    <Button {...args} onClick={() => alert("You clicked me!")} />
+    <br />
+    <Button {...args}>With Children</Button>
+  </StoryThemeProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  disabled: false,
+  label: "Test Button",
+  variant: "regular",
+};
+
+export const CallToAction = Template.bind({});
+CallToAction.args = {
+  disabled: false,
+  label: "Call to Action",
+  variant: "callAction",
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  disabled: false,
+  label: "Secondary",
+  variant: "secondary",
+};
+
+export const Text = Template.bind({});
+Text.args = {
+  disabled: false,
+  label: "Text Button",
+  variant: "text",
+};
+
+export const SubAction = Template.bind({});
+SubAction.args = {
+  disabled: false,
+  label: "Text Button",
+  variant: "subAction",
+};
+
+export const DefaultIcon = Template.bind({});
+DefaultIcon.args = {
+  disabled: false,
+  label: "Test Button",
+  variant: "regular",
+  icon: <TestIcon />,
+};
+
+export const CallToActionIcon = Template.bind({});
+CallToActionIcon.args = {
+  disabled: false,
+  label: "Call to Action",
+  variant: "callAction",
+  icon: <TestIcon />,
+};
+
+export const SecondaryIcon = Template.bind({});
+SecondaryIcon.args = {
+  disabled: false,
+  label: "Secondary",
+  variant: "secondary",
+  icon: <TestIcon />,
+};
+
+export const FullWidth = Template.bind({});
+FullWidth.args = {
+  disabled: false,
+  label: "Test Button",
+  variant: "regular",
+  fullWidth: true,
+  icon: <TestIcon />,
+};
+
+export const IconOnly = Template.bind({});
+IconOnly.args = {
+  disabled: false,
+  variant: "regular",
+  icon: <TestIcon />,
+};

src/components/Button/Button.tsx

@@ -0,0 +1,213 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, Fragment } from "react";
+import get from "lodash/get";
+import styled from "styled-components";
+import { ButtonProps, ConstructProps } from "./Button.types";
+import { breakPoints } from "../../global/utils";
+
+const CustomButton = styled.button<
+  ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & ConstructProps
+>(
+  ({
+    theme,
+    fullWidth,
+    variant,
+    iconLocation,
+    icon,
+    label,
+    collapseOnSmall,
+    parentChildren,
+    sx,
+  }) => {
+    const neatVariant = variant || "regular";
+
+    const buttonLabel =
+      (!label && !parentChildren) || !icon
+        ? {
+            marginRight: 0,
+            marginLeft: 0,
+          }
+        : {
+            marginLeft: iconLocation === "end" ? "0" : "10px",
+            marginRight: iconLocation === "start" ? "0" : "10px",
+          };
+
+    let smallScreenStyles = {};
+
+    if (
+      collapseOnSmall &&
+      icon &&
+      ((label && label.trim() !== "") || parentChildren)
+    ) {
+      smallScreenStyles = {
+        [`@media (max-width: ${get(breakPoints, "md", 0)}px)`]: {
+          padding: "0 14px",
+          "& .button-label": {
+            display: "none",
+          },
+        },
+      };
+    }
+
+    return {
+      borderRadius: 3,
+      cursor: "pointer",
+      width: fullWidth ? "100%" : "initial",
+      height: 39,
+      fontFamily: "'Inter', sans-serif",
+      fontWeight: "400",
+      fontSize: 14,
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      textTransform: neatVariant === "text" ? "uppercase" : "none",
+      margin: 0,
+      padding:
+        (!label || label.trim() === "") && !parentChildren
+          ? "0 14px"
+          : "0 25px",
+      transition: "all 0.2s linear",
+      backgroundColor: get(
+        theme,
+        `buttons.${neatVariant}.enabled.background`,
+        "#fff",
+      ),
+      borderColor: get(theme, `buttons.${neatVariant}.enabled.border`, "#000"),
+      borderWidth: 1,
+      borderStyle: "solid",
+      color: get(theme, `buttons.${neatVariant}.enabled.text`, "#000"),
+      "& .button-label": {
+        whiteSpace: fullWidth ? "normal" : "nowrap",
+        ...buttonLabel,
+      },
+      "& .buttonIcon": {
+        display: "block",
+        height: 14,
+
+        "& > svg": {
+          fill: get(theme, `buttons.${neatVariant}.enabled.text`, "#000"),
+          color: get(theme, `buttons.${neatVariant}.enabled.text`, "#000"),
+          width: 14,
+          height: 14,
+        },
+      },
+      "&:disabled": {
+        cursor: "not-allowed",
+        backgroundColor: get(
+          theme,
+          `buttons.${neatVariant}.disabled.background`,
+          "#fff",
+        ),
+        borderColor: get(
+          theme,
+          `buttons.${neatVariant}.disabled.border`,
+          "#000",
+        ),
+        borderWeight: 1,
+        borderStyle: "solid",
+        color: get(theme, `buttons.${neatVariant}.disabled.text`, "#000"),
+        "& .buttonIcon > svg": {
+          fill: get(theme, `buttons.${neatVariant}.disabled.text`, "#000"),
+          color: get(theme, `buttons.${neatVariant}.disabled.text`, "#000"),
+        },
+      },
+      "&:hover:not(:disabled)": {
+        backgroundColor: get(
+          theme,
+          `buttons.${neatVariant}.hover.background`,
+          "#fff",
+        ),
+        borderColor: get(theme, `buttons.${neatVariant}.hover.border`, "#000"),
+        color: get(theme, `buttons.${neatVariant}.hover.text`, "#000"),
+        "& .buttonIcon > svg": {
+          fill: get(theme, `buttons.${neatVariant}.hover.text`, "#000"),
+          color: get(theme, `buttons.${neatVariant}.hover.text`, "#000"),
+        },
+      },
+      "&:active:not(:disabled)": {
+        backgroundColor: get(
+          theme,
+          `buttons.${neatVariant}.pressed.background`,
+          "#fff",
+        ),
+        borderColor: get(
+          theme,
+          `buttons.${neatVariant}.pressed.border`,
+          "#000",
+        ),
+        color: get(theme, `buttons.${neatVariant}.pressed.text`, "#000"),
+        "& .buttonIcon > svg": {
+          fill: get(theme, `buttons.${neatVariant}.pressed.text`, "#000"),
+          color: get(theme, `buttons.${neatVariant}.pressed.text`, "#000"),
+        },
+      },
+      ...smallScreenStyles,
+      ...sx,
+    };
+  },
+);
+const Button: FC<
+  ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+> = ({
+  label,
+  variant = "regular",
+  icon,
+  iconLocation = "end",
+  onClick,
+  disabled,
+  fullWidth,
+  collapseOnSmall = true,
+  children,
+  className,
+  ...props
+}) => {
+  let iconToPlace: React.ReactNode = null;
+
+  if (icon) {
+    iconToPlace = <span className={"buttonIcon"}>{icon}</span>;
+  }
+
+  return (
+    <CustomButton
+      onClick={onClick}
+      disabled={disabled || false}
+      variant={variant || "regular"}
+      iconLocation={iconLocation || "end"}
+      label={label || ""}
+      fullWidth={fullWidth || false}
+      collapseOnSmall={!!collapseOnSmall}
+      icon={iconToPlace}
+      parentChildren={children || null}
+      className={`${className || ""} button-${variant}`}
+      {...props}
+    >
+      <Fragment>
+        {icon && iconLocation === "start" && iconToPlace}
+        <span className={"button-label"}>
+          {children}
+          {children && label ? " " : ""}
+          {label}
+        </span>
+        {icon && iconLocation === "end" && iconToPlace}
+      </Fragment>
+    </CustomButton>
+  );
+};
+
+export default Button;

src/components/Button/Button.types.ts

@@ -0,0 +1,37 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { MouseEventHandler, ReactNode } from "react";
+import { CSSObject } from "styled-components";
+
+export interface ButtonProps {
+  id: string;
+  name?: string;
+  label?: string;
+  variant?: "regular" | "callAction" | "secondary" | "text" | "subAction";
+  icon?: ReactNode;
+  iconLocation?: "start" | "end";
+  fullWidth?: boolean;
+  disabled?: boolean;
+  collapseOnSmall?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  children?: ReactNode | string;
+  sx?: CSSObject;
+}
+
+export interface ConstructProps {
+  parentChildren: ReactNode | string | undefined;
+}

src/components/Button/__tests__/Button.test.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+import Button from "../Button";
+import TestIcon from "../../../utils/TestIcon";
+
+describe("Running Test for Button", () => {
+  test("Check Button Disabled", () => {
+    render(<Button id="one-button" label="Button" disabled />);
+    expect(screen.getByRole("button")).toHaveProperty("disabled", true);
+  });
+  test("Button contains requested label", () => {
+    render(<Button id="second-button" label="One Test Label" />);
+    expect(screen.getByRole("button").textContent).toContain("One Test Label");
+  });
+  test("Button contains icon at the end", () => {
+    render(
+      <Button id="second-button" label="One Test Label" icon={<TestIcon />} />,
+    );
+    expect(screen.getByRole("button").innerHTML).toContain(
+      '<span class="button-label">One Test Label</span><span class="buttonIcon"><svg xmlns="http://www.w3.org/2000/svg" class="min-icon" fill="currentcolor" viewBox="0 0 256 256"><g><circle cx="128" cy="128" r="128"></circle></g></svg></span>',
+    );
+  });
+  test("Button contains icon at the start", () => {
+    render(
+      <Button
+        id="second-button"
+        label="One Test Label"
+        icon={<TestIcon />}
+        iconLocation={"start"}
+      />,
+    );
+    expect(screen.getByRole("button").innerHTML).toContain(
+      '<span class="buttonIcon"><svg xmlns="http://www.w3.org/2000/svg" class="min-icon" fill="currentcolor" viewBox="0 0 256 256"><g><circle cx="128" cy="128" r="128"></circle></g></svg></span><span class="button-label">One Test Label</span>',
+    );
+  });
+});

src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,58 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+
+import Checkbox from "./Checkbox";
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import GlobalStyles from "../GlobalStyles/GlobalStyles";
+import { CheckboxProps } from "./Checkbox.types";
+
+export default {
+  title: "MDS/Forms/Checkbox",
+  component: Checkbox,
+  argTypes: {},
+} as Meta<typeof Checkbox>;
+
+const Template: Story<CheckboxProps> = (args) => (
+  <StoryThemeProvider>
+    <GlobalStyles />
+    <Checkbox {...args} />
+  </StoryThemeProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Click to confirm",
+  id: "checkbox",
+  onClick: () => {
+    console.log("click");
+  },
+  tooltip: "test",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: "Click to confirm",
+  id: "checkbox",
+  onClick: () => {
+    console.log("click");
+  },
+  tooltip: "test",
+  checked: true,
+  disabled: true,
+};

src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,120 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC } from "react";
+import styled from "styled-components";
+import get from "lodash/get";
+import { CheckboxProps } from "./Checkbox.types";
+import InputLabel from "../InputLabel/InputLabel";
+import { InputLabelProps } from "../InputLabel/InputLabel.types";
+import FieldContainer from "../../global/FieldContainer";
+import Tooltip from "../Tooltip/Tooltip";
+import HelpIcon from "../Icons/HelpIcon";
+
+const CheckboxItem = styled.label<InputLabelProps>(({ sx, theme }) => ({
+  "& input": {
+    display: "none",
+  },
+  "& .checkbox": {
+    position: "relative",
+    display: "block",
+    width: 16,
+    height: 16,
+    borderRadius: 2,
+    border: `1px solid ${get(theme, "checkbox.checkBoxBorder", "#c3c3c3")}`,
+    boxShadow: "inset 0px 1px 3px rgba(0,0,0,0.1)",
+  },
+  "input:checked ~ .checkbox": {
+    "&:before": {
+      content: "' '",
+      position: "absolute",
+      display: "block",
+      width: 12,
+      height: 12,
+      backgroundColor: get(theme, "checkbox.checkBoxColor", "#4CCB92"),
+      borderRadius: 1,
+      top: "50%",
+      left: "50%",
+      transform: "translateX(-50%) translateY(-50%)",
+    },
+  },
+  "input:disabled": {
+    "&  ~ .checkbox": {
+      border: `1px solid ${get(theme, "checkbox.disabledBorder", "#B4B4B4")}`,
+    },
+    "&:checked ~ .checkbox": {
+      "&:before": {
+        backgroundColor: get(theme, "checkbox.disabledColor", "#D5D7D7"),
+      },
+    },
+  },
+  ...sx,
+}));
+
+const Checkbox: FC<
+  CheckboxProps & React.InputHTMLAttributes<HTMLInputElement>
+> = ({
+  tooltip,
+  label,
+  id,
+  overrideLabelClasses,
+  sx,
+  className,
+  helpTip,
+  helpTipPlacement,
+  ...props
+}) => {
+  return (
+    <FieldContainer
+      className={`inputItem ${className ? className : ""}`}
+      sx={{
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        flexBasis: "initial",
+        flexWrap: "nowrap",
+      }}
+    >
+      <CheckboxItem sx={sx} onClick={(e) => e.stopPropagation()}>
+        <input type={"checkbox"} id={id} {...props} />
+        <span className={"checkbox"} />
+      </CheckboxItem>
+      {label !== "" && (
+        <InputLabel
+          htmlFor={id}
+          noMinWidth
+          className={`${overrideLabelClasses || ""}`}
+          sx={{
+            marginLeft: 10,
+          }}
+          helpTip={helpTip}
+          helpTipPlacement={helpTipPlacement}
+        >
+          {label}
+          {tooltip && tooltip !== "" && (
+            <div className={"tooltipContainer"}>
+              <Tooltip tooltip={tooltip} placement="top">
+                <HelpIcon />
+              </Tooltip>
+            </div>
+          )}
+        </InputLabel>
+      )}
+    </FieldContainer>
+  );
+};
+
+export default Checkbox;

src/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,28 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { HTMLAttributes } from "react";
+import { CSSObject } from "styled-components";
+import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";
+
+export interface CheckboxProps extends HTMLAttributes<HTMLInputElement> {
+  label?: string;
+  tooltip?: string;
+  overrideLabelClasses?: string;
+  sx?: CSSObject;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: CommonHelpTipPlacement;
+}

src/components/CodeEditor/CodeEditor.stories.tsx

@@ -0,0 +1,93 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Fragment } from "react";
+import { Meta, Story } from "@storybook/react";
+
+import CodeEditor from "./CodeEditor";
+import { CodeEditorProps } from "./CodeEditor.types";
+
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import GlobalStyles from "../GlobalStyles/GlobalStyles";
+import Button from "../Button/Button";
+import CopyIcon from "../Icons/CopyIcon";
+
+export default {
+  title: "MDS/Forms/CodeEditor",
+  component: CodeEditor,
+  argTypes: {},
+} as Meta<typeof CodeEditor>;
+
+const Template: Story<CodeEditorProps> = (args) => (
+  <StoryThemeProvider>
+    <GlobalStyles />
+    <CodeEditor {...args} />
+  </StoryThemeProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Some Code to Edit",
+};
+
+export const WithHelpTools = Template.bind({});
+WithHelpTools.args = {
+  label: "Some Code to Edit",
+  helpTools: (
+    <Fragment>
+      <Button
+        id={"copy-demo"}
+        onClick={() => alert("CLICKED!")}
+        icon={<CopyIcon />}
+      />
+    </Fragment>
+  ),
+  mode: "js",
+};
+
+export const WithTooltip = Template.bind({});
+WithTooltip.args = {
+  label: "Some Code to Edit",
+  helpTools: (
+    <Fragment>
+      <Button
+        id={"copy-demo"}
+        onClick={() => alert("CLICKED!")}
+        icon={<CopyIcon />}
+      />
+    </Fragment>
+  ),
+  tooltip: "This is a code editor",
+};
+
+export const WithCustomStyles = Template.bind({});
+WithCustomStyles.args = {
+  label: "Some Code to Edit",
+  helpTools: (
+    <Fragment>
+      <Button
+        id={"copy-demo"}
+        onClick={() => alert("CLICKED!")}
+        icon={<CopyIcon />}
+      />
+    </Fragment>
+  ),
+  sx: {
+    "& .editor": {
+      backgroundColor: "#090",
+    },
+  },
+};

src/components/CodeEditor/CodeEditor.tsx

@@ -0,0 +1,283 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC } from "react";
+import get from "lodash/get";
+import styled from "styled-components";
+import CodeEditor from "@uiw/react-textarea-code-editor";
+import HelpIcon from "../Icons/HelpIcon";
+import Tooltip from "../Tooltip/Tooltip";
+import Box from "../Box/Box";
+import InputLabel from "../InputLabel/InputLabel";
+import { CodeEditorBaseProps, CodeEditorProps } from "./CodeEditor.types";
+import { lightColors } from "../../global/themes";
+
+const CodeEditorBase = styled.div<CodeEditorBaseProps>(
+  ({ theme, editorHeight, sx }) => ({
+    "& .editorContainer": {
+      maxHeight: editorHeight,
+      overflow: "auto",
+      border: `${get(theme, "borderColor", lightColors.borderColor)} 1px solid`,
+    },
+    "& .tooltipContainer": {
+      marginLeft: 5,
+      display: "flex",
+      alignItems: "center",
+      "& .min-icon": {
+        width: 13,
+      },
+    },
+    "& .mds-editor": {
+      "&.w-tc-editor": {
+        fontSize: 12,
+        backgroundColor: get(
+          theme,
+          "codeEditor.backgroundColor",
+          lightColors.white,
+        ),
+        color: get(theme, "codeEditor.textColor", lightColors.defaultFontColor),
+        fontFamily:
+          "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+        minHeight: editorHeight || "initial",
+        [`& code[class*="language-"] .token.cdata,
+      & pre[class*="language-"] .token.cdata,
+      & code[class*="language-"] .token.comment,
+      & pre[class*="language-"] .token.comment,
+      & code[class*="language-"] .token.doctype,
+      & pre[class*="language-"] .token.doctype,
+      & code[class*="language-"] .token.prolog,
+      & pre[class*="language-"] .token.prolog`]: {
+          color: get(
+            theme,
+            "codeEditor.comment",
+            lightColors.codeEditorComment,
+          ),
+        },
+        [`& code[class*="language-"] .token.punctuation,
+& pre[class*="language-"] .token.punctuation`]: {
+          color: get(
+            theme,
+            "codeEditor.sublimelinterGutterMark",
+            lightColors.codeEditorSublimelinterGutterMark,
+          ),
+        },
+        [`& code[class*="language-"] .namespace,
+& pre[class*="language-"] .namespace`]: {
+          opacity: 0.7,
+        },
+        [`& code[class*="language-"] .token.boolean,
+& pre[class*="language-"] .token.boolean,
+& code[class*="language-"] .token.constant,
+& pre[class*="language-"] .token.constant,
+& code[class*="language-"] .token.deleted,
+& pre[class*="language-"] .token.deleted,
+& code[class*="language-"] .token.number,
+& pre[class*="language-"] .token.number,
+& code[class*="language-"] .token.symbol,
+& pre[class*="language-"] .token.symbol`]: {
+          color: get(
+            theme,
+            "codeEditor.entityTag",
+            lightColors.codeEditorEntityTag,
+          ),
+        },
+        [`& code[class*="language-"] .token.builtin,
+& pre[class*="language-"] .token.builtin,
+& code[class*="language-"] .token.char,
+& pre[class*="language-"] .token.char,
+& code[class*="language-"] .token.inserted,
+& pre[class*="language-"] .token.inserted,
+& code[class*="language-"] .token.selector,
+& pre[class*="language-"] .token.selector,
+& code[class*="language-"] .token.string,
+& pre[class*="language-"] .token.string`]: {
+          color: get(
+            theme,
+            "codeEditor.constant",
+            lightColors.codeEditorConstant,
+          ),
+        },
+        [`& code[class*="language-"] .style .token.string,
+& pre[class*="language-"] .style .token.string,
+& code[class*="language-"] .token.entity,
+& pre[class*="language-"] .token.entity,
+& code[class*="language-"] .token.property,
+& pre[class*="language-"] .token.property,
+& code[class*="language-"] .token.operator,
+& pre[class*="language-"] .token.operator,
+& code[class*="language-"] .token.url,
+& pre[class*="language-"] .token.url`]: {
+          color: get(
+            theme,
+            "codeEditor.constant",
+            lightColors.codeEditorConstant,
+          ),
+        },
+        [`& code[class*="language-"] .token.atrule,
+& pre[class*="language-"] .token.atrule,
+& code[class*="language-"] .token.property-access .token.method,
+& pre[class*="language-"] .token.property-access .token.method,
+& code[class*="language-"] .token.keyword,
+& pre[class*="language-"] .token.keyword`]: {
+          color: get(
+            theme,
+            "codeEditor.keyword",
+            lightColors.codeEditorKeyword,
+          ),
+        },
+        [`& code[class*="language-"] .token.function,
+& pre[class*="language-"] .token.function`]: {
+          color: get(theme, "codeEditor.string", lightColors.codeEditorString),
+        },
+
+        [`& code[class*="language-"] .token.important,
+& pre[class*="language-"] .token.important,
+& code[class*="language-"] .token.regex,
+& pre[class*="language-"] .token.regex,
+& code[class*="language-"] .token.variable,
+& pre[class*="language-"] .token.variable`]: {
+          color: get(
+            theme,
+            "codeEditor.codeEditorRegexp",
+            lightColors.codeEditorRegexp,
+          ),
+        },
+        [`& code[class*="language-"] .token.bold,
+& pre[class*="language-"] .token.bold,
+& code[class*="language-"] .token.important,
+& pre[class*="language-"] .token.important`]: {
+          color: get(
+            theme,
+            "codeEditor.markupBold",
+            lightColors.codeEditorMarkupBold,
+          ),
+        },
+        [`& code[class*="language-"] .token.tag,
+& pre[class*="language-"] .token.tag`]: {
+          color: get(
+            theme,
+            "codeEditor.entityTag",
+            lightColors.codeEditorEntityTag,
+          ),
+        },
+        [`& code[class*="language-"] .token.attr-value,
+& pre[class*="language-"] .token.attr-value,
+& code[class*="language-"] .token.attr-name,
+& pre[class*="language-"] .token.attr-name`]: {
+          color: get(
+            theme,
+            "codeEditor.constant",
+            lightColors.codeEditorConstant,
+          ),
+        },
+        [`& code[class*="language-"] .token.selector .class,
+& pre[class*="language-"] .token.selector .class,
+& code[class*="language-"] .token.class-name,
+& pre[class*="language-"] .token.class-name`]: {
+          color: get(theme, "codeEditor.entity", lightColors.codeEditorEntity),
+        },
+      },
+      "& .w-tc-editor-text, .w-tc-editor-preview": {
+        minHeight: 16,
+      },
+      "& .w-tc-editor-preview pre": {
+        margin: 0,
+        padding: 0,
+        whiteSpace: "inherit",
+        fontFamily: "inherit",
+        fontSize: "inherit",
+      },
+      "& .w-tc-editor-preview pre code": {
+        fontFamily: "inherit",
+      },
+    },
+    "& .actionsContainer": {
+      display: "flex",
+      alignItems: "center",
+      background: get(
+        theme,
+        "codeEditor.helpToolsBarBG",
+        lightColors.boxBackground,
+      ),
+      border: `${get(theme, "borderColor", lightColors.borderColor)} 1px solid`,
+      borderTop: 0,
+      padding: "2px",
+      paddingRight: "5px",
+      justifyContent: "flex-end",
+      "& button": {
+        height: "26px",
+        width: "26px",
+        padding: "2px",
+        " .min-icon": {
+          marginLeft: "0",
+        },
+      },
+    },
+    ...sx,
+  }),
+);
+
+const CodeMirrorWrapper: FC<CodeEditorProps> = ({
+  value,
+  label = "",
+  tooltip = "",
+  mode = "json",
+  onChange,
+  editorHeight = 250,
+  sx,
+  helpTools,
+  className,
+  helpTip,
+  helpTipPlacement,
+}) => {
+  return (
+    <CodeEditorBase
+      sx={sx}
+      editorHeight={editorHeight}
+      className={`codeEditor inputItem ${className}`}
+    >
+      <InputLabel
+        sx={{ marginBottom: "10px", display: "flex", alignItems: "center" }}
+        helpTip={helpTip}
+        helpTipPlacement={helpTipPlacement}
+      >
+        <span>{label}</span>
+        {tooltip !== "" && (
+          <Box className={"tooltipContainer"}>
+            <Tooltip tooltip={tooltip} placement="top">
+              <HelpIcon />
+            </Tooltip>
+          </Box>
+        )}
+      </InputLabel>
+      <Box className={"editorContainer"}>
+        <CodeEditor
+          value={value}
+          language={mode}
+          onChange={(evn) => {
+            onChange(evn.target.value);
+          }}
+          id={"code_wrapper"}
+          padding={15}
+          className={"mds-editor"}
+        />
+      </Box>
+      {helpTools && <Box className={"actionsContainer"}>{helpTools}</Box>}
+    </CodeEditorBase>
+  );
+};
+
+export default CodeMirrorWrapper;

src/components/CodeEditor/CodeEditor.types.ts

@@ -0,0 +1,39 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { CSSObject } from "styled-components";
+import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";
+
+export interface CodeEditorProps {
+  value: string;
+  label?: string;
+  mode?: string;
+  tooltip?: string;
+  editorHeight?: string | number;
+  onChange: (value: string) => any;
+  className?: string;
+  helpTools?: React.ReactNode;
+  sx?: CSSObject;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: CommonHelpTipPlacement;
+}
+
+export interface CodeEditorBaseProps {
+  editorHeight: string | number;
+  sx?: CSSObject;
+  className?: string;
+}

src/components/CommentBox/CommentBox.stories.tsx

@@ -0,0 +1,69 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+
+import CommentBox from "./CommentBox";
+import { CommentBoxProps } from "./CommentBox.types";
+
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import GlobalStyles from "../GlobalStyles/GlobalStyles";
+import FormLayout from "../FormLayout/FormLayout";
+
+export default {
+  title: "MDS/Forms/CommentBox",
+  component: CommentBox,
+  argTypes: {},
+} as Meta<typeof CommentBox>;
+
+const Template: Story<CommentBoxProps> = (args) => (
+  <StoryThemeProvider>
+    <GlobalStyles />
+    <FormLayout>
+      <CommentBox {...args} />
+    </FormLayout>
+  </StoryThemeProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "A Comment Box",
+  required: true,
+  placeholder: "A Placeholder",
+};
+
+export const DisabledInput = Template.bind({});
+DisabledInput.args = {
+  label: "A Comment Box",
+  required: true,
+  disabled: true,
+  value: "Demo Text",
+};
+
+export const ErrorInput = Template.bind({});
+ErrorInput.args = {
+  label: "Input with Error",
+  required: true,
+  error: "This is an error message",
+};
+
+export const WithTooltip = Template.bind({});
+WithTooltip.args = {
+  label: "A Comment Box",
+  required: true,
+  tooltip: "Tooltip text",
+};

src/components/CommentBox/CommentBox.tsx

@@ -0,0 +1,166 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, useState } from "react";
+import styled from "styled-components";
+import get from "lodash/get";
+import {
+  ExtraCommentProps,
+  CommentBoxProps,
+  CommentContainerProps,
+} from "./CommentBox.types";
+import HelpIcon from "../Icons/HelpIcon";
+import Tooltip from "../Tooltip/Tooltip";
+import InputLabel from "../InputLabel/InputLabel";
+import Box from "../Box/Box";
+
+const TextAreaBase = styled.textarea<CommentBoxProps & ExtraCommentProps>(
+  ({ theme, error, originType }) => {
+    let borderColor = get(theme, "inputBox.border", "#E2E2E2");
+    let borderHover = get(theme, "inputBox.hoverBorder", "#000110");
+
+    if (error && error !== "") {
+      borderColor = get(theme, "inputBox.error", "#C51B3F");
+      borderHover = get(theme, "inputBox.error", "#C51B3F");
+    }
+
+    return {
+      fontFamily: "'Inter',sans-serif",
+      width: "100%",
+      resize: "none",
+      padding: "16px 14px",
+      color: get(theme, "inputBox.color", "#07193E"),
+      fontSize: 13,
+      fontWeight: 600,
+      border: `${borderColor} 1px solid`,
+      borderRadius: 3,
+      outline: "none",
+      transitionDuration: "0.1s",
+      backgroundColor: get(theme, "inputBox.backgroundColor", "#fff"),
+      "&:placeholder": {
+        color: get(theme, "inputBox.placeholderColor", "#858585"),
+        opacity: 1,
+        fontWeight: 400,
+      },
+      "&:hover": {
+        borderColor: borderHover,
+      },
+      "&:focus": {
+        borderColor: borderHover,
+      },
+      "&:disabled": {
+        border: get(theme, "inputBox.disabledBorder", "#494A4D"),
+        backgroundColor: get(theme, "inputBox.disabledBackground", "#B4B4B4"),
+        color: get(theme, "inputBox.disabledText", "#E6EBEB"),
+        "&:placeholder": {
+          color: get(theme, "inputBox.disabledPlaceholder", "#E6EBEB"),
+        },
+      },
+    };
+  },
+);
+
+const BoxContainer = styled.div<CommentContainerProps>(
+  ({ theme, error, sx }) => ({
+    display: "flex",
+    alignItems: "flex-start",
+    flexGrow: 1,
+    width: "100%",
+    "& .errorText": {
+      fontSize: 12,
+      color: get(theme, "inputBox.error", "#C51B3F"),
+      marginTop: 3,
+    },
+    "& .textBoxContainer": {
+      width: "100%",
+      flexGrow: 1,
+      position: "relative",
+      minWidth: 160,
+    },
+    "& .tooltipContainer": {
+      marginLeft: 5,
+      display: "flex",
+      alignItems: "center",
+      "& .min-icon": {
+        width: 13,
+      },
+    },
+    "& .inputLabel": {
+      marginBottom: error ? 18 : 0,
+    },
+    ...sx,
+  }),
+);
+
+const InputBox: FC<CommentBoxProps> = ({
+  id,
+  tooltip = "",
+  index,
+  noLabelMinWidth,
+  label = "",
+  required,
+  className,
+  error,
+  sx,
+  helpTip,
+  helpTipPlacement,
+  ...props
+}) => {
+  return (
+    <BoxContainer
+      error={!!error && error !== ""}
+      sx={sx}
+      className={`inputItem ${className}`}
+    >
+      {label !== "" && (
+        <InputLabel
+          htmlFor={id}
+          noMinWidth={noLabelMinWidth}
+          className={"inputLabel"}
+          helpTip={helpTip}
+          helpTipPlacement={helpTipPlacement}
+        >
+          {label}
+          {required ? "*" : ""}
+          {tooltip !== "" && (
+            <Box className={"tooltipContainer"}>
+              <Tooltip tooltip={tooltip} placement="top">
+                <Box className={tooltip}>
+                  <HelpIcon />
+                </Box>
+              </Tooltip>
+            </Box>
+          )}
+        </InputLabel>
+      )}
+
+      <Box className={"textBoxContainer"}>
+        <TextAreaBase
+          id={id}
+          fullWidth
+          error={error}
+          className={"inputRebase"}
+          data-index={index}
+          rows={5}
+          {...props}
+        />
+        {error !== "" && <Box className={"errorText"}>{error}</Box>}
+      </Box>
+    </BoxContainer>
+  );
+};
+
+export default InputBox;

src/components/CommentBox/CommentBox.types.ts

@@ -0,0 +1,47 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { CSSObject } from "styled-components";
+import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";
+
+export interface CommentBoxProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  id: string;
+  fullWidth?: boolean;
+  label?: string;
+  tooltip?: string;
+  sx?: CSSObject;
+  index?: number;
+  noLabelMinWidth?: boolean;
+  required?: boolean;
+  className?: string;
+  error?: string;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: CommonHelpTipPlacement;
+}
+
+export interface CommentContainerProps {
+  children?: React.ReactNode;
+  sx?: CSSObject;
+  error?: boolean;
+  startIcon?: React.ReactNode;
+  className?: string;
+}
+
+export interface ExtraCommentProps {
+  originType?: string;
+}

src/components/DataTable/ColumnsSelector.tsx

@@ -0,0 +1,171 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, useEffect, useState } from "react";
+import styled, { CSSObject } from "styled-components";
+import get from "lodash/get";
+import debounce from "lodash/debounce";
+import { createPortal } from "react-dom";
+import {
+  ColumnSelectorConstructProps,
+  ColumnSelectorProps,
+  IColumns,
+} from "./DataTable.types";
+import { lightColors } from "../../global/themes";
+import Checkbox from "../Checkbox/Checkbox";
+import Box from "../Box/Box";
+import SelectorContainer from "../../global/SelectorContainer";
+
+const SelectorBox = styled.div<ColumnSelectorConstructProps>(
+  ({ theme, sx }) => ({
+    position: "absolute",
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: get(
+      theme,
+      "dropdownSelector.backgroundColor",
+      lightColors.white,
+    ),
+    border: `1px solid ${get(theme, "borderColor", lightColors.borderColor)}`,
+    padding: "10px 10px",
+
+    minWidth: 150,
+    borderRadius: 4,
+    boxShadow:
+      "rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px",
+    "& .columnsSelectorTitle": {
+      fontWeight: "bold",
+      padding: "0 0 5px",
+      borderBottom: `1px solid ${get(
+        theme,
+        "borderColor",
+        lightColors.borderColor,
+      )}`,
+      marginBottom: 5,
+      color: get(theme, "fontColor", lightColors.defaultFontColor),
+    },
+    "& .columnsSelectorContainer": {
+      display: "flex",
+      flexDirection: "column",
+      gap: 5,
+      maxHeight: 250,
+      overflowY: "auto",
+    },
+    ...sx,
+  }),
+);
+
+const calcElementPosition = (anchorEl: (EventTarget & HTMLElement) | null) => {
+  if (!anchorEl) {
+    return {
+      top: 0,
+      right: 0,
+    };
+  }
+
+  const bounds = anchorEl.getBoundingClientRect();
+  const windowWidth = document.documentElement.offsetWidth;
+
+  return {
+    top: bounds.top + bounds.height,
+    right: windowWidth - bounds.right,
+  };
+};
+
+const ColumnsSelector: FC<ColumnSelectorProps> = ({
+  columns,
+  selectedOptionIDs,
+  onSelect,
+  closeTriggerAction,
+  open,
+  anchorEl = null,
+}) => {
+  const [coords, setCoords] = useState<CSSObject | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      setCoords(calcElementPosition(anchorEl));
+      return;
+    }
+    setCoords(null);
+  }, [open]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      closeTriggerAction();
+    };
+
+    const scrollResize = debounce((anchorEl) => {
+      if (!anchorEl || !anchorEl.getBoundingClientRect()) {
+        return;
+      }
+      setCoords(calcElementPosition(anchorEl));
+    }, 300);
+
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", () => {
+      scrollResize(anchorEl);
+    });
+  });
+
+  if (!open || !coords) {
+    return null;
+  }
+
+  if (!anchorEl) {
+    console.warn(
+      "AnchorEl not set. Element will be rendered on the top of the page",
+    );
+  }
+
+  return createPortal(
+    <SelectorContainer onClick={closeTriggerAction}>
+      <SelectorBox
+        sx={coords}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      >
+        <Box className={"columnsSelectorTitle"}>Shown Columns</Box>
+        <Box className={"columnsSelectorContainer"}>
+          {columns.map((column: IColumns) => {
+            return (
+              <Checkbox
+                key={`tableColumns-${column.label}`}
+                label={column.label}
+                checked={
+                  selectedOptionIDs.findIndex(
+                    (element) => element === column.elementKey,
+                  ) >= 0
+                }
+                onChange={() => {
+                  onSelect(column.elementKey || "");
+                }}
+                id={`chbox-${column.label}`}
+                name={`chbox-${column.label}`}
+                value={column.label}
+              />
+            );
+          })}
+        </Box>
+      </SelectorBox>
+    </SelectorContainer>,
+    document.body,
+  );
+};
+
+export default ColumnsSelector;

src/components/DataTable/DataTable.stories.tsx

@@ -0,0 +1,838 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { useState } from "react";
+import { Meta, Story } from "@storybook/react";
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import DataTable from "./DataTable";
+import { DataTableProps } from "./DataTable.types";
+import GlobalStyles from "../GlobalStyles/GlobalStyles";
+import Grid from "../Grid/Grid";
+import SuccessIcon from "../Icons/SuccessIcon";
+
+export default {
+  title: "MDS/Information/DataTable",
+  component: DataTable,
+  argTypes: {},
+} as Meta<typeof DataTable>;
+
+const Template: Story<DataTableProps> = (args) => {
+  const [selected, setSelected] = useState<string[]>([]);
+  const [selectedColumns, setSelectedColumns] = useState<string[]>(["field1"]);
+
+  const onSelectFunction = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const targetD = e.target;
+    const value = targetD.value;
+    const checked = targetD.checked;
+
+    let elements: string[] = [...selected]; // We clone the selected array
+
+    if (checked) {
+      // If the user has checked this field we need to push this to elements selection list
+      elements.push(value);
+    } else {
+      // User has unchecked this field, we need to remove it from the list
+      elements = elements.filter((element) => element !== value);
+    }
+
+    setSelected(elements);
+  };
+
+  const onSelectAllFunction = () => {
+    if (selected.length === args.records.length) {
+      setSelected([]);
+      return;
+    }
+
+    const allItems = args.records.map(
+      (element) => `${element[`${args.idField}`]}`,
+    );
+    setSelected(allItems);
+  };
+
+  let extraFunc = {};
+
+  if (args.onSelect !== undefined) {
+    extraFunc = {
+      selectedItems: selected,
+      onSelect: onSelectFunction,
+      onSelectAll: onSelectAllFunction,
+    };
+  }
+
+  if (args.columnsSelector) {
+    extraFunc = {
+      ...extraFunc,
+      columnsShown: selectedColumns,
+      onColumnChange: (columnKey) => {
+        const itemFound = selectedColumns.findIndex(
+          (item) => item === columnKey,
+        );
+
+        // Item Exists, we remove it
+        if (itemFound >= 0) {
+          setSelectedColumns(
+            selectedColumns.filter((item) => item !== columnKey),
+          );
+        } else {
+          setSelectedColumns([...selectedColumns, columnKey]);
+        }
+      },
+    };
+  }
+
+  return (
+    <StoryThemeProvider>
+      <GlobalStyles />
+      <Grid container>
+        <Grid item xs={12}>
+          <DataTable {...args} {...extraFunc} />
+        </Grid>
+      </Grid>
+    </StoryThemeProvider>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  disabled: false,
+  entityName: "Elements",
+  records: ["Element1", "Element2", "Element3"],
+  columns: [{ label: "Elements List" }],
+  onSelect: undefined,
+};
+
+export const MultiColumn = Template.bind({});
+MultiColumn.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+    { field1: "Value1-2", field2: "Value2-2", field3: "Value3-2" },
+    {
+      field1: "Value1-3",
+      field2: "Value2-3",
+      field3: "Value3-3",
+    },
+  ],
+  columns: [
+    { label: "Column1", elementKey: "field1" },
+    { label: "Column2", elementKey: "field2" },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+};
+
+export const CustomColumnsWidth = Template.bind({});
+CustomColumnsWidth.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+  ],
+  columns: [
+    { label: "Column1", elementKey: "field1", width: 200 },
+    { label: "Column2", elementKey: "field2", width: 100 },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+};
+
+export const CustomRowStyle = Template.bind({});
+CustomRowStyle.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+  ],
+  columns: [
+    { label: "Column1", elementKey: "field1", width: 200 },
+    { label: "Column2", elementKey: "field2", width: 100 },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+  rowStyle: ({ index }) => (index === 1 ? "deleted" : ""),
+};
+
+export const NoBackground = Template.bind({});
+NoBackground.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  noBackground: true,
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+  ],
+  columns: [
+    { label: "Column1", elementKey: "field1", width: 200 },
+    { label: "Column2", elementKey: "field2", width: 100 },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+};
+
+export const CustomPaperHeight = Template.bind({});
+CustomPaperHeight.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  customPaperHeight: "250px",
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+  ],
+  columns: [
+    { label: "Column1", elementKey: "field1", width: 200 },
+    { label: "Column2", elementKey: "field2", width: 100 },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+};
+
+export const CustomStyles = Template.bind({});
+CustomStyles.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  customPaperHeight: "250px",
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+  ],
+  columns: [
+    { label: "Column1", elementKey: "field1", width: 200 },
+    { label: "Column2", elementKey: "field2", width: 100 },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+  sx: {
+    backgroundColor: "#f09",
+    color: "#fff",
+  },
+};
+
+export const WithSorting = Template.bind({});
+WithSorting.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  customPaperHeight: "250px",
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+    { field1: "An Item", field2: "A Second Item", field3: "A ThirdItem" },
+    {
+      field1: "One Value",
+      field2: "Two Values",
+      field3: "Three Values",
+    },
+    {
+      field1: "Some Other thing",
+      field2: "Some Other thing",
+      field3: "Some Other thing",
+    },
+    {
+      field1: "My Element",
+      field2: "My Second Element",
+      field3: "My Third Element",
+    },
+  ],
+  columns: [
+    {
+      label: "Super Long Column Name to test ellipsis truncate",
+      elementKey: "field1",
+      width: 200,
+    },
+    { label: "Column2", elementKey: "field2", width: 100 },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+  sortEnabled: true,
+};
+
+export const SortingOnSingleValue = Template.bind({});
+SortingOnSingleValue.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  customPaperHeight: "250px",
+  records: ["A Value", "B Value", "C Value", "Z Value"],
+  columns: [
+    {
+      label: "Only Column",
+    },
+  ],
+  sortEnabled: true,
+};
+
+export const SortSomeColumnsOnly = Template.bind({});
+SortSomeColumnsOnly.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  customPaperHeight: "250px",
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+    { field1: "An Item", field2: "A Second Item", field3: "A ThirdItem" },
+    {
+      field1: "One Value",
+      field2: "Two Values",
+      field3: "Three Values",
+    },
+    {
+      field1: "Some Other thing",
+      field2: "Some Other thing",
+      field3: "Some Other thing",
+    },
+    {
+      field1: "My Element",
+      field2: "My Second Element",
+      field3: "My Third Element",
+    },
+  ],
+  columns: [
+    {
+      label: "Super Long Column Name to test ellipsis truncate",
+      elementKey: "field1",
+      width: 200,
+    },
+    { label: "Column2", elementKey: "field2", width: 100 },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+  sortEnabled: ["field1", "field3"],
+};
+
+export const ManualControlledSort = Template.bind({});
+ManualControlledSort.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  customPaperHeight: "250px",
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+    { field1: "An Item", field2: "A Second Item", field3: "A ThirdItem" },
+    {
+      field1: "One Value",
+      field2: "Two Values",
+      field3: "Three Values",
+    },
+    {
+      field1: "Some Other thing",
+      field2: "Some Other thing",
+      field3: "Some Other thing",
+    },
+    {
+      field1: "My Element",
+      field2: "My Second Element",
+      field3: "My Third Element",
+    },
+  ],
+  columns: [
+    {
+      label: "Super Long Column Name to test ellipsis truncate",
+      elementKey: "field1",
+      width: 200,
+    },
+    {
+      label: "Disabled Manual Sort",
+      elementKey: "field2",
+      width: 100,
+      enableSort: false,
+    },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+  sortEnabled: {
+    currentSort: "field1",
+    currentDirection: "DESC",
+    onSortClick: (data) => {
+      alert("Sort Header clicked");
+      console.log("DATA FROM SORT TRIGGER", data);
+    },
+  },
+};
+
+export const WithItemActions = Template.bind({});
+WithItemActions.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  customPaperHeight: "250px",
+  itemActions: [
+    {
+      type: "edit",
+      onClick: (itemID: string) => {
+        alert(itemID);
+      },
+      sendOnlyId: true,
+      tooltip: "Edit",
+      isDisabled: true,
+    },
+    {
+      type: "delete",
+      onClick: (deleteItem) => {
+        console.log("DELETE", deleteItem);
+      },
+      tooltip: "Delete, Disabled if Column 1 is Value1",
+      isDisabled: (value) => value.field1 === "Value1",
+    },
+    {
+      type: "preview",
+      onClick: (deleteItem) => {
+        console.log("PREVIEW", deleteItem);
+      },
+      tooltip: "Preview",
+    },
+    {
+      type: "cloud",
+      onClick: (deleteItem) => {
+        console.log("DELETE", deleteItem);
+      },
+      tooltip: "Delete, Disabled if Column 1 is Value1",
+      showLoader: (value) => value.field1 === "Value1",
+    },
+  ],
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+  ],
+  columns: [
+    { label: "Column1", elementKey: "field1", width: 200 },
+    { label: "Column2", elementKey: "field2", width: 100 },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+  sortConfig: {
+    currentSort: "field1",
+    currentDirection: "DESC",
+    onSortClick: () => {
+      alert("sort triggered");
+    },
+  },
+};
+
+export const FullItemsActions = Template.bind({});
+FullItemsActions.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  customPaperHeight: "250px",
+  itemActions: [
+    {
+      type: "edit",
+      onClick: (itemID: string) => {
+        alert(itemID);
+      },
+      sendOnlyId: true,
+      tooltip: "Edit",
+    },
+    {
+      type: "delete",
+      onClick: (deleteItem) => {
+        console.log("DELETE", deleteItem);
+      },
+      tooltip: "Delete",
+    },
+    {
+      type: "console",
+      onClick: (deleteItem) => {
+        console.log("CONSOLE", deleteItem);
+      },
+      tooltip: "Console",
+    },
+    {
+      type: "description",
+      onClick: (deleteItem) => {
+        console.log("DESCRIPTION", deleteItem);
+      },
+      tooltip: "Description",
+    },
+    {
+      type: "cloud",
+      onClick: (deleteItem) => {
+        console.log("CLOUD", deleteItem);
+      },
+      tooltip: "Cloud",
+    },
+    {
+      type: "view",
+      onClick: (deleteItem) => {
+        console.log("VIEW", deleteItem);
+      },
+      tooltip: "View",
+    },
+    {
+      type: "disable",
+      onClick: (deleteItem) => {
+        console.log("DISABLE", deleteItem);
+      },
+      tooltip: "Disable",
+    },
+    {
+      type: "download",
+      onClick: (deleteItem) => {
+        console.log("DOWNLOAD", deleteItem);
+      },
+      tooltip: "Download",
+    },
+    {
+      type: "format",
+      onClick: (deleteItem) => {
+        console.log("FORMAT", deleteItem);
+      },
+      tooltip: "Format",
+    },
+    {
+      type: "preview",
+      onClick: (deleteItem) => {
+        console.log("PREVIEW", deleteItem);
+      },
+      tooltip: "Preview",
+    },
+    {
+      type: "share",
+      onClick: (deleteItem) => {
+        console.log("SHARE", deleteItem);
+      },
+      tooltip: "Share",
+    },
+    {
+      type: <SuccessIcon />,
+      onClick: (deleteItem) => {
+        console.log("DELETE", deleteItem);
+      },
+      tooltip: "Custom Icon",
+    },
+  ],
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+  ],
+  columns: [
+    { label: "Column1", elementKey: "field1", width: 200 },
+    { label: "Column2", elementKey: "field2", width: 100 },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+  sortConfig: {
+    currentSort: "field1",
+    currentDirection: "DESC",
+    onSortClick: () => {
+      alert("sort triggered");
+    },
+  },
+};
+
+export const SingleItemsAction = Template.bind({});
+SingleItemsAction.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  customPaperHeight: "250px",
+  itemActions: [
+    {
+      type: "delete",
+      onClick: (deleteItem) => {
+        console.log("DELETE", deleteItem);
+      },
+      tooltip: "Delete",
+    },
+  ],
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+  ],
+  columns: [
+    { label: "Column1", elementKey: "field1", width: 200 },
+    { label: "Column2", elementKey: "field2", width: 100 },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+  sortConfig: {
+    currentSort: "field1",
+    currentDirection: "DESC",
+    onSortClick: () => {
+      alert("sort triggered");
+    },
+  },
+};
+
+export const ColumnsSelector = Template.bind({});
+ColumnsSelector.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  customPaperHeight: "250px",
+  columnsSelector: true,
+  itemActions: [
+    {
+      type: "edit",
+      onClick: (itemID: string) => {
+        alert(itemID);
+      },
+      sendOnlyId: true,
+      label: "Edit",
+    },
+    {
+      type: "delete",
+      onClick: (deleteItem) => {
+        console.log("DELETE", deleteItem);
+      },
+      label: "Delete",
+    },
+  ],
+  records: [
+    {
+      field1: "Value1",
+      field2: "Value2",
+      field3: "Value3",
+      field4: "Value4",
+      field5: "Value5",
+      field6: "Value6",
+      field7: "Value7",
+      field8: "Value8",
+      field9: "Value9",
+      field10: "Value10",
+      field11: "Value11",
+      field12: "Value12",
+    },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+      field4: "Value4-1",
+      field5: "Value5-1",
+      field6: "Value6-1",
+      field7: "Value7-1",
+      field8: "Value8-1",
+      field9: "Value9-1",
+      field10: "Value10-1",
+      field11: "Value11-1",
+      field12: "Value12-1",
+    },
+  ],
+  columns: [
+    { label: "Column1", elementKey: "field1", width: 200 },
+    { label: "Column2", elementKey: "field2", width: 100 },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+    { label: "Column4", elementKey: "field4", width: 200 },
+    { label: "Column5", elementKey: "field5", width: 100 },
+    {
+      label: "Column6",
+      elementKey: "field6",
+    },
+    { label: "Column7", elementKey: "field7", width: 200 },
+    { label: "Column8", elementKey: "field8", width: 100 },
+    {
+      label: "Column9",
+      elementKey: "field9",
+    },
+    { label: "Column10", elementKey: "field10", width: 200 },
+    { label: "Column11", elementKey: "field11", width: 100 },
+    {
+      label: "Column12",
+      elementKey: "field12",
+    },
+  ],
+};
+
+export const NumericIDs = Template.bind({});
+NumericIDs.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "id",
+  records: [
+    { id: 1, field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      id: 2,
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+    { id: 3, field1: "Value1-2", field2: "Value2-2", field3: "Value3-2" },
+    {
+      id: 4,
+      field1: "Value1-3",
+      field2: "Value2-3",
+      field3: "Value3-3",
+    },
+  ],
+  columns: [
+    { label: "ID", elementKey: "id" },
+    { label: "Column1", elementKey: "field1" },
+    { label: "Column2", elementKey: "field2" },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+};
+
+export const LongTitles = Template.bind({});
+LongTitles.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "id",
+  records: [
+    { id: 1, field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      id: 2,
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+    { id: 3, field1: "Value1-2", field2: "Value2-2", field3: "Value3-2" },
+    {
+      id: 4,
+      field1: "Value1-3",
+      field2: "Value2-3",
+      field3: "Value3-3",
+    },
+  ],
+  columns: [
+    { label: "ID", elementKey: "id" },
+    {
+      label: "Super long title name for a single column that needs to truncate",
+      elementKey: "field1",
+    },
+    { label: "Column2", elementKey: "field2" },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+};
+
+export const CustomRowHeight = Template.bind({});
+CustomRowHeight.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "id",
+  rowHeight: 80,
+  records: [
+    { id: 1, field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      id: 2,
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+    { id: 3, field1: "Value1-2", field2: "Value2-2", field3: "Value3-2" },
+    {
+      id: 4,
+      field1: "Value1-3",
+      field2: "Value2-3",
+      field3: "Value3-3",
+    },
+  ],
+  columns: [
+    { label: "ID", elementKey: "id" },
+    {
+      label: "Super long title name for a single column that needs to truncate",
+      elementKey: "field1",
+    },
+    { label: "Column2", elementKey: "field2" },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+};

src/components/DataTable/DataTable.tsx

@@ -0,0 +1,600 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC, Fragment, useState } from "react";
+import {
+  AutoSizer,
+  Column,
+  InfiniteLoader,
+  SortDirectionType,
+  Table,
+} from "react-virtualized";
+import styled from "styled-components";
+import get from "lodash/get";
+import isString from "lodash/isString";
+import Checkbox from "../Checkbox/Checkbox";
+import Loader from "../Loader/Loader";
+import Grid from "../Grid/Grid";
+import {
+  DataTableProps,
+  DataTableWrapperProps,
+  IColumns,
+  ITableSortInfo,
+} from "./DataTable.types";
+import {
+  calculateOptionsSize,
+  elementActions,
+  generateColumnsMap,
+  selectWidth,
+  sortRecords,
+} from "./DataTable.utils";
+import ViewColumnIcon from "../Icons/ViewColumnIcon";
+import Box from "../Box/Box";
+import Button from "../Button/Button";
+import ColumnsSelector from "./ColumnsSelector";
+
+const DataTableWrapper = styled.div<DataTableWrapperProps>(
+  ({ theme, customPaperHeight, disabled, noBackground, sx, rowHeight }) => ({
+    display: "flex",
+    overflow: "auto",
+    flexDirection: "column",
+    padding: "0 16px 8px",
+    boxShadow: "none",
+    border: `${
+      disabled
+        ? get(theme, "dataTable.disabledBorder", "#E2E2E2")
+        : get(theme, "dataTable.border", "#E2E2E2")
+    } 1px solid`,
+    borderRadius: 3,
+    minHeight: 200,
+    overflowY: "scroll",
+    position: "relative",
+    height: customPaperHeight || "calc(100vh - 205px)",
+    backgroundColor: disabled
+      ? get(theme, "dataTable.disabledBG", "transparent")
+      : "transparent",
+    "&.noBackground": {
+      backgroundColor: "transparent",
+      border: 0,
+    },
+    "& .loadingBox": {
+      padding: "100px 0",
+    },
+    "& .overlayColumnSelection": {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      "& .popoverContent": {
+        maxHeight: 250,
+        overflowY: "auto",
+        padding: "0 10px 10px",
+        "& .shownColumnsLabel": {
+          color: get(theme, "mainGrey", "#000"),
+          fontSize: 12,
+          padding: 10,
+          borderBottom: `${get(
+            theme,
+            "dataTable.border",
+            "#E2E2E2",
+          )} 1px solid`,
+          width: "100%",
+        },
+      },
+    },
+    "&::-webkit-scrollbar": {
+      width: 0,
+      height: 3,
+    },
+    "& .rowLine": {
+      borderBottom: `${get(theme, "dataTable.border", "#E2E2E2")} 1px solid`,
+      height: rowHeight,
+      fontSize: 14,
+      transitionDuration: "0.3s",
+      "&:focus": {
+        outline: "initial",
+      },
+      "&:hover:not(.ReactVirtualized__Table__headerRow)": {
+        userSelect: "none",
+        backgroundColor: get(theme, "dataTable.hoverColor", "#ececec"),
+        fontWeight: 600,
+        "&.canClick": {
+          cursor: "pointer",
+        },
+        "&.canSelectText": {
+          userSelect: "text",
+        },
+      },
+      "& .selected": {
+        fontWeight: 600,
+      },
+      "&:not(.deleted) .selected": {
+        color: get(theme, "dataTable.selected", "#081C42"),
+      },
+      "&.deleted .selected": {
+        color: get(theme, "dataTable.selectedDisabled", "#C51B3F"),
+      },
+    },
+    "& .headerItem": {
+      userSelect: "none",
+      fontWeight: 700,
+      fontSize: 14,
+      fontStyle: "initial",
+      display: "flex",
+      alignItems: "center",
+      outline: "none",
+    },
+    "& .ReactVirtualized__Table__row": {
+      width: "100% !important",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+    },
+    "& .ReactVirtualized__Table__headerRow": {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      fontWeight: 700,
+      fontSize: 14,
+      borderColor: get(theme, "dataTable.border", "#39393980"),
+      textTransform: "initial",
+      transitionDuration: "0s",
+    },
+    "& .ReactVirtualized__Table__headerTruncatedText": {
+      display: "inline-block",
+      maxWidth: "100%",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+    },
+    "& .ReactVirtualized__Table__headerColumn": {
+      marginRight: 10,
+      minWidth: 0,
+      "&:first-of-type": {
+        marginLeft: 10,
+      },
+      "& svg": {
+        width: 12,
+        height: 12,
+        marginRight: 5,
+        alignSelf: "flex-end",
+      },
+    },
+    "& .ReactVirtualized__Table__rowColumn": {
+      marginRight: 10,
+      minWidth: 0,
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      "&:first-of-type": {
+        marginLeft: 10,
+      },
+    },
+    "& .ReactVirtualized__Table__sortableHeaderColumn": {
+      cursor: "pointer",
+    },
+    "& .ReactVirtualized__Table__sortableHeaderIconContainer": {
+      display: "flex",
+      alignItems: "center",
+    },
+    "& .ReactVirtualized__Table__sortableHeaderIcon": {
+      flex: "0 0 24px",
+      height: "1em",
+      width: "1em",
+      fill: "currentColor",
+    },
+    "& .optionsAlignment": {
+      display: "flex",
+      gap: 5,
+      "& .min-icon": {
+        width: 16,
+        height: 16,
+      },
+    },
+    "& .text-center": {
+      textAlign: "center",
+    },
+    "& .text-right": {
+      textAlign: "right",
+    },
+    "& .progress-enabled": {
+      display: "inline-flex",
+      position: "relative",
+      alignItems: "center",
+      justifyContent: "center",
+      width: 30,
+      height: 30,
+    },
+    ...sx,
+  }),
+);
+
+const TableRowPredefStyles: any = {
+  deleted: {
+    color: "#00000080",
+    backgroundColor: "#f1f0f040",
+    "&.selected": {
+      color: "#b2b2b270",
+    },
+  },
+};
+
+// Main function to render the Table Wrapper
+const DataTable: FC<DataTableProps> = ({
+  itemActions,
+  columns,
+  onSelect,
+  records,
+  isLoading,
+  loadingMessage = <h3>Loading...</h3>,
+  entityName,
+  selectedItems,
+  idField,
+  customEmptyMessage = "",
+  customPaperHeight = "",
+  noBackground = false,
+  columnsSelector = false,
+  textSelectable = false,
+  columnsShown = [],
+  onColumnChange = (column: string) => {},
+  infiniteScrollConfig,
+  autoScrollToBottom = false,
+  disabled = false,
+  onSelectAll,
+  rowStyle,
+  parentClassName = "",
+  sx,
+  rowHeight = 40,
+  sortEnabled = false,
+  sortCallBack,
+}) => {
+  const [columnSelectorOpen, setColumnSelectorOpen] = useState<boolean>(false);
+  const [currentSortColumn, setCurrentSortColumn] = useState<
+    string | undefined
+  >(undefined);
+  const [currentSortDirection, setCurrentSortDirection] =
+    useState<SortDirectionType>("ASC");
+
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const rowIDField = idField || "";
+
+  const findView = itemActions
+    ? itemActions.find((el) => el.type === "view")
+    : null;
+
+  const manualSortEnabled =
+    sortEnabled &&
+    typeof sortEnabled === "object" &&
+    !Array.isArray(sortEnabled);
+
+  const clickAction = (rowItem: any) => {
+    if (findView) {
+      const valueClick =
+        findView.sendOnlyId && idField ? rowItem[rowIDField] : rowItem;
+
+      let disabled = false;
+
+      if (!!findView.isDisabled) {
+        if (typeof findView.isDisabled === "boolean") {
+          disabled = findView.isDisabled;
+        } else {
+          disabled = findView.isDisabled(rowItem);
+        }
+      }
+
+      if (findView.onClick && !disabled) {
+        findView.onClick(valueClick);
+      }
+    }
+  };
+
+  const openColumnsSelector = (event: { currentTarget: any }) => {
+    setColumnSelectorOpen(!columnSelectorOpen);
+    setAnchorEl(event.currentTarget);
+  };
+
+  const closeColumnSelector = () => {
+    setColumnSelectorOpen(false);
+    setAnchorEl(null);
+  };
+
+  const columnsSelection = (columns: IColumns[]) => {
+    return (
+      <Box
+        sx={{ margin: "10px 0 0", display: "flex", justifyContent: "flex-end" }}
+      >
+        <Button
+          id={"columns-selector"}
+          variant={"regular"}
+          icon={<ViewColumnIcon />}
+          iconLocation={"end"}
+          onClick={openColumnsSelector}
+        >
+          Columns
+        </Button>
+        {columnSelectorOpen && (
+          <ColumnsSelector
+            open={columnSelectorOpen}
+            closeTriggerAction={closeColumnSelector}
+            onSelect={(label) => onColumnChange(label)}
+            columns={columns}
+            selectedOptionIDs={columnsShown}
+            anchorEl={anchorEl}
+          />
+        )}
+      </Box>
+    );
+  };
+
+  let tableSort: ((val: ITableSortInfo) => any) | undefined = undefined;
+  let tableSortBy: string | undefined = undefined;
+  let tableSortDirection: SortDirectionType | undefined = undefined;
+
+  const onSortClick = (sort: ITableSortInfo) => {
+    const newSortDirection = get(sort, "sortDirection", "DESC");
+    setCurrentSortColumn(sort.sortBy);
+    setCurrentSortDirection(newSortDirection);
+
+    if (sortCallBack) {
+      sortCallBack(sort);
+    }
+  };
+
+  if (sortEnabled) {
+    if (manualSortEnabled) {
+      tableSort = sortEnabled.onSortClick;
+      tableSortBy = sortEnabled.currentSort;
+      tableSortDirection = sortEnabled.currentDirection;
+    } else {
+      tableSort = onSortClick;
+      tableSortBy = currentSortColumn;
+      tableSortDirection = currentSortDirection;
+    }
+  }
+
+  let sortedRecords = records;
+
+  if (sortEnabled && currentSortColumn && !manualSortEnabled) {
+    sortedRecords = sortRecords(
+      records,
+      currentSortColumn,
+      currentSortDirection,
+    );
+  }
+
+  return (
+    <Grid item xs={12} className={parentClassName}>
+      <DataTableWrapper
+        className={`${noBackground ? "noBackground" : ""}`}
+        customPaperHeight={customPaperHeight}
+        sx={sx}
+        rowHeight={rowHeight}
+      >
+        {isLoading && (
+          <Grid container className={"loadingBox"}>
+            <Grid item xs={12} style={{ textAlign: "center" }}>
+              {loadingMessage}
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              sx={{
+                textAlign: "center",
+              }}
+            >
+              <Loader />
+            </Grid>
+          </Grid>
+        )}
+
+        {columnsSelector && !isLoading && sortedRecords.length > 0 && (
+          <Fragment>{columnsSelection(columns)}</Fragment>
+        )}
+        {sortedRecords && !isLoading && sortedRecords.length > 0 ? (
+          // @ts-ignore
+          <InfiniteLoader
+            isRowLoaded={({ index }) => !!sortedRecords[index]}
+            loadMoreRows={
+              infiniteScrollConfig
+                ? infiniteScrollConfig.loadMoreRecords
+                : () => new Promise(() => true)
+            }
+            rowCount={
+              infiniteScrollConfig
+                ? infiniteScrollConfig.recordsCount
+                : sortedRecords.length
+            }
+          >
+            {({ onRowsRendered, registerChild }) => (
+              // @ts-ignore
+              <AutoSizer>
+                {({ width, height }: any) => {
+                  const optionsWidth = calculateOptionsSize(
+                    width,
+                    itemActions
+                      ? itemActions.filter((el) => el.type !== "view").length
+                      : 0,
+                  );
+                  const hasSelect: boolean = !!(onSelect && selectedItems);
+                  const hasOptions: boolean = !!(
+                    (itemActions && itemActions.length > 1) ||
+                    (itemActions &&
+                      itemActions.length === 1 &&
+                      itemActions[0].type !== "view")
+                  );
+                  return (
+                    // @ts-ignore
+                    <Table
+                      ref={registerChild}
+                      disableHeader={false}
+                      headerClassName={"headerItem"}
+                      headerHeight={40}
+                      height={height}
+                      noRowsRenderer={() => (
+                        <Fragment>
+                          {customEmptyMessage !== ""
+                            ? customEmptyMessage
+                            : `There are no ${entityName || "items"} yet.`}
+                        </Fragment>
+                      )}
+                      overscanRowCount={10}
+                      rowHeight={rowHeight}
+                      width={width}
+                      rowCount={sortedRecords.length}
+                      rowGetter={({ index }) => sortedRecords[index]}
+                      onRowClick={({ rowData }) => {
+                        clickAction(rowData);
+                      }}
+                      rowClassName={(r) =>
+                        `rowLine ${findView ? "canClick" : ""} ${
+                          !findView && textSelectable ? "canSelectText" : ""
+                        } ${rowStyle ? rowStyle(r) : ""}`
+                      }
+                      onRowsRendered={onRowsRendered}
+                      sort={tableSort}
+                      sortBy={tableSortBy}
+                      sortDirection={tableSortDirection}
+                      scrollToIndex={
+                        autoScrollToBottom ? sortedRecords.length - 1 : -1
+                      }
+                      rowStyle={(r) => {
+                        if (rowStyle) {
+                          const returnElement = rowStyle(r);
+
+                          if (typeof returnElement === "string") {
+                            return get(TableRowPredefStyles, returnElement, {});
+                          }
+
+                          return returnElement;
+                        }
+
+                        return {};
+                      }}
+                    >
+                      {hasSelect && (
+                        // @ts-ignore
+                        <Column
+                          headerRenderer={() => (
+                            <Fragment>
+                              {onSelectAll ? (
+                                <div className={"checkAllWrapper"}>
+                                  <Checkbox
+                                    label={""}
+                                    onChange={onSelectAll}
+                                    value="all"
+                                    id={"selectAll"}
+                                    name={"selectAll"}
+                                    checked={
+                                      selectedItems?.length ===
+                                      sortedRecords.length
+                                    }
+                                  />
+                                </div>
+                              ) : (
+                                <Fragment>Select</Fragment>
+                              )}
+                            </Fragment>
+                          )}
+                          dataKey={`select-${rowIDField}`}
+                          width={selectWidth}
+                          disableSort
+                          cellRenderer={({ rowData }) => {
+                            const isSelected = selectedItems
+                              ? selectedItems.includes(
+                                  isString(rowData)
+                                    ? rowData
+                                    : `${rowData[rowIDField]}`,
+                                )
+                              : false;
+
+                            return (
+                              <Checkbox
+                                value={
+                                  isString(rowData)
+                                    ? rowData
+                                    : `${rowData[rowIDField]}`
+                                }
+                                color="primary"
+                                className="TableCheckbox"
+                                checked={isSelected}
+                                onChange={onSelect}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                }}
+                              />
+                            );
+                          }}
+                        />
+                      )}
+                      {generateColumnsMap(
+                        columns,
+                        width,
+                        optionsWidth,
+                        hasSelect,
+                        hasOptions,
+                        selectedItems || [],
+                        rowIDField,
+                        columnsSelector,
+                        columnsShown,
+                        sortEnabled,
+                        tableSortBy || "",
+                        tableSortDirection,
+                      )}
+                      {hasOptions && (
+                        // @ts-ignore
+                        <Column
+                          dataKey={"column-options"}
+                          width={optionsWidth}
+                          headerClassName="optionsAlignment"
+                          className="optionsAlignment"
+                          cellRenderer={({ rowData }) => {
+                            const isSelected = selectedItems
+                              ? selectedItems.includes(
+                                  isString(rowData)
+                                    ? rowData
+                                    : `${rowData[rowIDField]}`,
+                                )
+                              : false;
+                            return elementActions(
+                              itemActions || [],
+                              rowData,
+                              isSelected,
+                              rowIDField,
+                            );
+                          }}
+                        />
+                      )}
+                    </Table>
+                  );
+                }}
+              </AutoSizer>
+            )}
+          </InfiniteLoader>
+        ) : (
+          <Fragment>
+            {!isLoading && (
+              <div id={"empty-results"}>
+                {customEmptyMessage !== ""
+                  ? customEmptyMessage
+                  : `There are no ${entityName || "items"} yet.`}
+              </div>
+            )}
+          </Fragment>
+        )}
+      </DataTableWrapper>
+    </Grid>
+  );
+};
+
+export default DataTable;