From c51ce37941686aed02603b194d4a491de65b5b0e Mon Sep 17 00:00:00 2001
From: Ariella Gilmore <ariellalgilmore@gmail.com>
Date: Tue, 8 Nov 2022 08:39:28 -0800
Subject: [PATCH 1/3] fix(text-area): cols attribute (#12502)

* fix(text-area): cols attribute

* fix(form): remoev textArea prop cols
---
 .../react/__tests__/__snapshots__/PublicAPI-test.js.snap  | 1 -
 packages/react/src/components/Form/Form.stories.js        | 1 -
 packages/react/src/components/TextArea/TextArea-test.js   | 2 +-
 packages/react/src/components/TextArea/TextArea.js        | 8 +++++++-
 .../react/src/components/TextArea/TextArea.stories.js     | 5 -----
 packages/styles/scss/components/text-area/_text-area.scss | 2 +-
 6 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 10817662d2d7..ea46db287edc 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -7636,7 +7636,6 @@ Map {
   "TextArea" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "defaultProps": Object {
-      "cols": 50,
       "disabled": false,
       "enableCounter": false,
       "helperText": "",
diff --git a/packages/react/src/components/Form/Form.stories.js b/packages/react/src/components/Form/Form.stories.js
index 9eaf5aa36901..41d2924f73cd 100644
--- a/packages/react/src/components/Form/Form.stories.js
+++ b/packages/react/src/components/Form/Form.stories.js
@@ -97,7 +97,6 @@ const textareaProps = {
   className: 'some-class',
   placeholder: 'Placeholder text',
   id: 'test5',
-  cols: 50,
   rows: 4,
 };
 
diff --git a/packages/react/src/components/TextArea/TextArea-test.js b/packages/react/src/components/TextArea/TextArea-test.js
index 6d203263a3d7..bee02c651684 100644
--- a/packages/react/src/components/TextArea/TextArea-test.js
+++ b/packages/react/src/components/TextArea/TextArea-test.js
@@ -44,7 +44,7 @@ describe('TextArea', () => {
       });
 
       it('should set cols as expected', () => {
-        expect(textarea().props().cols).toEqual(50);
+        expect(textarea().props().style).toEqual({ width: '100%' });
         wrapper.setProps({ cols: 200 });
         expect(textarea().props().cols).toEqual(200);
       });
diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index 441a4a2a0a79..5fa92e064a7a 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/packages/react/src/components/TextArea/TextArea.js
@@ -128,6 +128,13 @@ const TextArea = React.forwardRef(function TextArea(
       aria-invalid={invalid || null}
       aria-describedby={invalid ? errorId : null}
       disabled={other.disabled}
+      style={
+        other.cols
+          ? {}
+          : {
+              width: `100%`,
+            }
+      }
     />
   );
 
@@ -268,7 +275,6 @@ TextArea.defaultProps = {
   onClick: () => {},
   placeholder: '',
   rows: 4,
-  cols: 50,
   invalid: false,
   invalidText: '',
   helperText: '',
diff --git a/packages/react/src/components/TextArea/TextArea.stories.js b/packages/react/src/components/TextArea/TextArea.stories.js
index 5a89e26b4738..77f115e45bae 100644
--- a/packages/react/src/components/TextArea/TextArea.stories.js
+++ b/packages/react/src/components/TextArea/TextArea.stories.js
@@ -21,7 +21,6 @@ export const Default = () => (
   <TextArea
     labelText="Text Area label"
     helperText="Optional helper text"
-    cols={50}
     rows={4}
     id="text-area-1"
   />
@@ -33,7 +32,6 @@ export const WithLayer = () => {
       <TextArea
         labelText="First layer"
         helperText="Optional helper text"
-        cols={50}
         rows={4}
         id="text-area-1"
       />
@@ -41,7 +39,6 @@ export const WithLayer = () => {
         <TextArea
           labelText="Second layer"
           helperText="Optional helper text"
-          cols={50}
           rows={4}
           id="text-area-1"
         />
@@ -49,7 +46,6 @@ export const WithLayer = () => {
           <TextArea
             labelText="Third layer"
             helperText="Optional helper text"
-            cols={50}
             rows={4}
             id="text-area-1"
           />
@@ -73,7 +69,6 @@ Playground.argTypes = {
     control: {
       type: 'number',
     },
-    defaultValue: 50,
   },
   defaultValue: {
     control: {
diff --git a/packages/styles/scss/components/text-area/_text-area.scss b/packages/styles/scss/components/text-area/_text-area.scss
index 49bee46aeef8..9f5f845c6c9b 100644
--- a/packages/styles/scss/components/text-area/_text-area.scss
+++ b/packages/styles/scss/components/text-area/_text-area.scss
@@ -25,7 +25,6 @@
     @include type-style('body-01');
     @include focus-outline('reset');
 
-    width: 100%;
     min-width: 10rem;
     height: 100%;
     min-height: rem(40px);
@@ -108,6 +107,7 @@
   .#{$prefix}--text-area.#{$prefix}--skeleton {
     @include skeleton;
 
+    width: 100%;
     height: rem(100px);
 
     &::placeholder {

From 5ee80eb77005b31eb29d6ce418e5d4e6053c80b2 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 8 Nov 2022 12:05:15 -0500
Subject: [PATCH 2/3] feat(FluidDatePicker): implement `FluidDatePicker`
 (#12247)

* feat(FluidDatePicker): scaffold out initial react files

* feat(FluidDatePicker): scaffold out more files

* style(FluidDatePicker): add more styles for FluidDatePicker

* style(FluidDatePicker): add single invalid styles

* style(FluidDatePicker): clean up invalid, warn states on all variants

* fix(FluidDatePicker): always show range icon in fluid state

* fix(FluidDatePicker): add invalid, warn icons to simple fluiddatepicker

* feat(FluidDatePicker): add invalid state to DatePicker

* test(FluidDatePicker): add e2e tests, update snapshots

* chore(FluidDatePicker): fix avt test name

* test(FluidDatePicker): add API tests

* chore(FluidForm): add FluidDatePicker to FluidForm story, style fixes

* chore(storybook): fix playground, remove test examples

* test(e2e): update id

* Update packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

* Update packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

* Update packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../FluidDatePicker-test.e2e.js               |  67 +++++
 .../fluid-date-picker/_fluid-date-picker.scss |   9 +
 .../components/fluid-date-picker/_index.scss  |   9 +
 .../fluid-date-picker/_fluid-date-picker.scss |   9 +
 .../components/fluid-date-picker/_index.scss  |   9 +
 .../__snapshots__/PublicAPI-test.js.snap      |  40 +++
 .../fluid-date-picker/_fluid-date-picker.scss |   9 +
 .../components/fluid-date-picker/_index.scss  |   9 +
 packages/react/src/__tests__/index-test.js    |   2 +
 .../src/components/DatePicker/DatePicker.js   |  57 +++-
 .../DatePickerInput/DatePickerInput.js        |  25 +-
 .../FluidDatePicker/FluidDatePicker.js        |  74 +++++
 .../FluidDatePicker.stories.js                | 229 ++++++++++++++
 .../__tests__/FluidDatePicker-test.js         |  65 ++++
 .../src/components/FluidDatePicker/index.js   |   9 +
 .../FluidDatePickerInput.js                   |  23 ++
 .../components/FluidDatePickerInput/index.js  |   9 +
 .../components/FluidForm/FluidForm.stories.js |  38 +++
 packages/react/src/index.js                   |   2 +
 .../__snapshots__/styles-test.js.snap         |  10 +
 packages/styles/files.js                      |   2 +
 packages/styles/scss/components/_index.scss   |   1 +
 .../components/date-picker/_date-picker.scss  |   4 +
 .../fluid-date-picker/_fluid-date-picker.scss | 280 ++++++++++++++++++
 .../components/fluid-date-picker/_index.scss  |  11 +
 .../fluid-text-area/_fluid-text-area.scss     |   2 +-
 26 files changed, 998 insertions(+), 6 deletions(-)
 create mode 100644 e2e/components/FluidDatePicker/FluidDatePicker-test.e2e.js
 create mode 100644 packages/carbon-components-react/scss/components/fluid-date-picker/_fluid-date-picker.scss
 create mode 100644 packages/carbon-components-react/scss/components/fluid-date-picker/_index.scss
 create mode 100644 packages/carbon-components/scss/components/fluid-date-picker/_fluid-date-picker.scss
 create mode 100644 packages/carbon-components/scss/components/fluid-date-picker/_index.scss
 create mode 100644 packages/react/scss/components/fluid-date-picker/_fluid-date-picker.scss
 create mode 100644 packages/react/scss/components/fluid-date-picker/_index.scss
 create mode 100644 packages/react/src/components/FluidDatePicker/FluidDatePicker.js
 create mode 100644 packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js
 create mode 100644 packages/react/src/components/FluidDatePicker/__tests__/FluidDatePicker-test.js
 create mode 100644 packages/react/src/components/FluidDatePicker/index.js
 create mode 100644 packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.js
 create mode 100644 packages/react/src/components/FluidDatePickerInput/index.js
 create mode 100644 packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
 create mode 100644 packages/styles/scss/components/fluid-date-picker/_index.scss

diff --git a/e2e/components/FluidDatePicker/FluidDatePicker-test.e2e.js b/e2e/components/FluidDatePicker/FluidDatePicker-test.e2e.js
new file mode 100644
index 000000000000..558358d080c1
--- /dev/null
+++ b/e2e/components/FluidDatePicker/FluidDatePicker-test.e2e.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+
+test.describe('FluidDatePicker', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('fluid date picker (range) @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'FluidDatePicker',
+          id: 'experimental-unstable-fluiddatepicker--range-with-calendar',
+          theme,
+        });
+      });
+
+      test('fluid date picker (single) @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'FluidDatePicker',
+          id: 'experimental-unstable-fluiddatepicker--single',
+          theme,
+        });
+      });
+
+      test('fluid date picker (simple) @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'FluidDatePicker',
+          id: 'experimental-unstable-fluiddatepicker--simple',
+          theme,
+        });
+      });
+    });
+  });
+
+  test('accessibility-checker @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidDatePicker',
+      id: 'experimental-unstable-fluiddatepicker--range-with-calendar',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await visitStory(page, {
+      component: 'FluidDatePicker',
+      id: 'experimental-unstable-fluiddatepicker--single',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await visitStory(page, {
+      component: 'FluidDatePicker',
+      id: 'experimental-unstable-fluiddatepicker--simple',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('FluidDatePicker');
+  });
+});
diff --git a/packages/carbon-components-react/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/carbon-components-react/scss/components/fluid-date-picker/_fluid-date-picker.scss
new file mode 100644
index 000000000000..48feea2e339c
--- /dev/null
+++ b/packages/carbon-components-react/scss/components/fluid-date-picker/_fluid-date-picker.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/fluid-date-picker/fluid-date-picker';
diff --git a/packages/carbon-components-react/scss/components/fluid-date-picker/_index.scss b/packages/carbon-components-react/scss/components/fluid-date-picker/_index.scss
new file mode 100644
index 000000000000..3f06534772d3
--- /dev/null
+++ b/packages/carbon-components-react/scss/components/fluid-date-picker/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/fluid-date-picker';
diff --git a/packages/carbon-components/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/carbon-components/scss/components/fluid-date-picker/_fluid-date-picker.scss
new file mode 100644
index 000000000000..64deceede606
--- /dev/null
+++ b/packages/carbon-components/scss/components/fluid-date-picker/_fluid-date-picker.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/fluid-date-picker/fluid-date-picker';
diff --git a/packages/carbon-components/scss/components/fluid-date-picker/_index.scss b/packages/carbon-components/scss/components/fluid-date-picker/_index.scss
new file mode 100644
index 000000000000..489faea12362
--- /dev/null
+++ b/packages/carbon-components/scss/components/fluid-date-picker/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/fluid-date-picker';
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index ea46db287edc..5a27a5bc8cb4 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2367,6 +2367,12 @@ Map {
       "inline": Object {
         "type": "bool",
       },
+      "invalid": Object {
+        "type": "bool",
+      },
+      "invalidText": Object {
+        "type": "node",
+      },
       "light": [Function],
       "locale": Object {
         "args": Array [
@@ -2501,6 +2507,12 @@ Map {
         ],
         "type": "oneOfType",
       },
+      "warn": Object {
+        "type": "bool",
+      },
+      "warnText": Object {
+        "type": "node",
+      },
     },
     "render": [Function],
   },
@@ -9399,6 +9411,34 @@ Map {
       },
     },
   },
