Release v0.15.0 (#637 )

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
Added Slider component to library (#636 )
2024-01-16 17:42:27 -06:00 · 2024-01-16 07:37:31 -08:00 · 2024-01-15 15:29:34 -06:00 · 2024-01-11 16:06:33 -08:00 · 2024-01-09 20:20:49 -08:00 · 2024-01-09 22:14:20 -06:00
89 changed files with 40365 additions and 37254 deletions
@@ -1,4 +1,4 @@
-name: Workflow
+name: Build Container

 on:
  release:
@@ -24,23 +24,21 @@ jobs:
        id: node_version
        run: echo "$(cat .nvmrc)" && echo "NVMRC=$(cat .nvmrc)" >> $GITHUB_ENV

-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NVMRC }}
          cache: "yarn"
          cache-dependency-path: yarn.lock

-      - name: Install Dependencies
-        continue-on-error: false
-        run: |
-          yarn set version stable
-          yarn install --frozen-lockfile --immutable
-
      - name: Log in to private Docker registry
-        run: echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login ${{ secrets.REGISTRY_URL }} -u ${{ secrets.REGISTRY_USERNAME }} --password-stdin
+        run: echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login ${{ secrets.REGISTRY_URL }} -u '${{ secrets.REGISTRY_USERNAME }}' --password-stdin

      - name: Build Storybook
        run: |
+          rm -Rf node_modules/
+          rm yarn.lock
+          yarn install
+          yarn build
          yarn build-storybook 
          docker buildx build --platform linux/amd64 --push -t registry.min.dev/minio/mds .
          echo "${{ secrets.MDS_DEPLOYER_KUBECONFIG }}" > /tmp/kubecconfig
@@ -34,6 +34,7 @@ jobs:
      - name: Install Dependencies
        continue-on-error: false
        run: |
+          corepack enable
          yarn install

      - name: Check if build is correct
@@ -1,4 +1,4 @@
-FROM nginx:1.23
+FROM nginx:1

 COPY nginx.conf /etc/nginx/nginx.conf
 COPY docs /usr/share/nginx/html
