@superblocksteam/library 2.0.0-next.97 → 2.0.0-next.99

package/dist/{index-Cfiz5DdU.js → index-D_-27jtA.js}

@@ -1078,11 +1078,6 @@ intentClass$1(Intent$1.SUCCESS);
 intentClass$1(Intent$1.WARNING);
 intentClass$1(Intent$1.DANGER);
 var TEXT_OVERFLOW_ELLIPSIS$1 = "".concat(NS$6, "-text-overflow-ellipsis");
-var BLOCKQUOTE = "".concat(NS$6, "-blockquote");
-var CODE = "".concat(NS$6, "-code");
-var CODE_BLOCK = "".concat(NS$6, "-code-block");
-var HEADING = "".concat(NS$6, "-heading");
-var LIST = "".concat(NS$6, "-list");
 var BUTTON$1 = "".concat(NS$6, "-button");
 var BUTTON_GROUP = "".concat(BUTTON$1, "-group");
 var BUTTON_SPINNER$1 = "".concat(BUTTON$1, "-spinner");
@@ -1096,7 +1091,6 @@ var INPUT_GROUP$1 = "".concat(INPUT$1, "-group");
 var INPUT_LEFT_CONTAINER$1 = "".concat(INPUT$1, "-left-container");
 var INPUT_ACTION$1 = "".concat(INPUT$1, "-action");
 var RESIZABLE_INPUT_SPAN = "".concat(NS$6, "-resizable-input-span");
-var LABEL = "".concat(NS$6, "-label");
 var MENU$1 = "".concat(NS$6, "-menu");
 var MENU_ITEM$1 = "".concat(MENU$1, "-item");
 var MENU_ITEM_IS_SELECTABLE$1 = "".concat(MENU_ITEM$1, "-is-selectable");
@@ -2690,14 +2684,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-BjTp2_ti.js"
+            "./allPathsLoader-BedT2t1j.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-BHujcI7q.js"
+            "./splitPathsBySizeLoader-C5SxMHH4.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -3184,24 +3178,6 @@ function renderButtonContents$1(props2) {
     React.createElement(Icon$3, { key: "rightIcon", icon: rightIcon })
   );
 }
