@draftbit/core 46.4.4-f73e6b.2 → 46.4.4-fe82de.2

package/lib/commonjs/components/useAuthState.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAuthState = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const useAuthState = auth => {
   const [error, setError] = React.useState();
   const [value, setValue] = React.useState(auth.currentUser);
@@ -20,18 +16,13 @@ const useAuthState = auth => {
       list();
     };
   }, [auth]);
-
   const signInWithEmailAndPassword = (user, password) => {
     auth.signInWithEmailAndPassword(user, password).then(setValue).catch(setError);
   };
-
   const createUserWithEmailAndPassword = (user, password) => {
     auth.signInWithEmailAndPassword(user, password).then(setValue).catch(setError);
   };
-
   const signOut = () => auth.signOut();
-
   return [value, error, signInWithEmailAndPassword, signOut, createUserWithEmailAndPassword];
 };
-
 exports.useAuthState = useAuthState;

package/lib/commonjs/constants.js

@@ -4,16 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.APPROX_STATUSBAR_HEIGHT = void 0;
-
 var _reactNative = require("react-native");
-
 // @ts-ignore
 const expo = global.__expo;
 const DEFAULT_STATUSBAR_HEIGHT_EXPO = expo !== null && expo !== void 0 && expo.Constants ? expo.Constants.statusBarHeight : 0;
-
 const APPROX_STATUSBAR_HEIGHT = _reactNative.Platform.select({
   android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
   ios: _reactNative.Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
 });
-
 exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;

package/lib/commonjs/hooks.js

@@ -4,21 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePrevious = usePrevious;
-
 var _react = _interopRequireDefault(require("react"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function usePrevious(value) {
   // The ref object is a generic container whose current property is mutable
   // and can hold any value, similar to an instance property on a class
-  const ref = _react.default.useRef(); // Store current value in ref
-
+  const ref = _react.default.useRef();
 
+  // Store current value in ref
   _react.default.useEffect(() => {
     ref.current = value;
-  }, [value]); // Return previous value (happens before update in useEffect above)
-
+  }, [value]);
 
+  // Return previous value (happens before update in useEffect above)
   return ref.current;
 }

package/lib/commonjs/index.js

@@ -213,12 +213,6 @@ Object.defineProperty(exports, "Link", {
     return _Text.Link;
   }
 });