@@ -18,7 +18,9 @@ export interface ApplicationLogoProps {
    | "monitor"
    | "observe"
    | "missioncontrol"
-    | "globalconsole";
+    | "globalconsole"
+    | "minio"
+    | "enterprise";
  subVariant?: "simple" | "AGPL" | "standard" | "enterprise" | "new";
  inverse?: boolean;
  onClick?: React.MouseEventHandler<any> | undefined;
@@ -0,0 +1,4 @@
+import { FC, SVGProps } from "react";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+declare const Enterprise: FC<SVGProps<any> & LogoBaseProps>;
+export default Enterprise;
@@ -8,7 +8,6 @@ export interface DateTimeInputMain {
  label?: string;
  required?: boolean;
  tooltip?: string;
-  name: string;
  disabled?: boolean;
  openPickerIcon?: "arrow" | React.ReactNode;
  displayFormat?: string;
@@ -36,7 +35,7 @@ export interface TimeSelectorProps {
  value: DateTime | null;
  onChange: (value: DateTime | null) => void;
  completeCallback?: () => void;
-  timeFormat: "12h" | "24h";
+  timeFormat?: "12h" | "24h";
  secondsSelector: boolean;
 }
 export interface DateSelectorProps {
@@ -4,7 +4,12 @@ export interface DropdownSelectorProps {
  id: string;
  options: SelectorType[];
  selectedOption?: string;
-  onSelect: (value: string, extraValue?: any, label?: string) => void;
+  onSelect: (
+    value: string,
+    extraValue?: any,
+    label?: string,
+    selectedIndex?: number,
+  ) => void;
  hideTriggerAction: () => void;
  open: boolean;
  anchorEl?: (EventTarget & HTMLElement) | null;
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const AutoModeIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default AutoModeIcon;
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const DarkModeIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default DarkModeIcon;
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const ShuffleIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default ShuffleIcon;
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const ExpandLeftCaret: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default ExpandLeftCaret;
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const LanguageIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default LanguageIcon;
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const LightModeIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default LightModeIcon;
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const ShuffleIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default ShuffleIcon;
@@ -211,3 +211,10 @@ export { default as WebhookIcon } from "./WebhookIcon";
 export { default as ExpandIcon } from "./ExpandIcon";
 export { default as NextCaretIcon } from "./NextCaretIcon";
 export { default as PrevCaretIcon } from "./PrevCaretIcon";
+export { default as DarkModeIcon } from "./DarkModeIcon";
+export { default as LightModeIcon } from "./LightModeIcon";
+export { default as AutoModeIcon } from "./AutoModeIcon";
+export { default as ShuffleIcon } from "./ShuffleIcon";
+export { default as LanguageIcon } from "./LanguageIcon";
+export { default as EventBusyIcon } from "./EventBusyIcon";
+export { default as ExpandLeftCaret } from "./ExpandLeftCaret";
@@ -0,0 +1,6 @@
+import React, { FC } from "react";
+import { LinkProps } from "./Link.types";
+declare const Link: FC<
+  LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
+>;
+export default Link;
@@ -0,0 +1,4 @@
+import { CSSObject } from "styled-components";
+export interface LinkProps {
+  sx?: CSSObject;
+}
@@ -1,11 +1,17 @@
 import React from "react";
+import { CSSObject } from "styled-components";
 export interface MainContainerProps {
  menu?: React.ReactElement;
  children: React.ReactElement;
  horizontal?: boolean;
  mobileModeAuto?: boolean;
+  sx?: CSSObject;
 }
 export interface ParentBoxProps {
  horizontal?: boolean;
  mobileModeAuto: boolean;
+  sx?: CSSObject;
+}
+export interface CustomMainProps {
+  horizontal?: boolean;
 }
@@ -0,0 +1,6 @@
+import React, { FC } from "react";
+import { SliderProps } from "./Slider.types";
+declare const Slider: FC<
+  SliderProps & React.InputHTMLAttributes<HTMLInputElement>
+>;
+export default Slider;
@@ -0,0 +1,21 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";
+export interface SliderProps {
+  id: string;
+  label?: string;
+  noLabelMinWidth?: boolean;
+  error?: string;
+  tooltip?: string;
+  sx?: CSSObject;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: CommonHelpTipPlacement;
+  displayValue?: boolean;
+  displayValueFunction?: (value: any) => React.ReactNode;
+}
+export interface SliderContainerProps {
+  children?: React.ReactNode;
+  sx?: CSSObject;
+  error?: boolean;
+  className?: string;
+}
@@ -14,7 +14,7 @@ export interface MainSwitchProps {
  helpTipPlacement?: CommonHelpTipPlacement;
 }
 export interface IndicatorProps {
-  on: boolean;
+  active: boolean;
  children: React.ReactNode;
 }
 export interface SwitchContainerProps {
@@ -142,6 +142,8 @@ export interface SignalColorsThemeProps {
  good: string;
  info: string;
  disabled: string;
+  dark: string;
+  clear: string;
 }
 export interface MenuThemeProps {
  vertical?: {
@@ -270,6 +272,12 @@ export interface WizardColorProps {
  vertical: WizardStepColorProps;
  modal: WizardStepColorProps;
 }
+export interface SliderProps {
+  railBG: string;
+  bulletBG: string;
+  disabledRail: string;
+  disabledBullet: string;
+}
 export interface ThemeDefinitionProps {
  bgColor: string;
  fontColor: string;
@@ -315,11 +323,13 @@ export interface ThemeDefinitionProps {
  informativeMessage?: InformativeMessageProps;
  badge?: BadgeStyleProps;
  wizard?: WizardColorProps;
+  slider?: SliderProps;
 }
 export interface SelectorType {
  label: string;
  value: string;
  icon?: React.ReactNode;
+  indicator?: React.ReactNode;
  extraValue?: any;
  disabled?: boolean;
 }
@@ -81,6 +81,7 @@ export declare const lightColors: {
  linkColor: string;
  mutedText: string;
  disabledOnSwitchBG: string;
+  sliderDisabledBG: string;
 };
 export declare const darkColors: {
  dark: string;
@@ -160,6 +161,7 @@ export declare const darkColors: {
  codeEditorRegexp: string;
  linkColor: string;
  mutedText: string;
+  disabledSliderBullet: string;
 };
 export declare const lightTheme: ThemeDefinitionProps;
 export declare const darkTheme: ThemeDefinitionProps;
@@ -18,7 +18,9 @@ export interface ApplicationLogoProps {
    | "monitor"
    | "observe"
    | "missioncontrol"
-    | "globalconsole";
+    | "globalconsole"
+    | "minio"
+    | "enterprise";
  subVariant?: "simple" | "AGPL" | "standard" | "enterprise" | "new";
  inverse?: boolean;
  onClick?: React.MouseEventHandler<any> | undefined;
@@ -0,0 +1,4 @@
+import { FC, SVGProps } from "react";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+declare const Enterprise: FC<SVGProps<any> & LogoBaseProps>;
+export default Enterprise;
@@ -8,7 +8,6 @@ export interface DateTimeInputMain {
  label?: string;
  required?: boolean;
  tooltip?: string;
-  name: string;
  disabled?: boolean;
  openPickerIcon?: "arrow" | React.ReactNode;
  displayFormat?: string;
@@ -36,7 +35,7 @@ export interface TimeSelectorProps {
  value: DateTime | null;
  onChange: (value: DateTime | null) => void;
  completeCallback?: () => void;
-  timeFormat: "12h" | "24h";
+  timeFormat?: "12h" | "24h";
  secondsSelector: boolean;
 }
 export interface DateSelectorProps {
@@ -4,7 +4,12 @@ export interface DropdownSelectorProps {
  id: string;
  options: SelectorType[];
  selectedOption?: string;
-  onSelect: (value: string, extraValue?: any, label?: string) => void;
+  onSelect: (
+    value: string,
+    extraValue?: any,
+    label?: string,
+    selectedIndex?: number,
+  ) => void;
  hideTriggerAction: () => void;
  open: boolean;
  anchorEl?: (EventTarget & HTMLElement) | null;
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const AutoModeIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default AutoModeIcon;
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const DarkModeIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default DarkModeIcon;
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const ShuffleIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default ShuffleIcon;
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const ExpandLeftCaret: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default ExpandLeftCaret;
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const LanguageIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default LanguageIcon;
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const LightModeIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default LightModeIcon;
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const ShuffleIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default ShuffleIcon;
@@ -211,3 +211,10 @@ export { default as WebhookIcon } from "./WebhookIcon";
 export { default as ExpandIcon } from "./ExpandIcon";
 export { default as NextCaretIcon } from "./NextCaretIcon";
 export { default as PrevCaretIcon } from "./PrevCaretIcon";
+export { default as DarkModeIcon } from "./DarkModeIcon";
+export { default as LightModeIcon } from "./LightModeIcon";
+export { default as AutoModeIcon } from "./AutoModeIcon";
+export { default as ShuffleIcon } from "./ShuffleIcon";
+export { default as LanguageIcon } from "./LanguageIcon";
+export { default as EventBusyIcon } from "./EventBusyIcon";
+export { default as ExpandLeftCaret } from "./ExpandLeftCaret";
@@ -0,0 +1,6 @@
+import React, { FC } from "react";
+import { LinkProps } from "./Link.types";
+declare const Link: FC<
+  LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
+>;
+export default Link;
@@ -0,0 +1,4 @@
+import { CSSObject } from "styled-components";
+export interface LinkProps {
+  sx?: CSSObject;
+}
@@ -1,11 +1,17 @@
 import React from "react";
+import { CSSObject } from "styled-components";
 export interface MainContainerProps {
  menu?: React.ReactElement;
  children: React.ReactElement;
  horizontal?: boolean;
  mobileModeAuto?: boolean;
+  sx?: CSSObject;
 }
 export interface ParentBoxProps {
  horizontal?: boolean;
  mobileModeAuto: boolean;
+  sx?: CSSObject;
+}
+export interface CustomMainProps {
+  horizontal?: boolean;
 }
@@ -0,0 +1,6 @@
+import React, { FC } from "react";
+import { SliderProps } from "./Slider.types";
+declare const Slider: FC<
+  SliderProps & React.InputHTMLAttributes<HTMLInputElement>
+>;
+export default Slider;
@@ -0,0 +1,21 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";
+export interface SliderProps {
+  id: string;
+  label?: string;
+  noLabelMinWidth?: boolean;
+  error?: string;
+  tooltip?: string;
+  sx?: CSSObject;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: CommonHelpTipPlacement;
+  displayValue?: boolean;
+  displayValueFunction?: (value: any) => React.ReactNode;
+}
+export interface SliderContainerProps {
+  children?: React.ReactNode;
+  sx?: CSSObject;
+  error?: boolean;
+  className?: string;
+}
@@ -14,7 +14,7 @@ export interface MainSwitchProps {
  helpTipPlacement?: CommonHelpTipPlacement;
 }
 export interface IndicatorProps {
-  on: boolean;
+  active: boolean;
  children: React.ReactNode;
 }
 export interface SwitchContainerProps {
@@ -142,6 +142,8 @@ export interface SignalColorsThemeProps {
  good: string;
  info: string;
  disabled: string;
+  dark: string;
+  clear: string;
 }
 export interface MenuThemeProps {
  vertical?: {
@@ -270,6 +272,12 @@ export interface WizardColorProps {
  vertical: WizardStepColorProps;
  modal: WizardStepColorProps;
 }
+export interface SliderProps {
+  railBG: string;
+  bulletBG: string;
+  disabledRail: string;
+  disabledBullet: string;
+}
 export interface ThemeDefinitionProps {
  bgColor: string;
  fontColor: string;
@@ -315,11 +323,13 @@ export interface ThemeDefinitionProps {
  informativeMessage?: InformativeMessageProps;
  badge?: BadgeStyleProps;
  wizard?: WizardColorProps;
+  slider?: SliderProps;
 }
 export interface SelectorType {
  label: string;
  value: string;
  icon?: React.ReactNode;
+  indicator?: React.ReactNode;
  extraValue?: any;
  disabled?: boolean;
 }
@@ -81,6 +81,7 @@ export declare const lightColors: {
  linkColor: string;
  mutedText: string;
  disabledOnSwitchBG: string;
+  sliderDisabledBG: string;
 };
 export declare const darkColors: {
  dark: string;
@@ -160,6 +161,7 @@ export declare const darkColors: {
  codeEditorRegexp: string;
  linkColor: string;
  mutedText: string;
+  disabledSliderBullet: string;
 };
 export declare const lightTheme: ThemeDefinitionProps;
 export declare const darkTheme: ThemeDefinitionProps;
@@ -154,6 +154,8 @@ interface SignalColorsThemeProps {
  good: string;
  info: string;
  disabled: string;
+  dark: string;
+  clear: string;
 }
 interface MenuThemeProps {
  vertical?: {
@@ -282,6 +284,12 @@ interface WizardColorProps {
  vertical: WizardStepColorProps;
  modal: WizardStepColorProps;
 }
+interface SliderProps {
+  railBG: string;
+  bulletBG: string;
+  disabledRail: string;
+  disabledBullet: string;
+}
 interface ThemeDefinitionProps {
  bgColor: string;
  fontColor: string;
@@ -327,11 +335,13 @@ interface ThemeDefinitionProps {
  informativeMessage?: InformativeMessageProps$1;
  badge?: BadgeStyleProps;
  wizard?: WizardColorProps;
+  slider?: SliderProps;
 }
 interface SelectorType {
  label: string;
  value: string;
  icon?: React__default.ReactNode;
+  indicator?: React__default.ReactNode;
  extraValue?: any;
  disabled?: boolean;
 }
@@ -407,7 +417,9 @@ interface ApplicationLogoProps {
    | "monitor"
    | "observe"
    | "missioncontrol"
-    | "globalconsole";
+    | "globalconsole"
+    | "minio"
+    | "enterprise";
  subVariant?: "simple" | "AGPL" | "standard" | "enterprise" | "new";
  inverse?: boolean;
  onClick?: React__default.MouseEventHandler<any> | undefined;
@@ -716,6 +728,7 @@ interface MainContainerProps {
  children: React__default.ReactElement;
  horizontal?: boolean;
  mobileModeAuto?: boolean;
+  sx?: CSSObject;
 }

 declare const MainContainer: FC<MainContainerProps>;
@@ -849,7 +862,7 @@ interface MainSwitchProps {
  helpTipPlacement?: CommonHelpTipPlacement;
 }
 interface IndicatorProps {
-  on: boolean;
+  active: boolean;
  children: React__default.ReactNode;
 }
 interface SwitchContainerProps {
@@ -887,7 +900,12 @@ interface DropdownSelectorProps {
  id: string;
  options: SelectorType[];
  selectedOption?: string;
-  onSelect: (value: string, extraValue?: any, label?: string) => void;
+  onSelect: (
+    value: string,
+    extraValue?: any,
+    label?: string,
+    selectedIndex?: number,
+  ) => void;
  hideTriggerAction: () => void;
  open: boolean;
  anchorEl?: (EventTarget & HTMLElement) | null;
@@ -1347,7 +1365,6 @@ interface DateTimeInputMain {
  label?: string;
  required?: boolean;
  tooltip?: string;
-  name: string;
  disabled?: boolean;
  openPickerIcon?: "arrow" | React__default.ReactNode;
  displayFormat?: string;
@@ -1375,7 +1392,7 @@ interface TimeSelectorProps {
  value: DateTime | null;
  onChange: (value: DateTime | null) => void;
  completeCallback?: () => void;
-  timeFormat: "12h" | "24h";
+  timeFormat?: "12h" | "24h";
  secondsSelector: boolean;
 }
 interface DateSelectorProps {
@@ -2210,6 +2227,34 @@ declare const NextCaretIcon: (
  props: SVGProps<SVGSVGElement>,
 ) => React$1.JSX.Element;

+declare const DarkModeIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React$1.JSX.Element;
+
+declare const LightModeIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React$1.JSX.Element;
+
+declare const AutoModeIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React$1.JSX.Element;
+
+declare const ShuffleIcon$1: (
+  props: SVGProps<SVGSVGElement>,
+) => React$1.JSX.Element;
+
+declare const LanguageIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React$1.JSX.Element;
+
+declare const ShuffleIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React$1.JSX.Element;
+
+declare const ExpandLeftCaret: (
+  props: SVGProps<SVGSVGElement>,
+) => React$1.JSX.Element;
+
 declare const InspectMenuIcon: (
  props: SVGProps<SVGSVGElement>,
 ) => React$1.JSX.Element;
@@ -2469,6 +2514,7 @@ export {
  AudioIcon,
  AudioIconMute,
  AuditLogsMenuIcon,
+  AutoModeIcon,
  Autocomplete,
  AutocompleteProps,
  AzureTierIcon,
@@ -2543,6 +2589,7 @@ export {
  CreateIcon,
  CreateNewPathIcon,
  CreateUserIcon,
+  DarkModeIcon,
  DashboardIcon,
  DataTable,
  DataTableProps,
@@ -2579,9 +2626,11 @@ export {
  EgressIcon,
  EnabledIcon,
  EnterpriseLightLogo,
+  ShuffleIcon as EventBusyIcon,
  EventSubscriptionIcon,
  ExpandCaret,
  ExpandIcon,
+  ExpandLeftCaret,
  ExpandOptionsButton,
  ExpandOptionsButtonProps,
  ExtraCommentProps,
@@ -2667,10 +2716,12 @@ export {
  LambdaBalloonIcon,
  LambdaIcon,
  LambdaNotificationsIcon,
+  LanguageIcon,
  LegalHoldIcon,
  LicenseDocIcon,
  LicenseIcon,
  LifecycleConfigIcon,
+  LightModeIcon,
  LinkIcon,
  Loader,
  LockFilledIcon,
@@ -2780,6 +2831,7 @@ export {
  ServiceAccountsIcon,
  SettingsIcon,
  ShareIcon,
+  ShuffleIcon$1 as ShuffleIcon,
  SimpleHeader,
  SimpleHeaderContainerProps,
  SimpleHeaderProps,
@@ -1,6 +1,6 @@
 {
  "name": "mds",
-  "version": "0.12.0",
+  "version": "0.15.0",
  "description": "A MinIO Components Library",
  "homepage": ".",
  "license": "AGPL-3.0-or-later",
@@ -14,55 +14,54 @@
  },
  "types": "dist/mds.d.ts",
  "dependencies": {
-    "@types/styled-components": "^5.1.28",
-    "@uiw/react-textarea-code-editor": "^2.1.9",
+    "@types/styled-components": "^5.1.34",
+    "@uiw/react-textarea-code-editor": "^3.0.2",
    "detect-gpu": "^5.0.37",
-    "luxon": "^3.4.3",
-    "react-calendar": "^4.6.1",
+    "luxon": "^3.4.4",
+    "react-calendar": "^4.8.0",
    "react-virtualized": "^9.22.5",
    "styled-components": "^5.3.11"
  },
  "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
    "@rollup/plugin-commonjs": "^24.0.1",
    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-actions": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-actions": "^7.6.8",
+    "@storybook/addon-essentials": "^7.6.8",
+    "@storybook/addon-interactions": "^7.6.8",
+    "@storybook/addon-links": "^7.6.8",
+    "@storybook/react": "^7.6.8",
+    "@storybook/react-webpack5": "^7.6.8",
    "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.7",
-    "@types/react": "^18.2.36",
-    "@types/luxon": "^3.3.3",
-    "@types/react-virtualized": "^9.21.26",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.48",
+    "@types/luxon": "^3.4.1",
+    "@types/react-virtualized": "^9.21.29",
    "babel-loader": "^9.1.3",
    "jest": "^29.6.4",
    "jest-environment-jsdom": "^29.6.4",
    "lodash": "^4.17.21",
-    "prettier": "^3.0.3",
+    "prettier": "^3.2.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "remark-gfm": "^4.0.0",
    "rollup": "^2.79.1",
    "rollup-plugin-copy": "^3.5.0",
    "rollup-plugin-dts": "^4.2.3",
-    "rollup-plugin-import-css": "^3.3.5",
+    "rollup-plugin-import-css": "^3.4.0",
    "rollup-plugin-import-file": "^1.0.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-terser": "^7.0.2",
-    "storybook": "^7.5.3",
-    "storybook-dark-mode": "^3.0.1",
+    "storybook": "^7.6.8",
+    "storybook-dark-mode": "^3.0.3",
    "ts-jest": "^29.1.1",
    "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
-  },
-  "packageManager": "yarn@3.6.1"
+    "typescript": "^5.3.3"
+  }
 }
@@ -20,7 +20,6 @@ import { Meta, Story } from "@storybook/react";
 import ActionLink from "./ActionLink";
 import { ActionLinkProps } from "./ActionLink.types";

-import TestIcon from "../../utils/TestIcon";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import GlobalStyles from "../GlobalStyles/GlobalStyles";

@@ -33,7 +32,7 @@ export default {
 const Template: Story<ActionLinkProps> = (args) => (
  <StoryThemeProvider>
    <GlobalStyles />
-    <span>
+    <span style={{ fontSize: 16 }}>
      Some Text that can be combined with an{" "}
      <ActionLink
        {...args}
@@ -29,6 +29,7 @@ const ActionLinkBase = styled.button<BaseActionLinkProps>(({ theme, sx }) => ({
  padding: 0,
  color: get(theme, "linkColor", lightColors.linkColor),
  textDecoration: "none",
+  fontSize: "inherit",
  "&:hover": {
    textDecoration: "underline",
  },
@@ -38,6 +38,8 @@ 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";

 const ApplicationLogo: FC<ApplicationLogoProps> = ({
  applicationName,
@@ -100,6 +102,10 @@ const ApplicationLogo: FC<ApplicationLogoProps> = ({
      return <MissionControl inverse={!!inverse} onClick={onClick} />;
    case "globalconsole":
      return <GlobalConsole inverse={!!inverse} onClick={onClick} />;
+    case "enterprise":
+      return <Enterprise inverse={!!inverse} onClick={onClick} />;
+    case "minio":
+      return <ThemedLogo onClick={onClick} />;
  }
 };

@@ -35,7 +35,9 @@ export interface ApplicationLogoProps {
    | "monitor"
    | "observe"
    | "missioncontrol"
-    | "globalconsole";
+    | "globalconsole"
+    | "minio"
+    | "enterprise";
  subVariant?: "simple" | "AGPL" | "standard" | "enterprise" | "new";
  inverse?: boolean;
  onClick?: React.MouseEventHandler<any> | undefined;
@@ -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={"minioSection"}
+                    width="3.8"
+                    height="11.1"
+                  />
+                </g>
+                <g>
+                  <path
+                    className={"minioSection"}
+                    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={"minioSection"}
+                    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={"minioSection"}
+                  d="M47.2,11.3V0.2H49v11.1H47.2z"
+                />
+              </g>
+              <g>
+                <path
+                  className={"minioSection"}
+                  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={"minioApplicationName"}
+              d="M23.1,45.2v4.2H2.8V21.6h20v4.2H7.3v7.5h15v4.2h-15v7.7H23.1z"
+            />
+            <path
+              className={"minioApplicationName"}
+              d="M53.9,21.6v27.8h-4L34.4,29.3l0,20.1h-4.5V21.6h4l15.5,20.1V21.6H53.9z"
+            />
+            <path
+              className={"minioApplicationName"}
+              d="M80.9,21.6v4.2h-9v23.5h-4.5V25.9h-9v-4.2H80.9z"
+            />
+            <path
+              className={"minioApplicationName"}
+              d="M105.7,45.2v4.2H85.4V21.6h20v4.2H89.9v7.5h15v4.2h-15v7.7H105.7z"
+            />
+            <path
+              className={"minioApplicationName"}
+              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={"minioApplicationName"}
+              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={"minioApplicationName"}
+              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={"minioApplicationName"}
+              d="M197.7,21.6v27.8h-4.5V21.6H197.7z"
+            />
+            <path
+              className={"minioApplicationName"}
+              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={"minioApplicationName"}
+              d="M252.4,45.2v4.2h-20.3V21.6h20v4.2h-15.5v7.5h15v4.2h-15v7.7H252.4z"
+            />
+          </g>
+        </g>
+      </g>
+    </LogoBase>
+  );
+};
+
+export default Enterprise;
@@ -14,7 +14,7 @@
 // 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 { useState } from "react";
 import { Meta, Story } from "@storybook/react";

 import Autocomplete from "./Autocomplete";
@@ -27,6 +27,7 @@ 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",
@@ -205,3 +206,23 @@ NoDropArrow.args = {
  ],
  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 /> },
+  ],
+};
@@ -14,7 +14,7 @@
 // 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 React, { FC, Fragment, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import get from "lodash/get";
 import { AutocompleteProps } from "./Autocomplete.types";
@@ -47,6 +47,7 @@ const AutocompleteBase = styled.input(({ theme }) => {
    borderRadius: 3,
    outline: "none",
    transitionDuration: "0.1s",
+    transitionProperty: "border",
    backgroundColor: get(theme, "inputBox.backgroundColor", "#fff"),
    userAutocomplete: "none",
    "&:placeholder": {
@@ -74,6 +75,9 @@ const AutocompleteBase = styled.input(({ theme }) => {
        borderColor: get(theme, "inputBox.disabledBorder", "#494A4D"),
      },
    },
+    "&.withIcon": {
+      paddingLeft: 38,
+    },
  };
 });

@@ -82,6 +86,7 @@ const InputContainer = styled.div<InputContainerProps>(
    display: "flex",
    flexGrow: 1,
    width: "100%",
+    height: 38,
    position: "relative",
    "& .AutocompleteContainer": {
      width: "100%",
@@ -112,6 +117,18 @@ const InputContainer = styled.div<InputContainerProps>(
    "& .inputLabel": {
      marginBottom: error ? 18 : 0,
    },
+    "& .iconOption": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "absolute",
+      marginLeft: 15,
+      height: 38,
+      "& svg": {
+        width: 16,
+        height: 16,
+      },
+    },
    ...sx,
  }),
 );
@@ -136,6 +153,7 @@ const Autocomplete: FC<AutocompleteProps> = ({
 }) => {
  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
@@ -143,9 +161,10 @@ const Autocomplete: FC<AutocompleteProps> = ({

  useEffect(() => {
    if (value !== "") {
-      const option = options.find((option) => option.value === value);
+      const index = options.findIndex((option) => option.value === value);

-      setSearchBoxVal(option?.label || "");
+      setValueSelected(index);
+      setSearchBoxVal(options[index]?.label || "");
    }
  }, []);

@@ -153,6 +172,10 @@ const Autocomplete: FC<AutocompleteProps> = ({
    item.label.toLowerCase().includes(filterVal.toLowerCase()),
  );

+  const optionWithIcon =
+    valueSelected !== null &&
+    (options[valueSelected]?.icon || options[valueSelected]?.indicator);
+
  return (
    <InputContainer
      sx={sx}
@@ -195,6 +218,13 @@ const Autocomplete: FC<AutocompleteProps> = ({
          }
        }}
      >
+        {optionWithIcon && (
+          <Box className={"iconOption"}>
+            {options[valueSelected]?.indicator
+              ? options[valueSelected]?.indicator
+              : options[valueSelected].icon}
+          </Box>
+        )}
        <AutocompleteBase
          disabled={disabled}
          id={id}
@@ -205,6 +235,7 @@ const Autocomplete: FC<AutocompleteProps> = ({
            setFilterVal(e.target.value);
          }}
          placeholder={placeholder}
+          className={`${optionWithIcon ? "withIcon" : ""}`}
        />
        {displayDropArrow && (
          <Box className={"overlayArrow"}>
@@ -213,12 +244,15 @@ const Autocomplete: FC<AutocompleteProps> = ({
        )}

        <DropdownSelector
-          id={`${id}-options-Autocompleteor`}
+          id={`${id}-options-Autocomplete`}
          options={filteredOptions}
          selectedOption={value}
-          onSelect={(nValue, extraValue, label) => {
+          onSelect={(nValue, extraValue, label, id) => {
            setSearchBoxVal(label || "");
            setFilterVal("");
+            if (id !== undefined) {
+              setValueSelected(id);
+            }
            onChange(nValue, extraValue);
          }}
          hideTriggerAction={() => {
@@ -220,7 +220,6 @@ const InputContainer = styled.div<InputContainerProps>(
 const DateTimeInput: FC<DateTimeInputProps> = ({
  sx,
  id,
-  name,
  className,
  pickerStartComponent,
  tooltip = "",
@@ -329,15 +328,7 @@ const DateTimeInput: FC<DateTimeInputProps> = ({
  };

  return (
-    <InputContainer
-      sx={sx}
-      className={`dateTimeInput ${className}`}
-      onKeyDown={() => {
-        if (!isOpen) {
-          setIsOpen(true);
-        }
-      }}
-    >
+    <InputContainer sx={sx} className={`inputItem ${className}`}>
      {label !== "" && (
        <InputLabel
          htmlFor={id}
@@ -366,7 +357,6 @@ const DateTimeInput: FC<DateTimeInputProps> = ({
          <InputBase
            disabled={disabled}
            id={id}
-            name={name}
            value={dateInputVal}
            onChange={onInputChange}
            placeholder={`MM/DD/YYYY${
@@ -25,7 +25,6 @@ export interface DateTimeInputMain {
  label?: string;
  required?: boolean;
  tooltip?: string;
-  name: string;
  disabled?: boolean;
  openPickerIcon?: "arrow" | React.ReactNode;
  displayFormat?: string;
@@ -56,7 +55,7 @@ export interface TimeSelectorProps {
  value: DateTime | null;
  onChange: (value: DateTime | null) => void;
  completeCallback?: () => void;
-  timeFormat: "12h" | "24h";
+  timeFormat?: "12h" | "24h";
  secondsSelector: boolean;
 }

@@ -107,7 +107,7 @@ const DateTimeSelector: FC<DateTimeSelectorProps> = ({
  usePortal = true,
  anchorEl = null,
  secondsSelector,
-  timeFormat,
+  timeFormat = "24h",
  onClose,
  open = false,
  sx,
@@ -31,7 +31,7 @@ const TimeSelectorContainer = styled.div(({ theme }) => ({
      "borderColor",
      lightColors.borderColor,
    )}`,
-    padding: "18px 0 12px",
+    padding: "0 0 12px",
    marginBottom: 10,
    fontWeight: "bold",
    fontSize: 16,
@@ -117,7 +117,7 @@ const TimeSelector: FC<TimeSelectorProps> = ({
  onChange,
  completeCallback,
  secondsSelector = false,
-  timeFormat = "12h" as "12h" | "24h",
+  timeFormat = "24h" as "12h" | "24h",
 }) => {
  const [selectedElements, setSelectedElements] = useState<string[]>([]);

@@ -144,7 +144,12 @@ const DropdownSelector: FC<DropdownSelectorProps> = ({
    const option = options[indexHover];

    if (!option.disabled) {
-      onSelect(option.value, option.extraValue || null, option.label);
+      onSelect(
+        option.value,
+        option.extraValue || null,
+        option.label,
+        indexHover,
+      );
    }

    hideTriggerAction();
@@ -229,6 +234,7 @@ const DropdownSelector: FC<DropdownSelectorProps> = ({
              >
                {option.icon}
                {option.label}
+                {option.indicator}
              </li>
            );
          })}
@@ -21,7 +21,12 @@ export interface DropdownSelectorProps {
  id: string;
  options: SelectorType[];
  selectedOption?: string;
-  onSelect: (value: string, extraValue?: any, label?: string) => void;
+  onSelect: (
+    value: string,
+    extraValue?: any,
+    label?: string,
+    selectedIndex?: number,
+  ) => void;
  hideTriggerAction: () => void;
  open: boolean;
  anchorEl?: (EventTarget & HTMLElement) | null;
@@ -160,19 +160,11 @@ const GlobalStyles = createGlobalStyle`
    }
    
    a {
-        color: ${get(
-          theme,
-          "buttons.callAction.enabled.background",
-          "#07193E",
-        )};
+        color: ${get(theme, "linkColor", lightColors.linkColor)};
    }
    
    a:hover {
-        color: ${get(
-          theme,
-          "buttons.callAction.hover.background",
-          lightColors.hoverBlue,
-        )};
+        color: ${get(theme, "linkColor", lightColors.linkColor)};
    }
    
    hr {
@@ -0,0 +1,40 @@
+// 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 * as React from "react";
+import { SVGProps } from "react";
+
+const AutoModeIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={"min-icon"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <g>
+      <g id="a">
+        <path
+          d="M0,128C0.1,57.3,57.3,0.1,128,0c70.6,0,128,57.4,128,128c-0.1,70.7-57.3,127.9-128,128C57.4,256,0,198.6,0,128z M30.8,128
+			c0,53.7,43.5,97.2,97.2,97.2s97.2-43.5,97.2-97.2S181.7,30.8,128,30.8c0,0,0,0,0,0C74.3,30.8,30.8,74.3,30.8,128z M128,47.3
+			c41.1,4.2,73.2,38.5,73.2,80.7S169,204.4,128,208.7V47.3z"
+          fill={"currentcolor"}
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export default AutoModeIcon;
@@ -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 * as React from "react";
+import { SVGProps } from "react";
+
+const DarkModeIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={"min-icon"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <g>
+      <g transform="translate(0 0)">
+        <path
+          d="M228.4,151.3c-54.3,14-109.7-18.6-123.7-73c-4.3-16.6-4.3-34.1,0-50.7L111.8,0L84.9,9.4C34,27.3,0,75.3,0,129.2
+			C0,199.1,56.9,256,126.8,256h0.1c53.9-0.1,101.8-34.1,119.6-84.9l9.4-26.9L228.4,151.3z"
+          fill={"currentcolor"}
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export default DarkModeIcon;
@@ -0,0 +1,37 @@
+// 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 * as React from "react";
+import { SVGProps } from "react";
+
+const ShuffleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <path
+      d="M93.9,204l30.9-30.9l30.9,30.9l13.4-13.4l-30.9-30.9l30.9-30.9l-13.4-13.4l-30.9,30.9l-30.9-30.9l-13.4,13.4l30.9,30.9
+        l-30.9,30.9L93.9,204z M216.7,26.6H204V1.3h-25.3v25.3H77.3V1.3H52v25.3H39.3C25.2,26.6,14.1,38,14.1,52l-0.1,177.4
+        c0,13.9,11.3,25.3,25.3,25.3h177.4c13.9,0,25.3-11.4,25.3-25.3V52C242.1,38,230.6,26.6,216.7,26.6z M216.7,229.4H39.3V90h177.4
+        V229.4z"
+    />
+  </svg>
+);
+
+export default ShuffleIcon;
@@ -0,0 +1,52 @@
+// 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 * as React from "react";
+import { SVGProps } from "react";
+
+const ExpandLeftCaret = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 15 15"
+    {...props}
+  >
+    <g id="OpenListIcon-full" transform="translate(4 4.984)">
+      <g
+        id="noun_chevron_2320228"
+        transform="translate(0.167 4.016) rotate(-90)"
+      >
+        <path
+          id="Trazado_6842"
+          d="M5.3,1.7c0-0.1,0-0.2-0.1-0.3C5,1.2,4.8,1.2,4.6,1.3c0,0,0,0,0,0L1.9,4.2l-2.7-2.9
+			c-0.1-0.2-0.4-0.2-0.5,0c0,0,0,0,0,0c-0.2,0.2-0.2,0.4,0,0.6l2.9,3.2c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1L5.1,2
+			C5.2,1.9,5.3,1.8,5.3,1.7z"
+        />
+      </g>
+      <rect
+        id="Rectángulo_896"
+        x="3.2"
+        y="-1.4"
+        fill={"none"}
+        width="0.5"
+        height="0.5"
+      />
+    </g>
+  </svg>
+);
+
+export default ExpandLeftCaret;
@@ -14,7 +14,7 @@
 // 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, ReactNode, useState } from "react";
+import { Fragment, ReactNode, useState } from "react";
 import { Meta, Story } from "@storybook/react";

 import * as cicons from "./";
@@ -182,6 +182,12 @@ const Template: Story = (args) => {
              AudioIconMute
            </div>

+            <div className="story-icon">
+              <cicons.AutoModeIcon />
+              <br />
+              AutoModeIcon
+            </div>
+
            <div className="story-icon">
              <cicons.AzureTierIcon />
              <br />
@@ -404,6 +410,12 @@ const Template: Story = (args) => {
              CreateUserIcon
            </div>

+            <div className="story-icon">
+              <cicons.DarkModeIcon />
+              <br />
+              DarkModeIcon
+            </div>
+
            <div className="story-icon">
              <cicons.DashboardIcon />
              <br />
@@ -518,6 +530,12 @@ const Template: Story = (args) => {
              EnabledIcon
            </div>

+            <div className="story-icon">
+              <cicons.EventBusyIcon />
+              <br />
+              EventBusyIcon
+            </div>
+
            <div className="story-icon">
              <cicons.EventSubscriptionIcon />
              <br />
@@ -536,6 +554,12 @@ const Template: Story = (args) => {
              ExpandIcon
            </div>

+            <div className="story-icon">
+              <cicons.ExpandLeftCaret />
+              <br />
+              ExpandLeftCaret
+            </div>
+
            <div className="story-icon">
              <cicons.ExtraFeaturesIcon />
              <br />
@@ -662,6 +686,12 @@ const Template: Story = (args) => {
              LambdaNotificationsIcon
            </div>

+            <div className="story-icon">
+              <cicons.LanguageIcon />
+              <br />
+              LanguageIcon
+            </div>
+
            <div className="story-icon">
              <cicons.LegalHoldIcon />
              <br />
@@ -680,6 +710,12 @@ const Template: Story = (args) => {
              LifecycleConfigIcon
            </div>

+            <div className="story-icon">
+              <cicons.LightModeIcon />
+              <br />
+              LightModeIcon
+            </div>
+
            <div className="story-icon">
              <cicons.LinkIcon />
              <br />
@@ -1028,6 +1064,12 @@ const Template: Story = (args) => {
              ShareIcon
            </div>

+            <div className="story-icon">
+              <cicons.ShuffleIcon />
+              <br />
+              ShuffleIcon
+            </div>
+
            <div className="story-icon">
              <cicons.SpeedtestIcon />
              <br />
@@ -0,0 +1,41 @@
+// 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 * as React from "react";
+import { SVGProps } from "react";
+
+const LanguageIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <path
+      d="M127.9,0C57.2,0,0,57.3,0,128s57.2,128,127.9,128c70.8,0,128.1-57.3,128.1-128S198.7,0,127.9,0z M216.6,76.8h-37.8
+	c-4.1-16-10-31.4-17.7-45.6C184.7,39.3,204.3,55.7,216.6,76.8z M128,26.1c10.6,15.4,18.9,32.4,24.4,50.7h-48.9
+	C109.1,58.5,117.4,41.5,128,26.1z M28.9,153.6c-2-8.2-3.3-16.8-3.3-25.6s1.3-17.4,3.3-25.6h43.3c-1,8.4-1.8,16.9-1.8,25.6
+	s0.8,17.2,1.8,25.6H28.9z M39.4,179.2h37.8c4.1,16,10,31.4,17.7,45.6C71.3,216.7,51.7,200.4,39.4,179.2z M77.2,76.8H39.4
+	c12.3-21.2,31.9-37.5,55.4-45.6C87.2,45.4,81.3,60.8,77.2,76.8z M128,229.9c-10.6-15.4-18.9-32.4-24.4-50.7h48.9
+	C146.9,197.5,138.6,214.5,128,229.9z M158,153.6H98c-1.2-8.4-2-16.9-2-25.6s0.9-17.3,2-25.6H158c1.2,8.3,2,16.9,2,25.6
+	S159.1,145.2,158,153.6z M161.2,224.8c7.7-14.2,13.6-29.6,17.7-45.6h37.8C204.3,200.3,184.7,216.7,161.2,224.8z M183.8,153.6
+	c1-8.4,1.8-16.9,1.8-25.6s-0.8-17.2-1.8-25.6h43.3c2,8.2,3.3,16.8,3.3,25.6s-1.3,17.4-3.3,25.6H183.8z"
+    />
+  </svg>
+);
+
+export default LanguageIcon;
@@ -0,0 +1,45 @@
+// 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 * as React from "react";
+import { SVGProps } from "react";
+
+const LightModeIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={"min-icon"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <path
+      d="M113.8,241.7v-27c0-7.7,6.2-13.9,13.9-13.9c7.7,0,13.9,6.2,13.9,13.9l0,0v27c0,7.7-6.2,13.9-13.9,13.9
+	C120,255.6,113.8,249.4,113.8,241.7L113.8,241.7z M198.3,218.2l-19.1-19.1c-5.4-5.4-5.4-14.2,0-19.6c5.4-5.4,14.2-5.4,19.6,0
+	l19.1,19.1c5.4,5.4,5.4,14.2,0,19.6C212.4,223.6,203.7,223.6,198.3,218.2L198.3,218.2L198.3,218.2z M37.4,218.2
+	c-5.4-5.4-5.4-14.2,0-19.6l19.1-19.1c5.4-5.4,14.2-5.4,19.6,0s5.4,14.2,0,19.6l0,0L57,218.2C51.6,223.6,42.8,223.6,37.4,218.2
+	L37.4,218.2z M72.1,128c0-29.9,24.3-54.1,54.1-54.1c6,0,11.9,1,17.5,2.9c28.2,8.9,43.9,39,35,67.3c-5.3,16.7-18.4,29.8-35.1,35
+	c-28.3,9.7-59-5.4-68.7-33.7C73.1,139.9,72.1,134,72.1,128L72.1,128z M214.4,142.6c-8.1,0-14.6-6.6-14.6-14.6s6.6-14.6,14.6-14.6
+	l0,0h27c8.1,0,14.6,6.6,14.6,14.6s-6.6,14.6-14.6,14.6H214.4z M13.9,141.9c-7.7,0.1-13.9-6.1-14-13.7c-0.1-7.7,6.1-13.9,13.7-14
+	c0.1,0,0.2,0,0.2,0h27c7.7-0.1,13.9,6.1,14,13.7s-6.1,13.9-13.7,14c-0.1,0-0.2,0-0.2,0H13.9z M179.1,76.5c-5.4-5.4-5.4-14.2,0-19.6
+	l19.1-19.1c5.4-5.4,14.2-5.4,19.6,0c5.4,5.4,5.4,14.2,0,19.6l-19.1,19.1C193.3,81.9,184.6,81.9,179.1,76.5L179.1,76.5z M56.5,76.5
+	L37.4,57.4c-5.4-5.4-5.4-14.2,0-19.6s14.2-5.4,19.6,0l19.1,19.1c5.4,5.4,5.4,14.2,0,19.6c-2.6,2.6-6.1,4.1-9.8,4.1
+	C62.6,80.5,59.1,79.1,56.5,76.5z M113.8,41.3v-27c0-7.7,6.2-13.9,13.9-13.9c7.7,0,13.9,6.2,13.9,13.9v27c0,7.7-6.2,13.9-13.9,13.9
+	C120,55.2,113.8,48.9,113.8,41.3z"
+      fill={"currentcolor"}
+    />
+  </svg>
+);
+
+export default LightModeIcon;
@@ -0,0 +1,51 @@
+// 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 * as React from "react";
+import { SVGProps } from "react";
+
+const ShuffleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <g>
+      <path
+        d="M97.8,135.9c-5.6,8.5-11.5,16.7-18.5,24.1C62.7,177.5,41,182.2,17.6,181c-21-1.1-20.9,31.5,0,32.5
+			c43.9,2.2,75-16.7,99.7-49c-4.1-5.3-7.8-10.6-11.3-15.8C103.2,144.4,100.4,140.1,97.8,135.9z"
+      />
+      <path
+        d="M140.2,110c2.3,3.5,4.5,7,6.7,10.5c4.1-5.7,8.5-11.2,13.5-16.3c12.5-12.9,26.7-18.2,42.3-19.7
+			c-1,1.2-2,2.4-3,3.6c-5.7,6.8-6.7,16.3,0,23c5.9,5.9,17.3,6.8,23,0c8.8-10.5,17.2-21.3,26-31.7c5.7-5.8,7.9-15.3,0.8-23
+			l-29.3-31.7c-14.3-15.5-37.2,7.6-23,23l3.8,4.1c-16,1.1-31.4,5.2-45.6,14.4C144.9,73.1,136,82,128.1,91.7c1.6,2.2,3.2,4.5,4.8,6.9
+			C135.3,102.4,137.8,106.3,140.2,110z"
+      />
+      <path
+        d="M222.8,144.9c-2.8-3.3-6.8-4.8-11-4.8c-4.5,0-9,1.7-12,4.8c-6.7,6.7-5.7,16.2,0,23c1,1.2,2,2.4,3,3.6
+			c-15.6-1.5-29.8-6.8-42.3-19.7c-7.1-7.3-13.1-15.4-18.7-23.8c-5.5-8.1-10.6-16.5-16-24.7c-1-1.6-2.1-3.1-3.2-4.6
+			c-24.3-34.8-54.6-56.4-98-56.4c-2.3,0-4.6,0.1-6.9,0.2c-20.5,1-21,32.6-1,32.6c0.3,0,0.7,0,1,0c2.3-0.1,4.5-0.2,6.7-0.2
+			c20.8,0,39.9,5.3,54.9,21.1c9.2,9.7,16.5,20.8,23.6,32.1c3.4,5.3,6.7,10.7,10.2,15.9c3,4.5,6.1,9,9.4,13.4
+			c9.3,12.5,19.9,24,33,32.5c14.2,9.2,29.6,13.3,45.6,14.4l-3.8,4.1c-10.9,11.8,0.1,28.1,12.2,28.1c3.7,0,7.5-1.5,10.8-5.1
+			l29.3-31.7c7.1-7.7,4.9-17.3-0.8-23C240,166.1,231.6,155.4,222.8,144.9z"
+      />
+    </g>
+  </svg>
+);
+
+export default ShuffleIcon;
@@ -227,3 +227,10 @@ export { default as WebhookIcon } from "./WebhookIcon";
 export { default as ExpandIcon } from "./ExpandIcon";
 export { default as NextCaretIcon } from "./NextCaretIcon";
 export { default as PrevCaretIcon } from "./PrevCaretIcon";
+export { default as DarkModeIcon } from "./DarkModeIcon";
+export { default as LightModeIcon } from "./LightModeIcon";
+export { default as AutoModeIcon } from "./AutoModeIcon";
+export { default as ShuffleIcon } from "./ShuffleIcon";
+export { default as LanguageIcon } from "./LanguageIcon";
+export { default as EventBusyIcon } from "./EventBusyIcon";
+export { default as ExpandLeftCaret } from "./ExpandLeftCaret";
@@ -0,0 +1,54 @@
+// 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 Link from "./Link";
+import { LinkProps } from "./Link.types";
+
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import GlobalStyles from "../GlobalStyles/GlobalStyles";
+
+export default {
+  title: "MDS/Forms/Link",
+  component: Link,
+  argTypes: {},
+} as Meta<typeof Link>;
+
+const Template: Story<LinkProps> = (args) => (
+  <StoryThemeProvider>
+    <GlobalStyles />
+    <span style={{ fontSize: 16 }}>
+      We can have a{" "}
+      <Link {...args} target={"_blank"} href={"https://min.io"}>
+        Link
+      </Link>
+      , to point to another page.
+    </span>
+  </StoryThemeProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const CustomStyles = Template.bind({});
+CustomStyles.args = {
+  sx: {
+    backgroundColor: "#f87",
+    color: "#fff",
+  },
+};
@@ -0,0 +1,54 @@
+// 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 { lightColors } from "../../global/themes";
+import { LinkProps } from "./Link.types";
+
+const LinkBase = styled.a<LinkProps>(({ theme, sx }) => ({
+  cursor: "pointer",
+  display: "inline-flex",
+  backgroundColor: "transparent",
+  border: 0,
+  padding: 0,
+  color: get(theme, "linkColor", lightColors.linkColor),
+  textDecoration: "none",
+  fontSize: "inherit",
+  "&:visited": {
+    color: get(theme, "linkColor", lightColors.linkColor),
+  },
+  "&:hover": {
+    textDecoration: "underline",
+    color: get(theme, "linkColor", lightColors.linkColor),
+  },
+  ...sx,
+}));
+
+const Link: FC<LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>> = ({
+  sx,
+  children,
+  ...props
+}) => {
+  return (
+    <LinkBase {...props} sx={sx}>
+      {children}
+    </LinkBase>
+  );
+};
+
+export default Link;
@@ -0,0 +1,21 @@
+// 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 LinkProps {
+  sx?: CSSObject;
+}
@@ -17,13 +17,17 @@
 import React, { cloneElement, FC } from "react";
 import get from "lodash/get";
 import styled from "styled-components";
-import { MainContainerProps, ParentBoxProps } from "./MainContainer.types";
+import {
+  CustomMainProps,
+  MainContainerProps,
+  ParentBoxProps,
+} from "./MainContainer.types";
 import { breakPoints } from "../../global/utils";

-const CustomMain = styled.main(({ theme }) => {
+const CustomMain = styled.main<CustomMainProps>(({ theme, horizontal }) => {
  return {
    flexGrow: 1,
-    height: "100vh",
+    height: !!horizontal ? "initial" : "100vh",
    overflow: "auto",
    position: "relative",
    backgroundColor: get(theme, "bgColor", "#fff"),
@@ -32,7 +36,7 @@ const CustomMain = styled.main(({ theme }) => {
 });

 const ParentBox = styled.div<ParentBoxProps>(
-  ({ horizontal, mobileModeAuto }) => {
+  ({ horizontal, mobileModeAuto, sx }) => {
    let breakPoint = {};

    if (mobileModeAuto) {
@@ -47,6 +51,7 @@ const ParentBox = styled.div<ParentBoxProps>(
      display: "flex",
      flexDirection: !!horizontal ? "column" : "row",
      ...breakPoint,
+      ...sx,
    };
  },
 );
@@ -56,15 +61,19 @@ const MainContainer: FC<MainContainerProps> = ({
  menu,
  horizontal,
  mobileModeAuto = true,
+  sx,
 }) => {
  return (
    <ParentBox
      className={"parentBox"}
      horizontal={horizontal}
      mobileModeAuto={mobileModeAuto}
+      sx={sx}
    >
      {menu && cloneElement(menu, { mobileModeAuto })}
-      <CustomMain>{children}</CustomMain>
+      <CustomMain horizontal={horizontal} className={"mainPage"}>
+        {children}
+      </CustomMain>
    </ParentBox>
  );
 };
@@ -15,15 +15,22 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 import React from "react";
+import { CSSObject } from "styled-components";

 export interface MainContainerProps {
  menu?: React.ReactElement;
  children: React.ReactElement;
  horizontal?: boolean;
  mobileModeAuto?: boolean;
+  sx?: CSSObject;
 }

 export interface ParentBoxProps {
  horizontal?: boolean;
  mobileModeAuto: boolean;
+  sx?: CSSObject;
+}
+
+export interface CustomMainProps {
+  horizontal?: boolean;
 }
@@ -108,7 +108,7 @@ const ProgressBar: FC<ProgressBarProps> = ({
  variant = "indeterminate",
  notificationLabel = "",
  color = "blue",
-  barHeight = 8,
+  barHeight = 6,
  transparentBG = false,
 }) => {
  const calcPerc = (value * 100) / maxValue;
@@ -14,7 +14,7 @@
 // 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 { Fragment, useState } from "react";
 import { Meta, Story } from "@storybook/react";

 import Select from "./Select";
@@ -27,6 +27,7 @@ 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/Select",
@@ -186,3 +187,30 @@ WithPlaceholder.args = {
    { label: "No Extra Value", value: "value4", icon: <UsersIcon /> },
  ],
 };
+
+export const IndicatorInLabel = Template.bind({});
+IndicatorInLabel.args = {
+  placeholder: "This Select has placeholder",
+  options: [
+    {
+      label: "Option with indicator",
+      value: "value1",
+      icon: <DownloadIcon />,
+      extraValue: { anotherVar: "test1" },
+      indicator: <TestIcon style={{ fill: "#080" }} />,
+    },
+    {
+      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 /> },
+  ],
+};
@@ -49,6 +49,7 @@ const SelectBase = styled.div(({ theme }) => {
    transitionDuration: "0.1s",
    backgroundColor: get(theme, "inputBox.backgroundColor", "#fff"),
    userSelect: "none",
+    gap: 8,
    "&:placeholder": {
      color: "#858585",
      opacity: 1,
@@ -74,6 +75,10 @@ const SelectBase = styled.div(({ theme }) => {
        borderColor: get(theme, "inputBox.disabledBorder", "#494A4D"),
      },
    },
+    "& svg": {
+      width: 16,
+      height: 16,
+    },
  };
 });

@@ -181,15 +186,17 @@ const Select: FC<SelectProps> = ({
      >
        <SelectBase className={disabled ? "disabled" : ""}>
          <Fragment>
-            {fixedLabel !== "" ? (
+            {fixedLabel && fixedLabel !== "" ? (
              fixedLabel
            ) : (
              <Fragment>
+                {selectedLabel?.icon}
                {selectedLabel?.label || (
                  <i style={{ opacity: 0.6 }}>
                    {placeholder !== "" ? placeholder : ""}
                  </i>
                )}
+                {selectedLabel?.indicator}
              </Fragment>
            )}
          </Fragment>
@@ -0,0 +1,116 @@
+// 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 { Meta, Story } from "@storybook/react";
+
+import Slider from "./Slider";
+import { SliderProps } from "./Slider.types";
+
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import GlobalStyles from "../GlobalStyles/GlobalStyles";
+import FormLayout from "../FormLayout/FormLayout";
+import TestIcon from "../../utils/TestIcon";
+import Box from "../Box/Box";
+import UsersIcon from "../Icons/UsersIcon";
+import PasswordKeyIcon from "../Icons/PasswordKeyIcon";
+import { useState } from "react";
+
+export default {
+  title: "MDS/Forms/Slider",
+  component: Slider,
+  argTypes: {},
+} as Meta<typeof Slider>;
+
+const Template: Story<SliderProps> = (args) => {
+  const [value, setValue] = useState<number>(0);
+  return (
+    <StoryThemeProvider>
+      <GlobalStyles />
+      <FormLayout>
+        <Slider
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value);
+          }}
+          {...args}
+        />
+      </FormLayout>
+    </StoryThemeProvider>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Slide to select a value",
+  required: true,
+};
+
+export const DisabledSlider = Template.bind({});
+DisabledSlider.args = {
+  label: "Slide to select a value",
+  required: true,
+  disabled: true,
+  value: "Demo Text",
+};
+
+export const ErrorSlider = Template.bind({});
+ErrorSlider.args = {
+  label: "Slider with Error",
+  required: true,
+  error: "This is an error message",
+};
+
+export const WithTooltip = Template.bind({});
+WithTooltip.args = {
+  label: "Slide to select a value",
+  required: true,
+  tooltip: "Tooltip text",
+};
+
+export const DisplayValue = Template.bind({});
+DisplayValue.args = {
+  label: "Slide with visible value",
+  required: true,
+  tooltip: "Tooltip text",
+  displayValue: true,
+};
+
+export const CustomDisplayFunction = Template.bind({});
+CustomDisplayFunction.args = {
+  label: "Slide with visible value",
+  required: true,
+  tooltip: "Tooltip text",
+  displayValue: true,
+  min: 0,
+  max: 10,
+  step: 1,
+  marks: true,
+  displayValueFunction: (value) => {
+    return `${value} % Reduction`;
+  },
+};
+
+export const WithSteps = Template.bind({});
+WithSteps.args = {
+  label: "Slide with visible value",
+  required: true,
+  tooltip: "Tooltip text",
+  displayValue: true,
+  min: 0,
+  max: 10,
+  step: 1,
+  marks: true,
+};
@@ -0,0 +1,224 @@
+// 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 } from "react";
+import styled, { CSSObject } from "styled-components";
+import get from "lodash/get";
+import HelpIcon from "../Icons/HelpIcon";
+import Tooltip from "../Tooltip/Tooltip";
+import InputLabel from "../InputLabel/InputLabel";
+import Box from "../Box/Box";
+import { SliderContainerProps, SliderProps } from "./Slider.types";
+import { lightColors } from "../../global/themes";
+
+const InputBase = styled.input(({ theme }) => {
+  const thumb: CSSObject = {
+    "-webkit-appearance": "none",
+    appearance: "none",
+    backgroundColor: get(theme, "slider.bulletBG", lightColors.bulletColor),
+    height: 15,
+    width: 15,
+    borderRadius: "100%",
+  };
+
+  return {
+    '&[type="range"]': {
+      width: "100%",
+      height: 6,
+      zIndex: 100,
+      margin: 0,
+      "-webkit-appearance": "none",
+      appearance: "none",
+      background: "transparent",
+      cursor: "pointer",
+      "&:focus": {
+        outline: "none",
+      },
+      "&::-webkit-slider-thumb": {
+        ...thumb,
+      },
+      "&::-moz-range-thumb": {
+        ...thumb,
+        border: "none",
+      },
+    },
+    '&[type="range"]:disabled': {
+      cursor: "not-allowed",
+      "&::-webkit-slider-thumb": {
+        backgroundColor: get(
+          theme,
+          "slider.disabledBullet",
+          lightColors.disabledGrey,
+        ),
+      },
+      "&::-moz-range-thumb": {
+        backgroundColor: get(
+          theme,
+          "slider.disabledBullet",
+          lightColors.disabledGrey,
+        ),
+      },
+    },
+  };
+});
+
+const SliderContainer = styled.div<SliderContainerProps>(
+  ({ theme, error, sx }) => ({
+    display: "flex",
+    alignItems: "center",
+    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,
+    },
+    "& .displayValue": {
+      fontSize: 12,
+      fontWeight: "bold",
+    },
+    ...sx,
+  }),
+);
+
+const BackBar = styled.div(({ theme }) => ({
+  position: "absolute",
+  width: "100%",
+  height: 6,
+  top: "50%",
+  transform: "translateY(-50%)",
+  backgroundColor: get(theme, "slider.railBG", lightColors.borderColor),
+  borderRadius: 15,
+  display: "flex",
+  alignItems: "center",
+  zIndex: 90,
+  "&.disabled": {
+    backgroundColor: get(
+      theme,
+      "slider.disabledRail",
+      lightColors.disabledBGGrey,
+    ),
+  },
+}));
+
+const Slider: FC<SliderProps & React.InputHTMLAttributes<HTMLInputElement>> = ({
+  id,
+  tooltip = "",
+  noLabelMinWidth,
+  label = "",
+  required,
+  className,
+  error,
+  sx,
+  helpTip,
+  helpTipPlacement,
+  min = 0,
+  max = 100,
+  type,
+  value,
+  displayValue,
+  displayValueFunction,
+  step = 1,
+  disabled = false,
+  ...props
+}) => {
+  return (
+    <SliderContainer
+      error={!!error && error !== ""}
+      sx={sx}
+      className={`slider ${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"}>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+          }}
+        >
+          <Box
+            sx={{
+              flexGrow: 1,
+              position: "relative",
+              height: 6,
+              display: "flex",
+              alignItems: "flex-start",
+            }}
+          >
+            <InputBase
+              id={id}
+              type={"range"}
+              className={"rangeSelector"}
+              min={min}
+              max={max}
+              step={step}
+              disabled={disabled}
+              {...props}
+            />
+            <BackBar className={`${disabled ? "disabled" : ""}`} />
+          </Box>
+          {!!displayValue ? (
+            <span className={"displayValue"}>
+              {displayValueFunction ? displayValueFunction(value || 0) : value}
+            </span>
+          ) : null}
+        </Box>
+        {error !== "" && <Box className={"errorText"}>{error}</Box>}
+      </Box>
+    </SliderContainer>
+  );
+};
+
+export default Slider;
@@ -0,0 +1,39 @@
+// 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 from "react";
+import { CSSObject } from "styled-components";
+import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";
+
+export interface SliderProps {
+  id: string;
+  label?: string;
+  noLabelMinWidth?: boolean;
+  error?: string;
+  tooltip?: string;
+  sx?: CSSObject;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: CommonHelpTipPlacement;
+  displayValue?: boolean;
+  displayValueFunction?: (value: any) => React.ReactNode;
+}
+
+export interface SliderContainerProps {
+  children?: React.ReactNode;
+  sx?: CSSObject;
+  error?: boolean;
+  className?: string;
+}
@@ -28,13 +28,13 @@ import HelpIcon from "../Icons/HelpIcon";
 import Box from "../Box/Box";
 import FieldContainer from "../../global/FieldContainer";

-const SwitchIndicator = styled.span<IndicatorProps>(({ theme, on }) => ({
+const SwitchIndicator = styled.span<IndicatorProps>(({ theme, active }) => ({
  fontSize: 12,
-  color: on
+  color: active
    ? get(theme, "switchButton.onLabelColor", "#081C42")
    : get(theme, "switchButton.offLabelColor", "#E2E2E2"),
  margin: "0 8px 0 10px",
-  fontWeight: on ? "bold" : "normal",
+  fontWeight: active ? "bold" : "normal",
 }));

 const SwitchItem = styled.label(({ theme }) => ({
@@ -145,7 +145,7 @@ const Switch: FC<SwitchProps & React.InputHTMLAttributes<HTMLInputElement>> = ({
  const switchComponent = (
    <SwitchContainer>
      {!switchOnly && (
-        <SwitchIndicator on={!checked}>
+        <SwitchIndicator active={!checked}>
          {indicatorLabels && indicatorLabels.length > 1
            ? indicatorLabels[1]
            : "OFF"}
@@ -156,7 +156,7 @@ const Switch: FC<SwitchProps & React.InputHTMLAttributes<HTMLInputElement>> = ({
        <span className={"switchRail"} />
      </SwitchItem>
      {!switchOnly && (
-        <SwitchIndicator on={!!checked}>
+        <SwitchIndicator active={!!checked}>
          {indicatorLabels ? indicatorLabels[0] : "ON"}
        </SwitchIndicator>
      )}
@@ -32,7 +32,7 @@ export interface MainSwitchProps {
 }

 export interface IndicatorProps {
-  on: boolean;
+  active: boolean;
  children: React.ReactNode;
 }

@@ -22,9 +22,9 @@ const Logo = styled.svg((props) => ({
  fill: get(props, `theme.logoColor`, "#C51C3F"),
 }));

-const ThemedLogo: FC<SVGProps<any>> = ({ width }) => {
+const ThemedLogo: FC<SVGProps<any>> = ({ width, onClick }) => {
  return (
-    <Logo viewBox="0 0 162.612 24.465" width={width}>
+    <Logo viewBox="0 0 162.612 24.465" width={width} onClick={onClick}>
      <path d="M52.751.414h9.108v23.63h-9.108zM41.711.74l-18.488 9.92a.919.919 0 0 1-.856 0L3.879.74A2.808 2.808 0 0 0 2.558.414h-.023A2.4 2.4 0 0 0 0 2.641v21.376h9.1V13.842a.918.918 0 0 1 1.385-.682l10.361 5.568a3.634 3.634 0 0 0 3.336.028l10.933-5.634a.917.917 0 0 1 1.371.69v10.205h9.1V2.641A2.4 2.4 0 0 0 43.055.414h-.023a2.808 2.808 0 0 0-1.321.326zm65.564-.326h-9.237v10.755a.913.913 0 0 1-1.338.706L72.762.675a2.824 2.824 0 0 0-1.191-.261h-.016a2.4 2.4 0 0 0-2.535 2.227v21.377h9.163V13.275a.914.914 0 0 1 1.337-.707l24.032 11.2a2.813 2.813 0 0 0 1.188.26 2.4 2.4 0 0 0 2.535-2.227zm7.161 23.63V.414h4.191v23.63zm28.856.421c-11.274 0-19.272-4.7-19.272-12.232C124.02 4.741 132.066 0 143.292 0s19.32 4.7 19.32 12.233-7.902 12.232-19.32 12.232zm0-21.333c-8.383 0-14.84 3.217-14.84 9.1 0 5.926 6.457 9.1 14.84 9.1s14.887-3.174 14.887-9.1c0-5.883-6.504-9.1-14.887-9.1z" />
    </Logo>
  );
@@ -15,7 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 import React from "react";
-import { lightColors } from "./themes";

 export interface ButtonThemeProps {
  border: string;
@@ -180,6 +179,8 @@ export interface SignalColorsThemeProps {
  good: string;
  info: string;
  disabled: string;
+  dark: string;
+  clear: string;
 }

 export interface MenuThemeProps {
@@ -323,6 +324,13 @@ export interface WizardColorProps {
  modal: WizardStepColorProps;
 }

+export interface SliderProps {
+  railBG: string;
+  bulletBG: string;
+  disabledRail: string;
+  disabledBullet: string;
+}
+
 export interface ThemeDefinitionProps {
  bgColor: string;
  fontColor: string;
@@ -368,12 +376,14 @@ export interface ThemeDefinitionProps {
  informativeMessage?: InformativeMessageProps;
  badge?: BadgeStyleProps;
  wizard?: WizardColorProps;
+  slider?: SliderProps;
 }

 export interface SelectorType {
  label: string;
  value: string;
  icon?: React.ReactNode;
+  indicator?: React.ReactNode;
  extraValue?: any;
  disabled?: boolean;
 }
@@ -100,12 +100,13 @@ export const lightColors = {
  linkColor: "#2781B0",
  mutedText: "#87888d",
  disabledOnSwitchBG: "#a9d3c5",
+  sliderDisabledBG: "#dbdbdb",
 };

 export const darkColors = {
  dark: "#181F2A",
  sectionOneBG: "#283140",
-  defaultFontColor: "#8E98A9",
+  defaultFontColor: "#C4C9D0",
  bulletColor: "#4B586A",
  borderColor: "#8E98A9",
  boxBackground: "#283140",
@@ -180,6 +181,7 @@ export const darkColors = {
  codeEditorRegexp: "#ffd582",
  linkColor: "#85B3EE",
  mutedText: "#767a80",
+  disabledSliderBullet: "#939393",
 };

 export const lightTheme: ThemeDefinitionProps = {
@@ -202,13 +204,15 @@ export const lightTheme: ThemeDefinitionProps = {
    info: lightColors.bulletColor,
    warning: lightColors.mainOrange,
    disabled: lightColors.disabledGrey,
+    dark: lightColors.defaultFontColor,
+    clear: lightColors.white,
  },
  buttons: {
    regular: {
      enabled: {
        border: lightColors.mainGrey,
        text: lightColors.mainGrey,
-        background: lightColors.white,
+        background: "transparent",
        iconColor: lightColors.mainGrey,
      },
      disabled: {
@@ -260,7 +264,7 @@ export const lightTheme: ThemeDefinitionProps = {
      enabled: {
        border: lightColors.mainRed,
        text: lightColors.mainRed,
-        background: lightColors.white,
+        background: "transparent",
        iconColor: lightColors.mainRed,
      },
      disabled: {
@@ -648,6 +652,12 @@ export const lightTheme: ThemeDefinitionProps = {
      disabledLabelColor: lightColors.disabledGrey,
    },
  },
+  slider: {
+    bulletBG: lightColors.bulletColor,
+    railBG: lightColors.borderColor,
+    disabledRail: lightColors.sliderDisabledBG,
+    disabledBullet: lightColors.disabledInnerGrey,
+  },
 };

 export const darkTheme: ThemeDefinitionProps = {
@@ -670,13 +680,15 @@ export const darkTheme: ThemeDefinitionProps = {
    info: darkColors.secondActionHover,
    warning: darkColors.mainOrange,
    disabled: darkColors.disabledGrey,
+    dark: darkColors.dark,
+    clear: darkColors.mainWhite,
  },
  buttons: {
    regular: {
      enabled: {
        border: darkColors.mainGrey,
        text: darkColors.mainGrey,
-        background: darkColors.dark,
+        background: "transparent",
        iconColor: darkColors.mainGrey,
      },
      disabled: {
@@ -728,7 +740,7 @@ export const darkTheme: ThemeDefinitionProps = {
      enabled: {
        border: darkColors.mainRed,
        text: darkColors.mainRed,
-        background: darkColors.dark,
+        background: "transparent",
        iconColor: darkColors.mainRed,
      },
      disabled: {
@@ -1116,4 +1128,10 @@ export const darkTheme: ThemeDefinitionProps = {
      disabledLabelColor: darkColors.disabledGrey,
    },
  },
+  slider: {
+    bulletBG: darkColors.defaultFontColor,
+    railBG: darkColors.footerDivider,
+    disabledRail: darkColors.disabledSwitchBG,
+    disabledBullet: darkColors.disabledSliderBullet,
+  },
 };
Author	SHA1	Message	Date
AlexandGitHub	509338e926	Release v0.15.0 (#637 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2024-01-16 17:42:27 -06:00
AlexandGitHub	4769d2e1b8	Added Slider component to library (#636 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2024-01-16 07:37:31 -08:00
AlexandGitHub	b0b041945c	Updated project dependencies (#629 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2024-01-15 15:29:34 -06:00
AlexandGitHub	4ca51d23d8	Added New Theming icons (#628 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2024-01-11 16:06:33 -08:00
AlexandGitHub	f46f399e30	Release v0.14.1 (#627 )	2024-01-09 20:20:49 -08:00
AlexandGitHub	05bb3e2737	Release v0.14.0 (#626 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2024-01-09 22:14:20 -06:00
AlexandGitHub	35172a5892	Fixed error shown while using a Switch instance (#625 )	2024-01-09 19:30:53 -08:00
AlexandGitHub	548f9da3da	Improved Select & Autocomplete components (#624 ) - Added status indicator prop - Dropdown selector added status indicator - Select added visualization for icons & status in selected elements - Autocomplete added visualization for icons & status in selected elements Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2024-01-09 20:30:27 -06:00
AlexandGitHub	0816171709	Added Expand Left Caret (#623 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2024-01-08 19:30:03 -06:00
AlexandGitHub	7eb30b3d0c	Updated library dependencies (#622 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2024-01-08 16:42:46 -08:00
Daniel ValdiviaandGitHub	a7ff7fcfcc	Fix Github Action (#617 ) Signed-off-by: Daniel Valdivia <hola@danielvaldivia.com>	2024-01-08 14:15:44 -08:00
AlexandGitHub	0cb4c401f9	Updated Storybook and dependencies to latest versions (#616 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2024-01-02 17:47:29 -06:00
AlexandGitHub	794f1f1c82	Updated Storybook & dependencies (#610 )	2023-12-25 21:15:56 -06:00
AlexandGitHub	07c5a51358	Updated package dependencies (#602 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2023-12-11 15:53:01 -08:00
AlexandGitHub	4d09b077af	Release v0.13.3 (#597 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2023-12-07 13:15:11 -06:00
AlexandGitHub	448346613d	Release v0.12.3 (#596 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2023-12-07 13:09:37 -06:00
Alex GitHub Benjamin Perez	18124403ef	Added Enterprise Logo (#595 ) Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>	2023-12-07 11:03:20 -08:00
AlexandGitHub	d75dc5c699	Added MinIO logo support to Application Logo component (#594 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2023-12-07 12:51:51 -06:00
AlexandGitHub	fb4557764f	Release v0.13.1 (#593 ) - Updated Package Dependencies - Added custom styling support to MainContainer Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2023-12-04 19:28:17 -06:00
AlexandGitHub	179b04a227	Release v0.13.0 (#587 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2023-11-28 11:31:06 -06:00
AlexandGitHub	4160e15e01	Added Link component to mds (#586 ) Added Link component to mds Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2023-11-28 11:22:06 -06:00
AlexandGitHub	325a50fddf	MDS improvements (#584 ) - Added clear & dark colors - Added EventBusy, Language & Shuffle icons - Fixed transparent buttons backgrounds Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2023-11-28 10:42:30 -06:00
AlexandGitHub	a0f29a6a70	Updated project dependencies (#585 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2023-11-28 10:16:52 -06:00
AlexandGitHub	78067af571	Changed text color (#578 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2023-11-14 18:15:00 -06:00
AlexandGitHub	82b14ea954	Release v0.12.2 (#577 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2023-11-14 09:57:56 -08:00
AlexandGitHub	5a42a67045	Added DarkModeIcon (#576 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2023-11-14 10:23:20 -06:00
AlexandGitHub	4c4b18d022	Release v0.12.1 (#575 )	2023-11-13 14:19:14 -08:00
AlexandGitHub	4ac4874235	Updated dependencies (#574 ) Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2023-11-13 14:45:54 -06:00
AlexandGitHub	39ddb7ea3c	DateTimeInput component improvements (#573 ) - Added Time format default values - Removed name required prop - Remove on key down for date time input Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>	2023-11-13 13:43:45 -06:00