+  "unstable__FluidDatePicker" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+      "invalid": Object {
+        "type": "bool",
+      },
+      "invalidText": Object {
+        "type": "node",
+      },
+      "warn": Object {
+        "type": "bool",
+      },
+      "warnText": Object {
+        "type": "node",
+      },
+    },
+    "render": [Function],
+  },
+  "unstable__FluidDatePickerInput" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
   "unstable__FluidDropdown" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
diff --git a/packages/react/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/react/scss/components/fluid-date-picker/_fluid-date-picker.scss
new file mode 100644
index 000000000000..a4a1b765aa35
--- /dev/null
+++ b/packages/react/scss/components/fluid-date-picker/_fluid-date-picker.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/fluid-date-picker/fluid-date-picker';
diff --git a/packages/react/scss/components/fluid-date-picker/_index.scss b/packages/react/scss/components/fluid-date-picker/_index.scss
new file mode 100644
index 000000000000..0659b6549a33
--- /dev/null
+++ b/packages/react/scss/components/fluid-date-picker/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/fluid-date-picker';
diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
index 10ef4678fb5f..d89bf1a93ef0 100644
--- a/packages/react/src/__tests__/index-test.js
+++ b/packages/react/src/__tests__/index-test.js
@@ -231,6 +231,8 @@ describe('Carbon Components React', () => {
         "unstable_TextDirection",
         "unstable__FluidComboBox",
         "unstable__FluidComboBoxSkeleton",
+        "unstable__FluidDatePicker",
+        "unstable__FluidDatePickerInput",
         "unstable__FluidDropdown",
         "unstable__FluidDropdownSkeleton",
         "unstable__FluidMultiSelect",
diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js
index 88b03ea95eb9..485d38b2e9bf 100644
--- a/packages/react/src/components/DatePicker/DatePicker.js
+++ b/packages/react/src/components/DatePicker/DatePicker.js
@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import cx from 'classnames';
 import flatpickr from 'flatpickr';
 import l10n from 'flatpickr/dist/l10n/index';
@@ -18,6 +18,8 @@ import deprecate from '../../prop-types/deprecate';
 import { match, keys } from '../../internal/keyboard';
 import { usePrefix } from '../../internal/usePrefix';
 import { useSavedCallback } from '../../internal/useSavedCallback';
+import { FormContext } from '../FluidForm';
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
 // Weekdays shorthand for english locale
 l10n.en.weekdays.shorthand.forEach((_day, index) => {
@@ -187,6 +189,10 @@ const DatePicker = React.forwardRef(function DatePicker(
     disable,
     enable,
     inline,
+    invalid,
+    invalidText,
+    warn,
+    warnText,
     light = false,
     locale = 'en',
     maxDate,
@@ -201,6 +207,7 @@ const DatePicker = React.forwardRef(function DatePicker(
   ref
 ) {
   const prefix = usePrefix();
+  const { isFluid } = useContext(FormContext);
   const startInputField = useRef(null);
   const endInputField = useRef(null);
   const calendarRef = useRef(null);
@@ -467,9 +474,37 @@ const DatePicker = React.forwardRef(function DatePicker(
     }
   }, [value, prefix]);
 
+  let fluidError;
+  if (isFluid) {
+    if (invalid) {
+      fluidError = (
+        <>
+          <WarningFilled
+            className={`${prefix}--date-picker__icon ${prefix}--date-picker__icon--invalid`}
+          />
+          <hr className={`${prefix}--date-picker__divider`} />
+          <div className={`${prefix}--form-requirement`}>{invalidText}</div>
+        </>
+      );
+    }
+
+    if (warn && !invalid) {
+      fluidError = (
+        <>
+          <WarningAltFilled
+            className={`${prefix}--date-picker__icon ${prefix}--date-picker__icon--warn`}
+          />
+          <hr className={`${prefix}--date-picker__divider`} />
+          <div className={`${prefix}--form-requirement`}>{warnText}</div>
+        </>
+      );
+    }
+  }
+
   return (
     <div className={wrapperClasses} ref={ref} {...rest}>
       <div className={datePickerClasses}>{childrenWithProps}</div>
+      {fluidError}
     </div>
   );
 });
@@ -530,6 +565,16 @@ DatePicker.propTypes = {
    */
   inline: PropTypes.bool,
 
+  /**
+   * Specify whether or not the control is invalid (Fluid only)
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in error state (Fluid Only)
+   */
+  invalidText: PropTypes.node,
+
   /**
    * `true` to use the light version.
    */
@@ -654,6 +699,16 @@ DatePicker.propTypes = {
     PropTypes.object,
     PropTypes.number,
   ]),
+
+  /**
+   * Specify whether the control is currently in warning state (Fluid only)
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state (Fluid only)
+   */
+  warnText: PropTypes.node,
 };
 
 export default DatePicker;
diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.js b/packages/react/src/components/DatePickerInput/DatePickerInput.js
index dad8c5c2ce2d..5f5aad11972b 100644
--- a/packages/react/src/components/DatePickerInput/DatePickerInput.js
+++ b/packages/react/src/components/DatePickerInput/DatePickerInput.js
@@ -8,8 +8,9 @@
 import { Calendar, WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useContext } from 'react';
 import { usePrefix } from '../../internal/usePrefix';
+import { FormContext } from '../FluidForm';
 
 const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) {
   const {
@@ -32,6 +33,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) {
     ...rest
   } = props;
   const prefix = usePrefix();
+  const { isFluid } = useContext(FormContext);
   const datePickerInputProps = {
     id,
     onChange: (event) => {
@@ -62,9 +64,12 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) {
   const inputClasses = cx(`${prefix}--date-picker__input`, {
     [`${prefix}--date-picker__input--${size}`]: size,
     [`${prefix}--date-picker__input--invalid`]: invalid,
+    [`${prefix}--date-picker__input--warn`]: warn,
   });
   const containerClasses = cx(`${prefix}--date-picker-container`, {
     [`${prefix}--date-picker--nolabel`]: !labelText,
+    [`${prefix}--date-picker--fluid--invalid`]: isFluid && invalid,
+    [`${prefix}--date-picker--fluid--warn`]: isFluid && warn,
   });
 
   const input = invalid ? (
@@ -95,6 +100,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) {
       )}
       <div className={wrapperClasses}>
         {input}
+        {isFluid && <DatePickerIcon datePickerType={datePickerType} />}
         <DatePickerIcon
           datePickerType={datePickerType}
           invalid={invalid}
@@ -102,9 +108,17 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) {
         />
       </div>
       {invalid && (
-        <div className={`${prefix}--form-requirement`}>{invalidText}</div>
+        <>
+          {isFluid && <hr className={`${prefix}--date-picker__divider`} />}
+          <div className={`${prefix}--form-requirement`}>{invalidText}</div>
+        </>
+      )}
+      {warn && (
+        <>
+          {isFluid && <hr className={`${prefix}--date-picker__divider`} />}
+          <div className={`${prefix}--form-requirement`}>{warnText}</div>
+        </>
       )}
-      {warn && <div className={`${prefix}--form-requirement`}>{warnText}</div>}
       {helperText && <div className={helperTextClasses}>{helperText}</div>}
     </div>
   );
@@ -211,9 +225,12 @@ DatePickerInput.propTypes = {
 
 function DatePickerIcon({ datePickerType, invalid, warn }) {
   const prefix = usePrefix();
+  const { isFluid } = useContext(FormContext);
 
   if (datePickerType === 'simple' && !invalid && !warn) {
-    return null;
+    if (!isFluid) {
+      return null;
+    }
   }
 
   if (invalid) {
diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.js b/packages/react/src/components/FluidDatePicker/FluidDatePicker.js
new file mode 100644
index 000000000000..42d5794e3f88
--- /dev/null
+++ b/packages/react/src/components/FluidDatePicker/FluidDatePicker.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import DatePicker from '../DatePicker';
+import { usePrefix } from '../../internal/usePrefix';
+import { FormContext } from '../FluidForm/FormContext';
+
+const FluidDatePicker = React.forwardRef(function FluidDatePicker(
+  { className, children, invalid, invalidText, warn, warnText, ...other },
+  ref
+) {
+  const prefix = usePrefix();
+  const classNames = classnames(className, {
+    [`${prefix}--date-picker--fluid`]: true,
+    [`${prefix}--date-picker--fluid--invalid`]: invalid,
+    [`${prefix}--date-picker--fluid--warn`]: warn,
+  });
+
+  return (
+    <FormContext.Provider value={{ isFluid: true }}>
+      <DatePicker
+        invalid={invalid}
+        invalidText={invalidText}
+        warn={warn}
+        warnText={warnText}
+        className={classNames}
+        ref={ref}
+        {...other}>
+        {children}
+      </DatePicker>
+    </FormContext.Provider>
+  );
+});
+
+FluidDatePicker.propTypes = {
+  /**
+   * The child node(s)
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether or not the control is invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in error state
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node,
+};
+
+export default FluidDatePicker;
diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js b/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js
new file mode 100644
index 000000000000..7bd23c0672c0
--- /dev/null
+++ b/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js
@@ -0,0 +1,229 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import FluidDatePicker from '../FluidDatePicker';
+import FluidDatePickerInput from '../FluidDatePickerInput';
+import {
+  ToggletipLabel,
+  Toggletip,
+  ToggletipButton,
+  ToggletipContent,
+} from '../Toggletip';
+import { Information } from '@carbon/icons-react';
+
+export default {
+  title: 'Experimental/unstable__FluidDatePicker',
+  component: FluidDatePicker,
+};
+
+const ToggleTip = (
+  <>
+    <ToggletipLabel>Label</ToggletipLabel>
+    <Toggletip align="top-left">
+      <ToggletipButton label="Show information">
+        <Information />
+      </ToggletipButton>
+      <ToggletipContent>
+        <p>Additional field information here.</p>
+      </ToggletipContent>
+    </Toggletip>
+  </>
+);
+
+export const Simple = () => (
+  <div style={{ width: '288px' }}>
+    <FluidDatePicker datePickerType="simple">
+      <FluidDatePickerInput
+        placeholder="mm/dd/yyyy"
+        labelText={ToggleTip}
+        id="date-picker-simple"
+      />
+    </FluidDatePicker>
+  </div>
+);
+
+export const Single = () => (
+  <div style={{ width: '288px' }}>
+    <FluidDatePicker datePickerType="single">
+      <FluidDatePickerInput
+        style={{ width: '288px' }}
+        placeholder="mm/dd/yyyy"
+        labelText={ToggleTip}
+        id="date-picker-single"
+      />
+    </FluidDatePicker>
+  </div>
+);
+
+export const RangeWithCalendar = () => {
+  return (
+    <div style={{ width: '288px' }}>
+      <FluidDatePicker datePickerType="range">
+        <FluidDatePickerInput
+          id="date-picker-input-id-start"
+          placeholder="mm/dd/yyyy"
+          labelText={ToggleTip}
+          size="md"
+        />
+        <FluidDatePickerInput
+          id="date-picker-input-id-finish"
+          placeholder="mm/dd/yyyy"
+          labelText="End date"
+          size="md"
+        />
+      </FluidDatePicker>
+    </div>
+  );
+};
+
+export const Playground = (args) => {
+  const { invalid, invalidText, warn, warnText, disabled } = args;
+  return (
+    <div style={{ width: '288px' }}>
+      <FluidDatePicker
+        datePickerType="range"
+        invalid={invalid}
+        invalidText={invalidText}
+        warn={warn}
+        warnText={warnText}>
+        <FluidDatePickerInput
+          placeholder="mm/dd/yyyy"
+          labelText="Date Picker label"
+          id="date-picker-range-1"
+          disabled={disabled}
+        />
+        <FluidDatePickerInput
+          placeholder="mm/dd/yyyy"
+          labelText="End date"
+          id="date-picker-range-2"
+          disabled={disabled}
+        />
+      </FluidDatePicker>
+      <br />
+      <br />
+      <FluidDatePicker datePickerType="single">
+        <FluidDatePickerInput
+          placeholder="mm/dd/yyyy"
+          labelText="Date Picker label"
+          id="date-picker-single"
+          invalid={invalid}
+          invalidText={invalidText}
+          disabled={disabled}
+          warn={warn}
+          warnText={warnText}
+        />
+      </FluidDatePicker>
+    </div>
+  );
+};
+
+Playground.argTypes = {
+  appendTo: {
+    table: {
+      disable: true,
+    },
+  },
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  disable: {
+    table: {
+      disable: true,
+    },
+  },
+  enable: {
+    table: {
+      disable: true,
+    },
+  },
+  inline: {
+    table: {
+      disable: true,
+    },
+  },
+  light: {
+    table: {
+      disable: true,
+    },
+  },
+  locale: {
+    table: {
+      disable: true,
+    },
+  },
+  onChange: {
+    action: 'clicked',
+    table: {
+      disable: true,
+    },
+  },
+  onClose: {
+    action: 'clicked',
+    table: {
+      disable: true,
+    },
+  },
+  onOpen: {
+    action: 'clicked',
+    table: {
+      disable: true,
+    },
+  },
+  value: {
+    table: {
+      disable: true,
+    },
+  },
+  disabled: {
+    control: { type: 'boolean' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
+  invalid: {
+    control: { type: 'boolean' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
+  invalidText: {
+    control: { type: 'text' },
+    table: {
+      category: 'DatePickerInput',
+    },
+    defaultValue:
+      'Error message that is really long can wrap to more lines but should not be excessively long.',
+  },
+  placeholder: {
+    control: { type: 'text' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
+  warn: {
+    control: { type: 'boolean' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
+  warnText: {
+    control: { type: 'text' },
+    table: {
+      category: 'DatePickerInput',
+    },
+    defaultValue:
+      'Warning message that is really long can wrap to more lines but should not be excessively long.',
+  },
+};
diff --git a/packages/react/src/components/FluidDatePicker/__tests__/FluidDatePicker-test.js b/packages/react/src/components/FluidDatePicker/__tests__/FluidDatePicker-test.js
new file mode 100644
index 000000000000..8e3d514b0cff
--- /dev/null
+++ b/packages/react/src/components/FluidDatePicker/__tests__/FluidDatePicker-test.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import FluidDatePicker from '../FluidDatePicker';
+import FluidDatePickerInput from '../../FluidDatePickerInput';
+import { render, screen } from '@testing-library/react';
+
+const prefix = 'cds';
+
+describe('FluidDatePicker', () => {
+  describe('renders as expected - Component API', () => {
+    it('should add extra classes that are passed via className', () => {
+      render(
+        <FluidDatePicker
+          onChange={() => {}}
+          className="custom-class"
+          dateFormat="m/d/Y"
+          data-testid="datePicker-1">
+          <FluidDatePickerInput
+            id="date-picker-input-id-start"
+            placeholder="mm/dd/yyyy"
+            labelText="Start date"
+          />
+          <FluidDatePickerInput
+            id="date-picker-input-id-finish"
+            placeholder="mm/dd/yyyy"
+            labelText="End date"
+          />
+        </FluidDatePicker>
+      );
+
+      expect(screen.getByTestId('datePicker-1')).toHaveClass('custom-class');
+    });
+
+    it('should add fluid classes by default', () => {
+      render(
+        <FluidDatePicker
+          onChange={() => {}}
+          className="custom-class"
+          dateFormat="m/d/Y"
+          data-testid="datePicker-1">
+          <FluidDatePickerInput
+            id="date-picker-input-id-start"
+            placeholder="mm/dd/yyyy"
+            labelText="Start date"
+          />
+          <FluidDatePickerInput
+            id="date-picker-input-id-finish"
+            placeholder="mm/dd/yyyy"
+            labelText="End date"
+          />
+        </FluidDatePicker>
+      );
+
+      expect(screen.getByTestId('datePicker-1')).toHaveClass(
+        `${prefix}--date-picker--fluid`
+      );
+    });
+  });
+});
diff --git a/packages/react/src/components/FluidDatePicker/index.js b/packages/react/src/components/FluidDatePicker/index.js
new file mode 100644
index 000000000000..e035b5dcabb9
--- /dev/null
+++ b/packages/react/src/components/FluidDatePicker/index.js
@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export default from './FluidDatePicker';
+export FluidDatePicker from './FluidDatePicker';
diff --git a/packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.js b/packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.js
new file mode 100644
index 000000000000..35dabebc1189
--- /dev/null
+++ b/packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import DatePickerInput from '../DatePickerInput';
+import { FormContext } from '../FluidForm/FormContext';
+
+const FluidDatePickerInput = React.forwardRef(function FluidDatePickerInput(
+  { ...other },
+  ref
+) {
+  return (
+    <FormContext.Provider value={{ isFluid: true }}>
+      <DatePickerInput ref={ref} {...other} />
+    </FormContext.Provider>
+  );
+});
+
+export default FluidDatePickerInput;
diff --git a/packages/react/src/components/FluidDatePickerInput/index.js b/packages/react/src/components/FluidDatePickerInput/index.js
new file mode 100644
index 000000000000..5384e51e32d0
--- /dev/null
+++ b/packages/react/src/components/FluidDatePickerInput/index.js
@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export default from './FluidDatePickerInput';
+export FluidDatePickerInput from './FluidDatePickerInput';
diff --git a/packages/react/src/components/FluidForm/FluidForm.stories.js b/packages/react/src/components/FluidForm/FluidForm.stories.js
index 849632a11420..e882d9f49335 100644
--- a/packages/react/src/components/FluidForm/FluidForm.stories.js
+++ b/packages/react/src/components/FluidForm/FluidForm.stories.js
@@ -8,6 +8,11 @@
 import React from 'react';
 
 import FluidForm from '.';
+import FluidDatePicker from '../FluidDatePicker';
+import FluidDatePickerInput from '../FluidDatePickerInput';
+import FluidSelect from '../FluidSelect';
+import SelectItem from '../SelectItem';
+import SelectItemGroup from '../SelectItemGroup';
 import FluidTextInput from '../FluidTextInput';
 import FluidTextArea from '../FluidTextArea';
 import ModalWrapper from '../ModalWrapper';
@@ -45,6 +50,39 @@ export default {
 export const Default = () => (
   <>
     <FluidForm {...additionalProps}>
+      <div style={{ display: 'flex' }}>
+        <FluidDatePicker datePickerType="range">
+          <FluidDatePickerInput
+            id="date-picker-input-id-start"
+            placeholder="mm/dd/yyyy"
+            labelText="Choose your dates"
+          />
+          <FluidDatePickerInput
+            id="date-picker-input-id-finish"
+            placeholder="mm/dd/yyyy"
+            labelText="End date"
+          />
+        </FluidDatePicker>
+        <FluidSelect
+          id="select-1"
+          defaultValue="placeholder-item"
+          labelText="Choose an option">
+          <SelectItem
+            disabled
+            hidden
+            value="placeholder-item"
+            text="Choose an option"
+          />
+          <SelectItemGroup label="Category 1">
+            <SelectItem value="option-1" text="Option 1" />
+            <SelectItem value="option-2" text="Option 2" />
+          </SelectItemGroup>
+          <SelectItemGroup label="Category 2">
+            <SelectItem value="option-3" text="Option 3" />
+            <SelectItem value="option-4" text="Option 4" />
+          </SelectItemGroup>
+        </FluidSelect>
+      </div>
       <FluidTextInput {...TextInputProps} />
       <FluidTextInput
         type="password"
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index de0323da0dfd..f2f10d9c4976 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -216,6 +216,8 @@ export {
   FluidComboBox as unstable__FluidComboBox,
   FluidComboBoxSkeleton as unstable__FluidComboBoxSkeleton,
 } from './components/FluidComboBox';
+export { FluidDatePicker as unstable__FluidDatePicker } from './components/FluidDatePicker';
+export { FluidDatePickerInput as unstable__FluidDatePickerInput } from './components/FluidDatePickerInput';
 export {
   FluidDropdown as unstable__FluidDropdown,
   FluidDropdownSkeleton as unstable__FluidDropdownSkeleton,
diff --git a/packages/styles/__tests__/__snapshots__/styles-test.js.snap b/packages/styles/__tests__/__snapshots__/styles-test.js.snap
index 24782c450218..ddd45244696c 100644
--- a/packages/styles/__tests__/__snapshots__/styles-test.js.snap
+++ b/packages/styles/__tests__/__snapshots__/styles-test.js.snap
@@ -262,6 +262,16 @@ Array [
     "importPath": "@carbon/styles/scss/components/form",
     "relativePath": "scss/components/form",
   },
+  Object {
+    "filepath": "scss/components/fluid-date-picker/_fluid-date-picker.scss",
+    "importPath": "@carbon/styles/scss/components/fluid-date-picker/fluid-date-picker",
+    "relativePath": "scss/components/fluid-date-picker/fluid-date-picker",
+  },
+  Object {
+    "filepath": "scss/components/fluid-date-picker/_index.scss",
+    "importPath": "@carbon/styles/scss/components/fluid-date-picker",
+    "relativePath": "scss/components/fluid-date-picker",
+  },
   Object {
     "filepath": "scss/components/fluid-dropdown/_fluid-dropdown.scss",
     "importPath": "@carbon/styles/scss/components/fluid-dropdown/fluid-dropdown",
diff --git a/packages/styles/files.js b/packages/styles/files.js
index 0a382187bb5b..d467397eb9c4 100644
--- a/packages/styles/files.js
+++ b/packages/styles/files.js
@@ -71,6 +71,8 @@ const files = [
   'scss/components/file-uploader/_index.scss',
   'scss/components/form/_form.scss',
   'scss/components/form/_index.scss',
+  'scss/components/fluid-date-picker/_fluid-date-picker.scss',
+  'scss/components/fluid-date-picker/_index.scss',
   'scss/components/fluid-dropdown/_fluid-dropdown.scss',
   'scss/components/fluid-dropdown/_index.scss',
   'scss/components/fluid-list-box/_fluid-list-box.scss',
diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss
index 976429ab9b51..8e02aa8bd8d8 100644
--- a/packages/styles/scss/components/_index.scss
+++ b/packages/styles/scss/components/_index.scss
@@ -24,6 +24,7 @@
 @use 'dropdown';
 @use 'file-uploader';
 @use 'fluid-combo-box';
+@use 'fluid-date-picker';
 @use 'fluid-dropdown';
 @use 'fluid-list-box';
 @use 'fluid-multiselect';
diff --git a/packages/styles/scss/components/date-picker/_date-picker.scss b/packages/styles/scss/components/date-picker/_date-picker.scss
index 6e889bcf5c86..ce416b9a5387 100644
--- a/packages/styles/scss/components/date-picker/_date-picker.scss
+++ b/packages/styles/scss/components/date-picker/_date-picker.scss
@@ -46,6 +46,10 @@
     justify-content: space-between;
   }
 
+  .#{$prefix}--date-picker-container .#{$prefix}--label {
+    display: flex;
+  }
+
   .#{$prefix}--date-picker-input__wrapper {
     position: relative;
     display: flex;
diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
new file mode 100644
index 000000000000..391abdbbbcac
--- /dev/null
+++ b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
@@ -0,0 +1,280 @@
+//
+// Copyright IBM Corp. 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+//-----------------------------
+// Fluid Date Picker
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../date-picker';
+
+@mixin fluid-date-picker {
+  .#{$prefix}--date-picker--fluid {
+    display: inline-flex;
+    background: $field;
+  }
+
+  .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition: background-color $duration-fast-01 motion(standard, productive),
+      outline $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--date-picker--fluid .#{$prefix}--label {
+    position: absolute;
+    z-index: 1;
+    top: rem(13px);
+    left: $spacing-05;
+    display: flex;
+    height: rem(16px);
+    align-items: center;
+    margin: 0;
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper
+    .#{$prefix}--date-picker__input {
+    min-width: rem(144px);
+    min-height: rem(64px);
+    padding: rem(32px) $spacing-05 rem(13px);
+    border-bottom: none;
+    background: transparent;
+  }
+
+  // Simple
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--simple
+    .#{$prefix}--date-picker__icon {
+    display: none;
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--simple
+    .#{$prefix}--date-picker__input:not(.#{$prefix}--date-picker__input--invalid):not(.#{$prefix}--date-picker__input--warn),
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--simple
+    .#{$prefix}--date-picker--fluid--warn {
+    border-bottom: 1px solid $border-strong;
+  }
+
+  // Single, Range
+  .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker__icon {
+    top: rem(43px);
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--single
+    .#{$prefix}--date-picker__input {
+    width: 100%;
+  }
+
+  .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker--single {
+    border-bottom: none;
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--single
+    .#{$prefix}--date-picker__input:not(.#{$prefix}--date-picker__input--invalid),
+  .#{$prefix}--date-picker--single .#{$prefix}--date-picker--fluid--warn {
+    border-bottom: 1px solid $border-strong;
+  }
+
+  // Range
+  .#{$prefix}--date-picker--fluid:not(.#{$prefix}--date-picker--fluid--invalid):not(.#{$prefix}--date-picker--fluid--warn)
+    .#{$prefix}--date-picker--range
+    .#{$prefix}--date-picker-container:not(.#{$prefix}--date-picker--fluid--invalid) {
+    border-bottom: 1px solid $border-strong;
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--range
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--range
+    .#{$prefix}--date-picker-container {
+    width: 100%;
+    min-width: rem(144px);
+    min-height: rem(63px);
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:first-child {
+    margin-right: 0;
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:last-child
+    .#{$prefix}--date-picker__input {
+    border-left: 1px solid $border-strong;
+  }
+
+  // Invalid
+  // Entire input
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid,
+  // Just one input invalid
+  .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid {
+    @include focus-outline('invalid');
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker__input--invalid {
+    outline: none;
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-container:last-child.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker__input--invalid,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
+    + .#{$prefix}--date-picker-container
+    .#{$prefix}--date-picker__input {
+    border-left: none;
+  }
+
+  .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--form-requirement,
+  .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--form-requirement {
+    padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+    margin: 0;
+  }
+
+  .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--single
+    .#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker--range
+    .#{$prefix}--date-picker-container {
+    border-bottom: 1px solid transparent;
+  }
+
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:last-child
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:last-child
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--fluid--warn
+    + .#{$prefix}--date-picker-container:last-child
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child
+    .#{$prefix}--date-picker__input {
+    border-left: 1px solid transparent;
+  }
+
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:first-child::after,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:first-child::after,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--range
+    .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:first-child::after,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--range
+    .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child::after {
+    position: absolute;
+    top: rem(8px);
+    right: 0;
+    display: block;
+    width: 1px;
+    height: calc(100% - 1rem);
+    background: $border-strong;
+    content: '';
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child::after {
+    left: 0;
+  }
+
+  .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker__divider {
+    width: calc(100% - 2rem);
+    border-style: solid;
+    border-color: $border-subtle;
+    border-bottom: none;
+    margin: 0 1rem;
+  }
+
+  .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker__icon--invalid,
+  .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker__icon--warn {
+    top: rem(80px);
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--simple
+    .#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker__icon--invalid,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--simple
+    .#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker__icon--warn {
+    display: block;
+  }
+
+  // Set focus when single input is invalid
+  .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker__input:focus {
+    @include focus-outline('outline');
+  }
+
+  // Entire Datepicker invalid state
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker--range
+    ~ .#{$prefix}--form-requirement,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker--range
+    ~ .#{$prefix}--form-requirement {
+    display: block;
+    overflow: visible;
+    max-height: 100%;
+    padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+    margin-top: 0;
+  }
+
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker--range
+    ~ .#{$prefix}--form-requirement {
+    color: $text-error;
+  }
+
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn {
+    position: relative;
+  }
+
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker--range
+    + .#{$prefix}--date-picker__icon,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker--range
+    + .#{$prefix}--date-picker__icon {
+    top: rem(80px);
+  }
+}
diff --git a/packages/styles/scss/components/fluid-date-picker/_index.scss b/packages/styles/scss/components/fluid-date-picker/_index.scss
new file mode 100644
index 000000000000..63bd8b94d285
--- /dev/null
+++ b/packages/styles/scss/components/fluid-date-picker/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'fluid-date-picker';
+@use 'fluid-date-picker';
+
+@include fluid-date-picker.fluid-date-picker;
diff --git a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
index 8f8942c094c6..60c991f425e3 100644
--- a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
+++ b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
@@ -64,7 +64,7 @@
   // invalid
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid,
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area:focus {
-    border-bottom: none;
+    border-bottom: 1px solid transparent;
   }
 
   .#{$prefix}--text-area__divider,

From a6650fd95565a79d30bef8ba0e0c4ed011d25931 Mon Sep 17 00:00:00 2001
From: "carbon-automation[bot]"
 <103539138+carbon-automation[bot]@users.noreply.github.com>
Date: Tue, 8 Nov 2022 20:10:30 +0000
Subject: [PATCH 3/3] chore(release): v11.17.0-rc.2 (#12577)

Co-authored-by: tay1orjones <tay1orjones@users.noreply.github.com>
---
 examples/codesandbox-styles/package.json      |  4 +--
 .../package.json                              |  4 +--
 examples/codesandbox/package.json             |  4 +--
 examples/custom-theme/package.json            |  4 +--
 examples/incremental-migration/package.json   |  4 +--
 examples/light-dark-mode/package.json         |  4 +--
 examples/nextjs/package.json                  |  4 +--
 examples/vite/package.json                    |  4 +--
 packages/carbon-components-react/package.json |  6 ++--
 packages/carbon-components/package.json       |  4 +--
 packages/react/package.json                   |  4 +--
 packages/styles/package.json                  |  2 +-
 www/package.json                              |  4 +--
 yarn.lock                                     | 30 +++++++++----------
 14 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/examples/codesandbox-styles/package.json b/examples/codesandbox-styles/package.json
index 5874dd497917..a8851632cd96 100644
--- a/examples/codesandbox-styles/package.json
+++ b/examples/codesandbox-styles/package.json
@@ -1,7 +1,7 @@
 {
   "name": "codesandbox-styles",
   "private": true,
-  "version": "0.20.0-rc.1",
+  "version": "0.20.0-rc.2",
   "scripts": {
     "develop": "vite"
   },
@@ -9,7 +9,7 @@
     "vite": "^2.8.0"
   },
   "dependencies": {
-    "@carbon/styles": "^1.17.0-rc.1",
+    "@carbon/styles": "^1.17.0-rc.2",
     "sass": "^1.51.0"
   }
 }
diff --git a/examples/codesandbox-with-sass-compilation/package.json b/examples/codesandbox-with-sass-compilation/package.json
index b3ad27d6bfa7..83c14d76cdd9 100644
--- a/examples/codesandbox-with-sass-compilation/package.json
+++ b/examples/codesandbox-with-sass-compilation/package.json
@@ -1,9 +1,9 @@
 {
   "name": "codesandbox-with-sass-compilation",
-  "version": "0.18.0-rc.1",
+  "version": "0.18.0-rc.2",
   "private": true,
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json
index 507f322f9d44..90da411f7d41 100644
--- a/examples/codesandbox/package.json
+++ b/examples/codesandbox/package.json
@@ -1,9 +1,9 @@
 {
   "name": "codesandbox",
-  "version": "0.18.0-rc.1",
+  "version": "0.18.0-rc.2",
   "private": true,
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
diff --git a/examples/custom-theme/package.json b/examples/custom-theme/package.json
index a61a1db719a8..7e54c4f74e58 100644
--- a/examples/custom-theme/package.json
+++ b/examples/custom-theme/package.json
@@ -1,14 +1,14 @@
 {
   "name": "custom-theme",
   "private": true,
-  "version": "0.15.0-rc.1",
+  "version": "0.15.0-rc.2",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
diff --git a/examples/incremental-migration/package.json b/examples/incremental-migration/package.json
index ed67f67e2a59..c5f4107e8dff 100644
--- a/examples/incremental-migration/package.json
+++ b/examples/incremental-migration/package.json
@@ -1,7 +1,7 @@
 {
   "name": "incremental-migration",
   "private": true,
-  "version": "0.17.0-rc.1",
+  "version": "0.17.0-rc.2",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@carbon/icons-react": "^10.49.0",
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "carbon-components": "^10.57.0",
     "carbon-components-react": "^7.57.0",
     "carbon-icons": "^7.0.7",
diff --git a/examples/light-dark-mode/package.json b/examples/light-dark-mode/package.json
index 00efffa95cc4..931367bc7ea5 100644
--- a/examples/light-dark-mode/package.json
+++ b/examples/light-dark-mode/package.json
@@ -1,7 +1,7 @@
 {
   "name": "examples-light-dark",
   "private": true,
-  "version": "0.15.0-rc.1",
+  "version": "0.15.0-rc.2",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
@@ -9,7 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "next": "12.1.4",
     "react": "18.0.0",
     "react-dom": "18.0.0"
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index 53f3f0739a20..90f03bf41296 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "examples-nextjs",
   "private": true,
-  "version": "0.17.0-rc.1",
+  "version": "0.17.0-rc.2",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
@@ -9,7 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "next": "12.1.4",
     "react": "18.0.0",
     "react-dom": "18.0.0"
diff --git a/examples/vite/package.json b/examples/vite/package.json
index 55fd1ef5ef5f..2812cec74d3f 100644
--- a/examples/vite/package.json
+++ b/examples/vite/package.json
@@ -1,14 +1,14 @@
 {
   "name": "vite",
   "private": true,
-  "version": "0.15.0-rc.1",
+  "version": "0.15.0-rc.2",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
diff --git a/packages/carbon-components-react/package.json b/packages/carbon-components-react/package.json
index d00113a6dcd6..75c563fec1c6 100644
--- a/packages/carbon-components-react/package.json
+++ b/packages/carbon-components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "carbon-components-react",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "8.17.0-rc.1",
+  "version": "8.17.0-rc.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -39,8 +39,8 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
-    "@carbon/styles": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
+    "@carbon/styles": "^1.17.0-rc.2",
     "@carbon/telemetry": "0.1.0"
   },
   "devDependencies": {
diff --git a/packages/carbon-components/package.json b/packages/carbon-components/package.json
index 72ff93c7330f..c59d4209401e 100644
--- a/packages/carbon-components/package.json
+++ b/packages/carbon-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "carbon-components",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "11.17.0-rc.1",
+  "version": "11.17.0-rc.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/styles": "^1.17.0-rc.1",
+    "@carbon/styles": "^1.17.0-rc.2",
     "@carbon/telemetry": "0.1.0"
   },
   "devDependencies": {
diff --git a/packages/react/package.json b/packages/react/package.json
index 977629c998c4..26bf20a18619 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,7 +46,7 @@
     "@carbon/feature-flags": "^0.9.0",
     "@carbon/icons-react": "^11.10.0",
     "@carbon/layout": "^11.7.0",
-    "@carbon/styles": "^1.17.0-rc.1",
+    "@carbon/styles": "^1.17.0-rc.2",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 037d63887dd8..0433da3d38b1 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
diff --git a/www/package.json b/www/package.json
index 68cbf02093f9..6bbd54e09e95 100644
--- a/www/package.json
+++ b/www/package.json
@@ -1,7 +1,7 @@
 {
   "name": "www",
   "private": true,
-  "version": "0.26.0-rc.1",
+  "version": "0.26.0-rc.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "@octokit/core": "^4.0.0",
     "@octokit/plugin-retry": "^3.0.9",
     "@octokit/plugin-throttling": "^4.0.0",
diff --git a/yarn.lock b/yarn.lock
index 3903a98c4c2e..98116fddbf8b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2151,7 +2151,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/react@^1.17.0-rc.1, @carbon/react@workspace:packages/react":
+"@carbon/react@^1.17.0-rc.2, @carbon/react@workspace:packages/react":
   version: 0.0.0-use.local
   resolution: "@carbon/react@workspace:packages/react"
   dependencies:
@@ -2166,7 +2166,7 @@ __metadata:
     "@carbon/feature-flags": ^0.9.0
     "@carbon/icons-react": ^11.10.0
     "@carbon/layout": ^11.7.0
-    "@carbon/styles": ^1.17.0-rc.1
+    "@carbon/styles": ^1.17.0-rc.2
     "@carbon/telemetry": 0.1.0
     "@carbon/test-utils": ^10.26.0
     "@carbon/themes": ^11.11.1-rc.0
@@ -2267,7 +2267,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/styles@^1.17.0-rc.1, @carbon/styles@workspace:packages/styles":
+"@carbon/styles@^1.17.0-rc.2, @carbon/styles@workspace:packages/styles":
   version: 0.0.0-use.local
   resolution: "@carbon/styles@workspace:packages/styles"
   dependencies:
@@ -10872,8 +10872,8 @@ __metadata:
     "@babel/plugin-transform-react-constant-elements": ^7.17.12
     "@babel/preset-env": ^7.18.2
     "@babel/preset-react": ^7.17.12
-    "@carbon/react": ^1.17.0-rc.1
-    "@carbon/styles": ^1.17.0-rc.1
+    "@carbon/react": ^1.17.0-rc.2
+    "@carbon/styles": ^1.17.0-rc.2
     "@carbon/telemetry": 0.1.0
     "@carbon/test-utils": ^10.26.0
     "@rollup/plugin-babel": ^5.3.0
@@ -10911,7 +10911,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "carbon-components@workspace:packages/carbon-components"
   dependencies:
-    "@carbon/styles": ^1.17.0-rc.1
+    "@carbon/styles": ^1.17.0-rc.2
     "@carbon/telemetry": 0.1.0
     "@carbon/test-utils": ^10.26.0
     fs-extra: ^10.0.0
@@ -11614,7 +11614,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "codesandbox-styles@workspace:examples/codesandbox-styles"
   dependencies:
-    "@carbon/styles": ^1.17.0-rc.1
+    "@carbon/styles": ^1.17.0-rc.2
     sass: ^1.51.0
     vite: ^2.8.0
   languageName: unknown
@@ -11624,7 +11624,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "codesandbox-with-sass-compilation@workspace:examples/codesandbox-with-sass-compilation"
   dependencies:
-    "@carbon/react": ^1.17.0-rc.1
+    "@carbon/react": ^1.17.0-rc.2
     react: ^17.0.0
     react-dom: ^17.0.0
     react-scripts: 5.0.0
@@ -11636,7 +11636,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "codesandbox@workspace:examples/codesandbox"
   dependencies:
-    "@carbon/react": ^1.17.0-rc.1
+    "@carbon/react": ^1.17.0-rc.2
     react: ^17.0.0
     react-dom: ^17.0.0
     react-scripts: 5.0.0
@@ -12943,7 +12943,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "custom-theme@workspace:examples/custom-theme"
   dependencies:
-    "@carbon/react": ^1.17.0-rc.1
+    "@carbon/react": ^1.17.0-rc.2
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": 1.1.3
@@ -15611,7 +15611,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "examples-light-dark@workspace:examples/light-dark-mode"
   dependencies:
-    "@carbon/react": ^1.17.0-rc.1
+    "@carbon/react": ^1.17.0-rc.2
     eslint: 8.12.0
     next: 12.1.4
     react: 18.0.0
@@ -15624,7 +15624,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "examples-nextjs@workspace:examples/nextjs"
   dependencies:
-    "@carbon/react": ^1.17.0-rc.1
+    "@carbon/react": ^1.17.0-rc.2
     eslint: 8.12.0
     eslint-config-next: 12.1.4
     next: 12.1.4
@@ -18214,7 +18214,7 @@ fsevents@^1.2.7:
   resolution: "incremental-migration@workspace:examples/incremental-migration"
   dependencies:
     "@carbon/icons-react": ^10.49.0
-    "@carbon/react": ^1.17.0-rc.1
+    "@carbon/react": ^1.17.0-rc.2
     carbon-components: ^10.57.0
     carbon-components-react: ^7.57.0
     carbon-icons: ^7.0.7
@@ -32120,7 +32120,7 @@ resolve@^2.0.0-next.3:
   version: 0.0.0-use.local
   resolution: "vite@workspace:examples/vite"
   dependencies:
-    "@carbon/react": ^1.17.0-rc.1
+    "@carbon/react": ^1.17.0-rc.2
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": 1.1.3
@@ -33193,7 +33193,7 @@ resolve@^2.0.0-next.3:
   version: 0.0.0-use.local
   resolution: "www@workspace:www"
   dependencies:
-    "@carbon/react": ^1.17.0-rc.1
+    "@carbon/react": ^1.17.0-rc.2
     "@octokit/core": ^4.0.0
     "@octokit/plugin-retry": ^3.0.9
     "@octokit/plugin-throttling": ^4.0.0