-Object.defineProperty(exports, "Markdown", {
-  enumerable: true,
-  get: function () {
-    return _Markdown.default;
-  }
-});
 Object.defineProperty(exports, "NumberInput", {
   enumerable: true,
   get: function () {
@@ -417,109 +411,55 @@ Object.defineProperty(exports, "withTheme", {
     return _theming.withTheme;
   }
 });
-
 var _Icon = require("./interfaces/Icon");
-
 var _theming = require("./theming");
-
 var _Provider = _interopRequireDefault(require("./Provider"));
-
 var _DefaultTheme = _interopRequireDefault(require("./styles/DefaultTheme"));
-
 var _Text = require("./components/Text");
-
 var _Banner = _interopRequireDefault(require("./components/Banner"));
-
 var _Button = require("./components/Button");
-
 var _CircleImage = _interopRequireDefault(require("./components/CircleImage"));
-
 var _AvatarEdit = _interopRequireDefault(require("./components/AvatarEdit"));
-
 var _Card = _interopRequireDefault(require("./components/Card"));
-
 var _Carousel = _interopRequireDefault(require("./components/Carousel"));
-
 var _Checkbox = require("./components/Checkbox");
-
 var _Container = _interopRequireDefault(require("./components/Container"));
-
 var _Divider = _interopRequireDefault(require("./components/Divider"));
-
 var _FAB = _interopRequireDefault(require("./components/FAB"));
-
 var _FieldSearchBarFull = _interopRequireDefault(require("./components/FieldSearchBarFull"));
-
 var _IconButton = _interopRequireDefault(require("./components/IconButton"));
-
 var _Image = _interopRequireDefault(require("./components/Image"));
-
 var _SVG = _interopRequireDefault(require("./components/SVG"));
-
 var _NumberInput = _interopRequireDefault(require("./components/NumberInput"));
-
 var _ScreenContainer = _interopRequireDefault(require("./components/ScreenContainer"));
-
 var _StarRating = _interopRequireDefault(require("./components/StarRating"));
-
 var _Surface = _interopRequireDefault(require("./components/Surface"));
-
 var _Switch = _interopRequireWildcard(require("./components/Switch"));
-
 var _TextField = _interopRequireDefault(require("./components/TextField"));
-
 var _ToggleButton = _interopRequireDefault(require("./components/ToggleButton"));
-
 var _Touchable = _interopRequireDefault(require("./components/Touchable"));
-
 var _Accordion = require("./components/Accordion");
-
 var _ActionSheet = require("./components/ActionSheet");
-
 var _Swiper = require("./components/Swiper");
-
 var _Layout = require("./components/Layout");
-
 var _index = require("./components/RadioButton/index");
-
 var _CardBlock = _interopRequireDefault(require("./components/CardBlock"));
-
 var _CardContainer = _interopRequireDefault(require("./components/CardContainer"));
-
 var _CardContainerRating = _interopRequireDefault(require("./components/CardContainerRating"));
-
 var _CardInline = _interopRequireDefault(require("./components/CardInline"));
-
 var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
-
 var _HeaderLarge = _interopRequireDefault(require("./components/HeaderLarge"));
-
 var _HeaderMedium = _interopRequireDefault(require("./components/HeaderMedium"));
-
 var _HeaderOverline = _interopRequireDefault(require("./components/HeaderOverline"));
-
 var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
-
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
-
 var _ProgressCircle = _interopRequireDefault(require("./components/ProgressCircle"));
-
 var _RowBodyIcon = _interopRequireDefault(require("./components/RowBodyIcon"));
-
 var _RowHeadlineImageCaption = _interopRequireDefault(require("./components/RowHeadlineImageCaption"));
-
 var _RowHeadlineImageIcon = _interopRequireDefault(require("./components/RowHeadlineImageIcon"));
-
 var _Slider = _interopRequireDefault(require("./components/Slider"));
-
 var _Stepper = _interopRequireDefault(require("./components/Stepper"));
-
 var _useAuthState = require("./components/useAuthState");
-
-var _Markdown = _interopRequireDefault(require("./components/Markdown"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/commonjs/interfaces/Icon.js

@@ -4,19 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.injectIcon = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * This is an interface for a hybrid component.
  *
  * Its public implementation is `@draftbit/native`, and it is injected inside
  * `@draftbit/ui`.
  */
-const injectIcon = (Component, Icon) => props => /*#__PURE__*/_react.default.createElement(Component, { ...props,
+
+const injectIcon = (Component, Icon) => props => /*#__PURE__*/_react.default.createElement(Component, {
+  ...props,
   Icon
 });
-
 exports.injectIcon = injectIcon;

package/lib/commonjs/mappings/Accordion.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Accordion",
   tag: "AccordionGroup",

package/lib/commonjs/mappings/AccordionItem.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Accordion Item",
   tag: "AccordionItem",

package/lib/commonjs/mappings/ActionSheet.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Action Sheet",
   tag: "ActionSheet",

package/lib/commonjs/mappings/ActionSheetCancel.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Action Sheet Cancel",
   tag: "ActionSheetCancel",

package/lib/commonjs/mappings/ActionSheetItem.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Action Sheet Item",
   tag: "ActionSheetItem",

package/lib/commonjs/mappings/ActivityIndicator.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Activity Indicator",
   tag: "ActivityIndicator",

package/lib/commonjs/mappings/AudioPlayer.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Audio Player",
   tag: "AudioPlayer",

package/lib/commonjs/mappings/AvatarEdit.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Avatar Edit",
   tag: "AvatarEdit",

package/lib/commonjs/mappings/Banner.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Banner",
   tag: "Banner",

package/lib/commonjs/mappings/BlurView.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Blur View",
   tag: "BlurView",

package/lib/commonjs/mappings/Button.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA_TRIGGERS = [_types.Triggers.OnPress];
 const SEED_DATA_PROPS = {
   onPress: (0, _types.createActionProp)(),
@@ -32,7 +30,8 @@ const SEED_DATA = [{
   tag: "ButtonOutline",
   category: _types.COMPONENT_TYPES.deprecated,
   stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
-  layout: { ...LAYOUT,
+  layout: {
+    ...LAYOUT,
     backgroundColor: "transparent",
     borderWidth: 1,
     textAlign: "center"
@@ -44,7 +43,8 @@ const SEED_DATA = [{
   tag: "ButtonSolid",
   category: _types.COMPONENT_TYPES.deprecated,
   stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
-  layout: { ...LAYOUT,
+  layout: {
+    ...LAYOUT,
     backgroundColor: "primary",
     textAlign: "center"
   },
@@ -55,7 +55,8 @@ const SEED_DATA = [{
   tag: "Button",
   category: _types.COMPONENT_TYPES.button,
   stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
-  layout: { ...LAYOUT,
+  layout: {
+    ...LAYOUT,
     backgroundColor: "primary",
     textAlign: "center"
   },

package/lib/commonjs/mappings/Card.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Card",
   tag: "Card",
@@ -32,9 +30,10 @@ const SEED_DATA = {
     subtitle: (0, _types.createTextProp)({
       label: "Subtitle",
       description: "Text underneath the title",
-      defaultValue: null // defaultValue: "Edit me in the props panel on the right",
-
+      defaultValue: null
+      // defaultValue: "Edit me in the props panel on the right",
     }),
+
     subtitleStyle: (0, _types.createTextStyle)({
       label: "Subtitle Style"
     }),

package/lib/commonjs/mappings/CardBlock.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA_PROPS = {
   image: {
     group: _types.GROUPS.data,
@@ -75,7 +73,8 @@ const SEED_DATA = [{
   tag: "CardBlock",
   description: "An elevated card with a title and description, that takes up one third of its container.",
   category: _types.COMPONENT_TYPES.card,
-  props: { ...SEED_DATA_PROPS,
+  props: {
+    ...SEED_DATA_PROPS,
     numColumns: (0, _types.createNumColumnsType)({
       defaultValue: 1
     })
@@ -85,7 +84,8 @@ const SEED_DATA = [{
   tag: "CardBlock",
   description: "An elevated card with a title and description, that takes up one half of its container.",
   category: _types.COMPONENT_TYPES.card,
-  props: { ...SEED_DATA_PROPS,
+  props: {
+    ...SEED_DATA_PROPS,
     icon: {
       group: _types.GROUPS.basic,
       label: "Icon",
@@ -106,7 +106,8 @@ const SEED_DATA = [{
   description: "An elevated card with a title and description, that takes up the full width its container.",
   category: _types.COMPONENT_TYPES.card,
   stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
-  props: { ...SEED_DATA_PROPS,
+  props: {
+    ...SEED_DATA_PROPS,
     icon: {
       group: _types.GROUPS.basic,
       label: "Icon",

package/lib/commonjs/mappings/CardContainer.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA_PROPS = {
   image: {
     label: "Image",
@@ -52,9 +50,7 @@ const SEED_DATA_PROPS = {
     label: "Icon",
     description: "Icon to display on the top right",
     formType: _types.FORM_TYPES.icon,
-    propType: _types.PROP_TYPES.STRING
-    /* OR ASSET TODO TEST ME */
-    ,
+    propType: _types.PROP_TYPES.STRING /* OR ASSET TODO TEST ME */,
     defaultValue: null,
     editable: true,
     required: false,
@@ -89,7 +85,8 @@ const SEED_DATA = [{
   category: _types.COMPONENT_TYPES.card,
   stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
   layout: null,
-  props: { ...SEED_DATA_PROPS,
+  props: {
+    ...SEED_DATA_PROPS,
     numColumns: (0, _types.createNumColumnsType)({
       defaultValue: 2
     })
@@ -101,7 +98,8 @@ const SEED_DATA = [{
   category: _types.COMPONENT_TYPES.card,
   stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
   layout: null,
-  props: { ...SEED_DATA_PROPS,
+  props: {
+    ...SEED_DATA_PROPS,
     numColumns: (0, _types.createNumColumnsType)({
       defaultValue: 3
     })

package/lib/commonjs/mappings/CardContainerRating.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA_PROPS = {
   image: {
     group: _types.GROUPS.data,
@@ -92,7 +90,8 @@ const SEED_DATA = [{
   stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
   preview_image_url: "{CLOUDINARY_URL}/Card_ContainerRating_2col.png",
   supports_list_render: true,
-  props: { ...SEED_DATA_PROPS,
+  props: {
+    ...SEED_DATA_PROPS,
     numColumns: {
       label: "Number of Columns",
       description: "Numbre of columns",
@@ -113,7 +112,8 @@ const SEED_DATA = [{
   stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
   preview_image_url: "{CLOUDINARY_URL}/Card_ContainerRating_3col.png",
   supports_list_render: true,
-  props: { ...SEED_DATA_PROPS,
+  props: {
+    ...SEED_DATA_PROPS,
     numColumns: {
       label: "Number of Columns",
       description: "Numbre of columns",

package/lib/commonjs/mappings/CardContainerShortImage.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = [{
   name: "Short Card (Left)",
   tag: "CardContainerShortImage",

package/lib/commonjs/mappings/CardInline.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Inline Card",
   tag: "CardInline",

package/lib/commonjs/mappings/Carousel.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = [{
   name: "Carousel",
   tag: "Carousel",

package/lib/commonjs/mappings/Checkbox.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Checkbox",
   tag: "Checkbox",

package/lib/commonjs/mappings/CheckboxGroup.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Checkbox Group",
   tag: "CheckboxGroup",

package/lib/commonjs/mappings/CheckboxRow.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Checkbox Row",
   tag: "CheckboxRow",

package/lib/commonjs/mappings/CircleImage.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Circle Image",
   tag: "CircleImage",

package/lib/commonjs/mappings/Container.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Container",
   tag: "Container",

package/lib/commonjs/mappings/CustomCode.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA = {
   name: "Custom Code",
   tag: "CustomCode",

package/lib/commonjs/mappings/DatePicker.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SEED_DATA = void 0;
-
 var _types = require("@draftbit/types");
-
 const SEED_DATA_PROPS = {
   label: {
     label: "Label",
@@ -18,6 +16,12 @@ const SEED_DATA_PROPS = {
     required: true,
     group: _types.GROUPS.data
   },
+  labelSize: (0, _types.createNumberProp)({
+    label: "Label Size"
+  }),
+  labelColor: (0, _types.createColorProp)({
+    label: "Label Color"
+  }),
   mode: {
     label: "Mode",
     description: "Choose between date, time and datetime",
@@ -29,6 +33,12 @@ const SEED_DATA_PROPS = {
     options: ["date", "time", "datetime"],
     group: _types.GROUPS.basic
   },
+  borderColor: (0, _types.createColorProp)({
+    label: "Border Color"
+  }),
+  borderColorActive: (0, _types.createColorProp)({
+    label: "Border Color"
+  }),
   format: {
     label: "Format",
     description: "Create an output format for the date.",
@@ -132,7 +142,8 @@ const SEED_DATA_PROPS = {
     required: false,
     group: _types.GROUPS.basic
   },
-  fieldName: { ..._types.FIELD_NAME,
+  fieldName: {
+    ..._types.FIELD_NAME,
     handlerPropName: "onDateChange",
     valuePropName: "date",
     defaultValue: "date"
@@ -145,7 +156,9 @@ const SEED_DATA = [{
   category: _types.COMPONENT_TYPES.input,
   layout: null,
   triggers: [_types.Triggers.OnDateChange],
-  props: { ...SEED_DATA_PROPS,
+  StylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Size, _types.StylesPanelSections.Typography],
+  props: {
+    ...SEED_DATA_PROPS,
     type: {
       label: "Appearance",
       description: "Type of Datepicker",