-function htmlElement(tagName, tagClassName) {
-  return React.forwardRef(function(props2, ref2) {
-    var className = props2.className, children = props2.children, htmlProps = __rest$B(props2, ["className", "children"]);
-    return React.createElement(tagName, __assign$2(__assign$2({}, htmlProps), { className: classNames(tagClassName, className), ref: ref2 }), children);
-  });
-}
-htmlElement("h1", HEADING);
-htmlElement("h2", HEADING);
-htmlElement("h3", HEADING);
-htmlElement("h4", HEADING);
-htmlElement("h5", HEADING);
-htmlElement("h6", HEADING);
-htmlElement("blockquote", BLOCKQUOTE);
-htmlElement("code", CODE);
-htmlElement("pre", CODE_BLOCK);
-var Label = htmlElement("label", LABEL);
-htmlElement("ol", LIST);
-htmlElement("ul", LIST);
 function _extends$5() {
   return _extends$5 = Object.assign ? Object.assign.bind() : function(n2) {
     for (var e3 = 1; e3 < arguments.length; e3++) {
@@ -48906,18 +48882,13 @@ const BUTTON_PADDING = {
   top: { mode: "px", value: 9 },
   bottom: { mode: "px", value: 9 }
 };
-const DROPDOWN_PADDING = {
-  left: Dim.px(10),
-  right: Dim.px(10),
-  top: Dim.px(4),
-  bottom: Dim.px(4)
-};
 const INPUT_PADDING = {
   left: Dim.px(10),
   right: Dim.px(10),
   top: Dim.px(8),
   bottom: Dim.px(8)
 };
+const DROPDOWN_PADDING = INPUT_PADDING;
 const KEY_VALUE_PADDING = {
   left: Dim.px(20),
   right: Dim.px(20),
@@ -118269,6 +118240,16 @@ const labelTextStyle = () => textStyleProp({
   }
 }).default(() => ({
   variant: DEFAULT_INPUT_WIDGET_LABEL_STYLE_VARIANT,
+  textColor: {
+    default: Theme.colors.neutral700
+  }
+}));
+const inputTextStyle = () => textStyleProp({
+  propertiesPanel: {
+    label: "Input style"
+  }
+}).default(() => ({
+  variant: DEFAULT_INPUT_WIDGET_INPUT_STYLE_VARIANT,
   textColor: {
     default: Theme.colors.neutral900
   }
@@ -118349,7 +118330,7 @@ function getDefaultBorderRadius() {
   }
   return createBorderRadiusObject(borderRadius2);
 }
-const textStyle$3 = textStyleProp().default(function() {
+const textStyle$1 = textStyleProp().default(function() {
   return {
     variant: "buttonLabel",
     textColor: {
@@ -118403,7 +118384,7 @@ const propertiesDefinition$h = {
         return !!this.icon;
       }
     }),
-    textStyle: textStyle$3,
+    textStyle: textStyle$1,
     backgroundColor: colorProp({
       label: "Background color",
       visibility: "SHOW_NAME",
@@ -125221,7 +125202,7 @@ const getIconPadding = (paddingValue = INPUT_PADDING.right, iconSize = DEFAULT_I
 const DEFAULT_LABEL_WIDTH_IN_PERCENT = 30;
 const DEFAULT_LABEL_WIDTH_IN_PX = 80;
 const WIDGET_PADDING = 1;
-const labelStyleRaw$1 = {
+const labelStyleRaw = {
   vertical: `
     margin: var(--label-margin) var(--label-margin) var(--label-margin) 0;
   `,
@@ -125231,10 +125212,10 @@ const labelStyleRaw$1 = {
 };
 const labelStyle = {
   vertical: Ae$1`
-    ${labelStyleRaw$1.vertical}
+    ${labelStyleRaw.vertical}
   `,
   horizontal: Ae$1`
-    ${labelStyleRaw$1.horizontal}
+    ${labelStyleRaw.horizontal}
   `
 };
 const getLabelWidthCssValue = (dimension) => {
@@ -125685,7 +125666,7 @@ const ControlGroupClassName = styleAsClass`
   &[data-vertical="true"] {
     &&&& {
       label {
-        ${labelStyleRaw$1.vertical}
+        ${labelStyleRaw.vertical}
         flex: 0 0 auto;
         max-width: 100%;
       }
@@ -125702,7 +125683,7 @@ const ControlGroupClassName = styleAsClass`
       align-items: baseline;
 
       label {
-        ${labelStyleRaw$1.horizontal}
+        ${labelStyleRaw.horizontal}
         text-align: left;
         align-self: flex-start;
 
@@ -126469,7 +126450,7 @@ const _InputComponent = class _InputComponent extends React__default.Component {
             "data-disabled": this.props.isDisabled,
             children: [
               this.props.label ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                Label,
+                "label",
                 {
                   className: `${CLASS_NAMES.ELLIPSIS_TEXT} ${this.props.isLoading ? SKELETON : ""} ${this.props.labelClassName ?? CLASS_NAMES.INPUT_LABEL} ${this.props.isDisabled ? CLASS_NAMES.DISABLED_MODIFIER : ""}
               `,
@@ -126767,7 +126748,7 @@ const getCustomValidationProperties = ({
 const getFractionDigitsProperties = ({
   schema
 } = {}) => ({
-  minimumFractionDigits: Prop.number().readAndWrite().propertiesPanel({
+  minDecimals: Prop.number().readAndWrite().propertiesPanel({
     label: "Min decimals",
     helpText: "The minimum number of digits after the decimal separator",
     controlType: "INPUT_TEXT",
@@ -126776,7 +126757,7 @@ const getFractionDigitsProperties = ({
     visibility: "SHOW_NAME",
     defaultOnAdd: () => 1
   }),
-  maximumFractionDigits: Prop.number().readAndWrite().propertiesPanel({
+  maxDecimals: Prop.number().readAndWrite().propertiesPanel({
     label: "Max decimals",
     helpText: "The maximum number of digits after the decimal separator",
     controlType: "INPUT_TEXT",
@@ -126839,16 +126820,6 @@ const textLengthProps = {
     isRemovable: true
   })
 };
-const textStyle$2 = textStyleProp({
-  propertiesPanel: {
-    label: "Input text style"
-  }
-}).default(() => ({
-  variant: DEFAULT_INPUT_WIDGET_INPUT_STYLE_VARIANT,
-  textColor: {
-    default: Theme.colors.neutral900
-  }
-}));
 const propertiesDefinition$d = {
   general: Section.category(PropsPanelCategory.Content).children({
     label: Prop.string().readAndWrite().default("").propertiesPanel({
@@ -126873,7 +126844,7 @@ const propertiesDefinition$d = {
       variants: [
         {
           inputType: Prop.literal(InputTypes.NUMBER),
-          numberFormatting: Prop.string().readAndWrite().default("standard").propertiesPanel({
+          numberFormat: Prop.string().readAndWrite().default("standard").propertiesPanel({
             label: "Number format",
             controlType: "DROP_DOWN",
             options: NUMBER_FORMATTING_OPTIONS,
@@ -126882,7 +126853,7 @@ const propertiesDefinition$d = {
         },
         {
           inputType: Prop.literal(InputTypes.CURRENCY),
-          numberFormatting: Prop.string().readAndWrite().default("standard").propertiesPanel({
+          numberFormat: Prop.string().readAndWrite().default("standard").propertiesPanel({
             label: "Number format",
             controlType: "DROP_DOWN",
             options: NUMBER_FORMATTING_OPTIONS,
@@ -126925,7 +126896,7 @@ const propertiesDefinition$d = {
       controlType: "INPUT_TEXT",
       placeholder: "Input text"
     }),
-    textStyle: textStyle$2,
+    textStyle: inputTextStyle(),
     backgroundColor: colorProp({
       label: "Background",
       helpText: "Changes the color of the background"
@@ -127074,7 +127045,9 @@ const SbInput = registerSbComponent(
       padding: padding2,
       currency,
       currencyCodeDisplay,
-      numberFormatting,
+      numberFormat,
+      minDecimals,
+      maxDecimals,
       labelPosition: labelPosition2,
       label,
       stepper,
@@ -127176,7 +127149,9 @@ const SbInput = registerSbComponent(
         backgroundColor,
         border: border2,
         inputType,
-        numberFormatting,
+        numberFormatting: numberFormat,
+        minimumFractionDigits: minDecimals,
+        maximumFractionDigits: maxDecimals,
         isDisabled,
         placeholder: placeholderText,
         inputClassName: inputClassNames,
@@ -133895,13 +133870,13 @@ const Button$2 = memo(
 Button$2.displayName = "Button";
 Button$2.__ANT_BUTTON = true;
 const DEFAULT_TEXT_WIDGET_TEXT_STYLE_VARIANT = "label";
-const notationProperty = Prop.string().readAndWrite().default("standard").propertiesPanel({
+const numberFormatProperty = Prop.string().readAndWrite().default("standard").propertiesPanel({
   label: "Number format",
   controlType: "DROP_DOWN",
   options: NUMBER_FORMATTING_OPTIONS,
   helpText: "The display format of the number"
 });
-const textStyle$1 = textStyleProp().default(function() {
+const textStyle = textStyleProp().default(function() {
   return {
     variant: DEFAULT_TEXT_WIDGET_TEXT_STYLE_VARIANT,
     textColor: Theme.typographies.label.textColor
@@ -133926,7 +133901,7 @@ const propertiesDefinition$b = {
     })
   }),
   appearance: Section.category(PropsPanelCategory.Appearance).children({
-    textStyle: textStyle$1,
+    textStyle,
     horizontalAlign: Prop.string().readAndWrite().default("left").propertiesPanel({
       label: "Horizontal align",
       helpText: "The horizontal alignment of the text relative to the component width",
@@ -133945,7 +133920,10 @@ const propertiesDefinition$b = {
         { icon: "VERTICAL_TOP", value: "top" },
         { icon: "VERTICAL_CENTER", value: "center" },
         { icon: "VERTICAL_BOTTOM", value: "bottom" }
-      ]
+      ],
+      isVisible: function() {
+        return this.height.mode !== "fit";
+      }
     }),
     wrapText: Prop.boolean().readAndWrite().propertiesPanel({
       label: "Wrap text",
@@ -133996,12 +133974,12 @@ const propertiesDefinition$b = {
               value: item
             }))
           }),
-          notation: notationProperty,
+          numberFormat: numberFormatProperty,
           ...getFractionDigitsProperties()
         },
         {
           textType: Prop.literal("number"),
-          notation: notationProperty,
+          numberFormat: numberFormatProperty,
           ...getFractionDigitsProperties()
         },
         {
@@ -134063,9 +134041,9 @@ const StyledText = styleAsClass`
 `;
 const useText = ({
   text,
-  notation,
-  minimumFractionDigits,
-  maximumFractionDigits,
+  numberFormat,
+  minDecimals,
+  maxDecimals,
   textType,
   currency,
   dateInputFormat,
@@ -134074,19 +134052,14 @@ const useText = ({
   return useMemo$2(() => {
     switch (textType) {
       case "number":
-        return formatNumber(
-          text,
-          notation,
-          minimumFractionDigits,
-          maximumFractionDigits
-        );
+        return formatNumber(text, numberFormat, minDecimals, maxDecimals);
       case "currency":
         return formatCurrency(
           text,
           currency,
-          notation,
-          minimumFractionDigits,
-          maximumFractionDigits
+          numberFormat,
+          minDecimals,
+          maxDecimals
         );
       case "date":
         return formatDate(text, dateInputFormat, dateOutputFormat);
@@ -134095,9 +134068,9 @@ const useText = ({
     }
   }, [
     text,
-    notation,
-    minimumFractionDigits,
-    maximumFractionDigits,
+    numberFormat,
+    minDecimals,
+    maxDecimals,
     textType,
     currency,
     dateInputFormat,
@@ -134203,9 +134176,9 @@ const SbText = registerSbComponent(
       name,
       iconPosition,
       icon,
-      notation,
-      minimumFractionDigits,
-      maximumFractionDigits,
+      numberFormat,
+      minDecimals,
+      maxDecimals,
       textType,
       currency,
       dateInputFormat,
@@ -134229,9 +134202,9 @@ const SbText = registerSbComponent(
     });
     const formattedText = useText({
       text,
-      notation,
-      minimumFractionDigits,
-      maximumFractionDigits,
+      numberFormat,
+      minDecimals,
+      maxDecimals,
       textType,
       currency,
       dateInputFormat,
@@ -144483,14 +144456,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-4bTX5Z5s.js"
+            "./allPathsLoader-BK2ifVAz.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-Ba_jngBn.js"
+            "./splitPathsBySizeLoader-B2GV93jI.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -152303,6 +152276,32 @@ const dependencies = { "date-fns": "^2.30.0" };
 const packageJson = {
   dependencies
 };
+function getTagElementSpace(element) {
+  return element.clientWidth + 4;
+}
+const createCssVariablesForPadding = memoizeOne$1(
+  (hasIcon, inputPadding, iconSize) => {
+    const rightIconPadding = (inputPadding == null ? void 0 : inputPadding.right) ?? Dim.px(0);
+    return generatePaddingVariableAssignmentStyleObject({
+      ...inputPadding,
+      left: hasIcon ? getIconPadding(inputPadding == null ? void 0 : inputPadding.left, iconSize) : (inputPadding == null ? void 0 : inputPadding.left) ?? Dimension.px(0),
+      right: rightIconPadding
+    });
+  }
+);
+const getClearableIconRight = memoizeOne$1(
+  (allowClearing, inputPadding, iconSize) => {
+    if (!allowClearing) {
+      return 0;
+    }
+    const iconPadding = getIconPadding(
+      inputPadding == null ? void 0 : inputPadding.right,
+      iconSize ?? DEFAULT_ICON_SIZE$1,
+      false
+    );
+    return iconPadding.value;
+  }
+);
 const DatePickerActionsWrapper = qe$1.div`
   display: flex;
   justify-content: end;
@@ -152419,14 +152418,6 @@ const getTimePrecision = (dateFormat) => {
 const isValidDate = (date4) => {
   return date4 !== "Invalid date" && moment(date4).isValid();
 };
-const labelStyleRaw = {
-  vertical: Ae$1`
-    align-self: flex-start;
-  `,
-  horizontal: Ae$1`
-    flex-basis: var(--label-width);
-  `
-};
 const StyledControlGroup$1 = qe$1(ControlGroup)`
   height: 100%;
   &&& {
@@ -152721,6 +152712,11 @@ class DatePickerComponent extends React__default.Component {
     const isInputFocused = this.state.isOpen;
     const isVertical = !this.props.labelPosition || this.props.labelPosition === "top";
     const errorMessages = this.props.errorMessages;
+    const paddingVarDeclarations = createCssVariablesForPadding(
+      !!this.props.icon,
+      this.props.inputPadding,
+      this.props.iconSize
+    );
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       WidgetErrorsWrapper,
       {
@@ -152753,72 +152749,81 @@ class DatePickerComponent extends React__default.Component {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: FormInputWithErrorWrapperStyle, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  DateInput3,
-                  {
-                    dateFnsLocaleLoader: localeLoader,
-                    timezone: moment.tz.guess(),
-                    formatDate: this.formatDisplayDate,
-                    placeholder: "Select Date",
-                    disabled: this.props.isDisabled,
-                    className: `${CLASS_NAMES.DATEPICKER} ${this.state.isOpen ? CLASS_NAMES.POPOVER_WRAPPER : ""} ${this.shouldWrapTime() ? "sb-datepicker-wrapped-time" : ""}`,
-                    showActionsBar: false,
-                    dayPickerProps: {
-                      formatters: {
-                        formatMonthCaption: (date4) => date4.toLocaleString("default", { month: "short" })
-                      },
-                      onSelect: this.onDayChanged,
-                      footer: this.getPopoverFooter()
-                    },
-                    timePickerProps: !showTime ? void 0 : {
-                      precision: timePrecision,
-                      useAmPm: !this.props.twentyFourHourTime,
-                      onChange: this.onTimeChanged
-                    },
-                    value: currentValue,
-                    initialMonth,
-                    minDate,
-                    maxDate,
-                    closeOnSelection: false,
-                    inputProps: {
-                      className: `${CLASS_NAMES.INPUT} ${this.props.inputClassName ?? ""} ${inputClassNames}`,
-                      style: {
-                        ...this.props.inputStyleOverride,
-                        minHeight: this.props.inputLineHeightPx ? `${this.props.inputLineHeightPx + INPUT_ADDITIONAL_MIN_HEIGHT$1}px` : void 0
-                      },
-                      onClick: this.props.onInputClick,
-                      leftElement: this.props.icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        "div",
-                        {
-                          className: `IconWrapper ${CLASS_NAMES.ICON} ${isInputFocused ? CLASS_NAMES.ACTIVE_MODIFIER : ""} ${this.props.isDisabled || this.props.selectedDate === "" || this.props.selectedDate == null ? CLASS_NAMES.DISABLED_MODIFIER : ""} ${!this.props.isValid ? CLASS_NAMES.ERROR_MODIFIER : ""}`,
-                          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            DynamicSVG,
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "div",
+                {
+                  style: {
+                    ...FormInputWithErrorWrapperStyle,
+                    ...paddingVarDeclarations
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      DateInput3,
+                      {
+                        dateFnsLocaleLoader: localeLoader,
+                        timezone: moment.tz.guess(),
+                        formatDate: this.formatDisplayDate,
+                        placeholder: this.props.placeholder,
+                        disabled: this.props.isDisabled,
+                        className: `${CLASS_NAMES.DATEPICKER} ${this.state.isOpen ? CLASS_NAMES.POPOVER_WRAPPER : ""} ${this.shouldWrapTime() ? "sb-datepicker-wrapped-time" : ""}`,
+                        showActionsBar: false,
+                        dayPickerProps: {
+                          formatters: {
+                            formatMonthCaption: (date4) => date4.toLocaleString("default", { month: "short" })
+                          },
+                          onSelect: this.onDayChanged,
+                          footer: this.getPopoverFooter()
+                        },
+                        timePickerProps: !showTime ? void 0 : {
+                          precision: timePrecision,
+                          useAmPm: !this.props.twentyFourHourTime,
+                          onChange: this.onTimeChanged
+                        },
+                        value: currentValue,
+                        initialMonth,
+                        minDate,
+                        maxDate,
+                        closeOnSelection: false,
+                        inputProps: {
+                          className: `${CLASS_NAMES.INPUT} ${this.props.inputClassName ?? ""} ${inputClassNames}`,
+                          style: {
+                            ...this.props.inputStyleOverride,
+                            minHeight: this.props.inputLineHeightPx ? `${this.props.inputLineHeightPx + INPUT_ADDITIONAL_MIN_HEIGHT$1}px` : void 0
+                          },
+                          onClick: this.props.onInputClick,
+                          leftElement: this.props.icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                            "div",
                             {
-                              iconName: this.props.icon,
-                              size: this.props.iconSize ?? DEFAULT_ICON_SIZE$1
+                              className: `IconWrapper ${CLASS_NAMES.ICON} ${isInputFocused ? CLASS_NAMES.ACTIVE_MODIFIER : ""} ${this.props.isDisabled || this.props.selectedDate === "" || this.props.selectedDate == null ? CLASS_NAMES.DISABLED_MODIFIER : ""} ${!this.props.isValid ? CLASS_NAMES.ERROR_MODIFIER : ""}`,
+                              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                                DynamicSVG,
+                                {
+                                  iconName: this.props.icon,
+                                  size: this.props.iconSize ?? DEFAULT_ICON_SIZE$1
+                                }
+                              )
                             }
-                          )
+                          ) : void 0,
+                          // @ts-expect-error extra props
+                          "data-invalid": !this.props.isValid && !this.state.isOpen,
+                          "data-active": this.state.isOpen,
+                          rightElement: !formatIncludesTimezone(displayFormat) && this.props.showTimezone ? /* @__PURE__ */ jsxRuntimeExports.jsx(Timezone, { timezone: this.displayTimezone }) : void 0,
+                          onChange: this.onInputChanged
+                        },
+                        popoverProps: {
+                          ...this.props.forceOpen ? { isOpen: this.state.isOpen } : {},
+                          onInteraction: this.handleInteraction,
+                          className: CLASS_NAMES.DATEPICKER,
+                          onClose: this.props.onDatePickerClosed,
+                          position: "auto",
+                          rootBoundary: "viewport"
                         }
-                      ) : void 0,
-                      // @ts-expect-error extra props
-                      "data-invalid": !this.props.isValid && !this.state.isOpen,
-                      "data-active": this.state.isOpen,
-                      rightElement: !formatIncludesTimezone(displayFormat) && this.props.showTimezone ? /* @__PURE__ */ jsxRuntimeExports.jsx(Timezone, { timezone: this.displayTimezone }) : void 0,
-                      onChange: this.onInputChanged
-                    },
-                    popoverProps: {
-                      ...this.props.forceOpen ? { isOpen: this.state.isOpen } : {},
-                      onInteraction: this.handleInteraction,
-                      className: CLASS_NAMES.DATEPICKER,
-                      onClose: this.props.onDatePickerClosed,
-                      position: "auto",
-                      rootBoundary: "viewport"
-                    }
-                  }
-                ),
-                inlineError
-              ] })
+                      }
+                    ),
+                    inlineError
+                  ]
+                }
+              )
             ]
           }
         )
@@ -179631,32 +179636,6 @@ Fuse.config = Config;
 {
   register3(ExtendedSearch);
 }
-function getTagElementSpace(element) {
-  return element.clientWidth + 4;
-}
-const createCssVariablesForPadding = memoizeOne$1(
-  (hasIcon, inputPadding, iconSize) => {
-    const rightIconPadding = (inputPadding == null ? void 0 : inputPadding.right) ?? Dim.px(0);
-    return generatePaddingVariableAssignmentStyleObject({
-      ...inputPadding,
-      left: hasIcon ? getIconPadding(inputPadding == null ? void 0 : inputPadding.left, iconSize) : (inputPadding == null ? void 0 : inputPadding.left) ?? Dimension.px(0),
-      right: rightIconPadding
-    });
-  }
-);
-const getClearableIconRight = memoizeOne$1(
-  (allowClearing, inputPadding, iconSize) => {
-    if (!allowClearing) {
-      return 0;
-    }
-    const iconPadding = getIconPadding(
-      inputPadding == null ? void 0 : inputPadding.right,
-      iconSize ?? DEFAULT_ICON_SIZE$1,
-      false
-    );
-    return iconPadding.value;
-  }
-);
 const TAG_HEIGHT = 26;
 const INPUT_SIZE = 36;
 const MORE_TAGS_SIZE = 90;
@@ -180646,17 +180625,6 @@ const normalizeFunction = (val, transformationValue) => {
   }
   return String(val);
 };
-const baseTextStyleProp = createTextStyleCompositeBase();
-const textStyle = textStyleProp({
-  baseProp: baseTextStyleProp
-}).default(
-  () => ({
-    variant: DEFAULT_INPUT_WIDGET_INPUT_STYLE_VARIANT,
-    textColor: {
-      default: Theme.colors.neutral900
-    }
-  })
-);
 const propertiesDefinition$8 = {
   general: Section.category(PropsPanelCategory.Content).children({
     label: Prop.string().readAndWrite().default("").propertiesPanel({
@@ -180711,7 +180679,7 @@ const propertiesDefinition$8 = {
       label: "Placeholder",
       helpText: "Text to be shown inside of placeholder"
     }),
-    textStyle,
+    textStyle: inputTextStyle(),
     loadingAnimation: Prop.boolean().propertiesPanel({
       label: "Loading animation",
       helpText: "Display a loading animation if dependent data is loading"
@@ -181621,20 +181589,25 @@ const propertiesDefinition$6 = {
       controlType: "SWITCH"
     })
   }),
-  layout: Section.category(PropsPanelCategory.Layout).add({
+  layout: Section.category(PropsPanelCategory.Layout).add(padding({ themeValue: DROPDOWN_PADDING, default: DROPDOWN_PADDING })).add({
     ...size$2(),
     ...widthWithoutFit()
   }).add(margin()).add(visible()),
   appearance: Section.category(PropsPanelCategory.Appearance).children({
     labelPosition: labelPosition(),
     labelStyle: labelTextStyle(),
-    // TODO(code-mode): Add color pickers, border controls, etc.
     icon: Prop.string().readAndWrite().default("calendar_today").propertiesPanel({
       label: "Icon",
       helpText: "The icon to display",
       controlType: "ICON_SELECTOR",
-      isRemovable: true
-    })
+      isRemovable: true,
+      visibility: "SHOW_NAME"
+    }),
+    placeholder: Prop.string().default("Select date").propertiesPanel({
+      label: "Placeholder",
+      helpText: "Text to be shown inside of placeholder"
+    }),
+    textStyle: inputTextStyle()
   }),
   interaction: Section.category(PropsPanelCategory.Interaction).children({
     isRequired: Prop.boolean().readAndWrite().default(false).propertiesPanel({
@@ -181769,6 +181742,10 @@ const SbDatePicker = registerSbComponent(
       return Object.values(errors2).filter(Boolean);
     }, [props2.showError, props2.validationErrors]);
     const labelProps = useLabelProps(props2);
+    const inputProps = useInputTypographyProps({
+      backgroundColor: props2.backgroundColor,
+      textStyle: props2.textStyle
+    });
     return /* @__PURE__ */ jsxRuntimeExports.jsx(DatePickerContainer, { ...passThroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       DatePickerComponent,
       {
@@ -181791,7 +181768,10 @@ const SbDatePicker = registerSbComponent(
         showTimezone: !!props2.manageTimezone,
         icon: props2.icon,
         onDatePickerClosed: handleDatePickerClosed,
+        placeholder: props2.placeholder,
         labelStyleOverride: labelProps == null ? void 0 : labelProps.style,
+        inputStyleOverride: inputProps.style,
+        inputPadding: props2.padding,
         labelPosition: props2.labelPosition,
         errorMessagePlacement: props2.errorMessagePlacement,
         errorMessages,
@@ -196718,4 +196698,4 @@ export {
   copyToClipboard as y,
   navigateTo as z
 };
-//# sourceMappingURL=index-Cfiz5DdU.js.map
+//# sourceMappingURL=index-D_-27jtA.js.map