@kitconcept/volto-light-theme 7.3.1 → 8.0.0-alpha.1

package/.changelog.draft

@@ -1,7 +1,7 @@
-## 7.3.1 (2025-10-08)
+## 8.0.0-alpha.1 (2025-10-27)
 
-### Bugfix
+### Breaking
 
-- Several fixes. Update to use Volto 18.28.0. @sneridagh 
+- Transfer all custom code related to slider to the add-on. @sneridagh [#694](https://github.com/kitconcept/volto-light-theme/pull/694)
 
 

package/CHANGELOG.md

@@ -8,6 +8,26 @@
 
 <!-- towncrier release notes start -->
 
+## 8.0.0-alpha.1 (2025-10-27)
+
+### Breaking
+
+- Transfer all custom code related to slider to the add-on. @sneridagh [#694](https://github.com/kitconcept/volto-light-theme/pull/694)
+
+## 8.0.0-alpha.0 (2025-10-24)
+
+### Breaking
+
+- Use Volto 19a9. @sneridagh
+  Use `@plone/components` 4.0.0 alpha.
+  Recommended add-ons are not included by default as `peerDependencies`.
+
+  Breaking change: Please, check the [upgrade guide](https://volto-light-theme.readthedocs.io/how-to-guides/upgrade-guide.html) for more information. [#693](https://github.com/kitconcept/volto-light-theme/pull/693)
+
+### Feature
+
+- To reduce the size of the main VLT repository, snapshots for visual regression testing are now stored in a separate repository (kitconcept/vlt-visual-regression). @sneridagh [#690](https://github.com/kitconcept/volto-light-theme/pull/690)
+
 ## 7.3.1 (2025-10-08)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.3.1",
+  "version": "8.0.0-alpha.1",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -45,7 +45,7 @@
     "release-it": "^19.0.3",
     "typescript": "^5.7.3",
     "vitest": "^3.1.2",
-    "@plone/types": "1.4.5"
+    "@plone/types": "2.0.0-alpha.7"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
@@ -57,23 +57,10 @@
     "react-aria-components": "^1.7.0",
     "react-colorful": "^5.6.1",
     "uuid": "^11.0.0",
-    "@plone/components": "^3.0.2"
+    "@plone/components": "^4.0.0-alpha.1"
   },
   "peerDependencies": {
-    "@eeacms/volto-accordion-block": "^10.4.6",
-    "@kitconcept/volto-banner-block": "^1.1.0",
-    "@kitconcept/volto-bm3-compat": "^1.0.0-alpha.1",
-    "@kitconcept/volto-button-block": "^4.0.0-alpha.0",
-    "@kitconcept/volto-carousel-block": "^2.0.0-alpha.3",
-    "@kitconcept/volto-dsgvo-banner": "^2.5.1",
-    "@kitconcept/volto-heading-block": "^2.5.0",
-    "@kitconcept/volto-highlight-block": "^4.4.0",
-    "@kitconcept/volto-introduction-block": "^1.1.0",
-    "@kitconcept/volto-logos-block": "^3.0.0-alpha.1",
-    "@kitconcept/volto-separator-block": "^4.2.1",
-    "@kitconcept/volto-slider-block": "^6.4.0",
-    "@plonegovbr/volto-social-media": "^2.0.0-alpha.10",
-    "classnames": "^2.2.6",
+    "classnames": "^2.5.1",
     "lodash": "4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/components/Blocks/Block/Edit.jsx

@@ -151,7 +151,7 @@ export class Edit extends Component {
    */
   render() {
     const { blocksConfig = config.blocks.blocksConfig } = this.props;
-    const { editable, type } = this.props;
+    const { editable, type, isContainer: parentIsContainer } = this.props;
     const required = isBoolean(this.props.data.required)
       ? this.props.data.required
       : includes(config.blocks.requiredBlocks, type);
@@ -275,6 +275,7 @@ export class Edit extends Component {
                 selected: this.props.selected || this.props.multiSelected,
                 multiSelected: this.props.multiSelected,
                 hovered: this.props.hovered === this.props.id,
+                error: !!this.props.blocksErrors?.[this.props.id],
               },
             )}
             ref={this.blockNode}
@@ -291,6 +292,7 @@ export class Edit extends Component {
                 {...this.props}
                 blockNode={this.blockNode}
                 data={this.props.data}
+                className={cx({ contained: parentIsContainer })}
               />
             </MaybeWrap>
 
@@ -433,6 +435,7 @@ export class Edit extends Component {
               selected: this.props.selected || this.props.multiSelected,
               multiSelected: this.props.multiSelected,
               hovered: this.props.hovered === this.props.id,
+              error: !!this.props.blocksErrors?.[this.props.id],
             })}
             // END CUSTOMIZATION
             style={{ outline: 'none' }}

package/src/components/Blocks/Block/EditBlockWrapper.jsx

@@ -21,9 +21,13 @@ import BlockChooserButton from '@plone/volto/components/manage/BlockChooser/Bloc
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const messages = defineMessages({
-  delete: {
-    id: 'delete',
-    defaultMessage: 'delete',
+  delete_block: {
+    id: 'delete_block',
+    defaultMessage: 'delete {type} block',
+  },
+  drag_block: {
+    id: 'drag_block',
+    defaultMessage: 'drag {type} block',
   },
 });
 
@@ -99,6 +103,7 @@ const EditBlockWrapper = (props) => {
           }}
           {...draginfo.dragHandleProps}
           className="drag handle wrapper"
+          aria-label={intl.formatMessage(messages.drag_block, { type })}
         >
           <Icon name={dragSVG} size="18px" />
         </div>
@@ -111,7 +116,7 @@ const EditBlockWrapper = (props) => {
               basic
               onClick={() => onDeleteBlock(block, true)}
               className="delete-button"
-              aria-label={intl.formatMessage(messages.delete)}
+              aria-label={intl.formatMessage(messages.delete_block, { type })}
             >
               <Icon name={trashSVG} size="18px" />
             </Button>

package/src/components/Blocks/Image/ImageSidebar.jsx

@@ -11,7 +11,15 @@ import imageSVG from '@plone/volto/icons/image.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const ImageSidebar = (props) => {
-  const { blocksConfig, data, block, onChangeBlock } = props;
+  const {
+    blocksConfig,
+    blocksErrors,
+    data,
+    block,
+    onChangeBlock,
+    navRoot,
+    contentType,
+  } = props;
   const intl = useIntl();
   const schema = ImageSchema({ formData: data, intl });
   // START CUSTOMIZATION
@@ -26,6 +34,7 @@ const ImageSidebar = (props) => {
         </h2>
         <Button.Group>
           <Button
+            type="button"
             title={intl.formatMessage(messages.clear)}
             basic
             disabled={!data.url}
@@ -107,6 +116,9 @@ const ImageSidebar = (props) => {
         formData={data}
         block={block}
         blocksConfig={blocksConfig}
+        navRoot={navRoot}
+        contentType={contentType}
+        errors={blocksErrors}
       />
     </>
   );

package/src/components/Blocks/Slider/schema.js

@@ -1,41 +1,11 @@
-import { defineMessages } from 'react-intl';
 import { defaultStylingSchema } from '../schema';
 
-const messages = defineMessages({
-  flagAlign: {
-    id: 'Flag align',
-    defaultMessage: 'Align',
-  },
-  buttonText: {
-    id: 'Button text',
-    defaultMessage: 'Button text',
-  },
-  hideButton: {
-    id: 'Hide Button',
-    defaultMessage: 'Hide Button',
-  },
-});
-
 export const sliderBlockSchemaEnhancer = ({ formData, schema, intl }) => {
   defaultStylingSchema({ schema, formData, intl });
 
-  schema.properties.slides.schema.fieldsets[0].fields.push('buttonText');
-  schema.properties.slides.schema.properties.buttonText = {
-    title: intl.formatMessage(messages.buttonText),
-  };
-  schema.properties.slides.schema.fieldsets[0].fields.push('hideButton');
-  schema.properties.slides.schema.properties.hideButton = {
-    title: intl.formatMessage(messages.hideButton),
-    type: 'boolean',
-  };
-
-  schema.properties.slides.schema.fieldsets[0].fields.push('flagAlign');
-  schema.properties.slides.schema.properties.flagAlign = {
-    widget: 'inner_align',
-    title: intl.formatMessage(messages.flagAlign),
-    actions: ['left', 'right'],
-    default: 'left',
-  };
+  // Override flagAlign widget to inner_align
+  // ToDo: Remove when backported to Volto 19
+  schema.properties.slides.schema.properties.flagAlign.widget = 'inner_align';
 
   return schema;
 };

package/src/components/Theme/RenderBlocks.jsx

@@ -80,6 +80,7 @@ const RenderBlocks = (props) => {
                   content={content}
                   data={blockData}
                   blocksConfig={blocksConfig}
+                  isContainer={isContainer}
                 >
                   <Block
                     id={block}

package/src/components/Widgets/ColorPicker.tsx

@@ -1,7 +1,8 @@
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { HexColorPicker, HexColorInput } from 'react-colorful';
 import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components';
-import { ColorSwatch, CloseIcon } from '@plone/components';
+import { ColorSwatch } from '@plone/components';
+import { CloseIcon } from '@plone/components/Icons';
 import ColorContrastChecker from './ColorContrastChecker';
 import config from '@plone/volto/registry';
 

package/src/components/Widgets/ObjectList.tsx

@@ -215,8 +215,14 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
                 intl,
               });
 
-              onChange(id, [...(value || []), dataWithDefaults]);
-              setActiveObject(value?.length || 0);
+              const newValue = [...(value || []), dataWithDefaults];
+
+              onChange(id, newValue);
+
+              // Set active the new object ensuring the state is updated after adding the new item
+              setTimeout(() => {
+                setActiveObject(newValue.length - 1);
+              }, 0);
             }}
           >
             <Icon name={addSVG} size="18px" />

package/src/config/blocks.tsx

@@ -46,8 +46,6 @@ import SearchBlockViewEvent from '../components/Blocks/EventCalendar/Search/Sear
 import SearchBlockEditEvent from '../components/Blocks/EventCalendar/Search/SearchBlockEdit';
 import SearchBlockSchemaEvent from '../components/Blocks/EventCalendar/Search/schema';
 import EventCalenderTemplate from '../components/Blocks/EventCalendar/Search/components/EventTemplate';
-import SliderVariants from '../components/Blocks/Slider/SliderVariants';
-import DefaultBody from '../customizations/@kitconcept/volto-slider-block/components/DefaultBody';
 
 declare module '@plone/types' {
   export interface BlocksConfigData {
@@ -418,24 +416,7 @@ export default function install(config: ConfigType) {
   };
 
   // Slider Block
-  config.blocks.blocksConfig.slider = {
-    ...config.blocks.blocksConfig.slider,
-    variations: [
-      {
-        id: 'default',
-        title: 'Default',
-        isDefault: true,
-        view: DefaultBody,
-      },
-
-      {
-        id: 'simple',
-        title: 'Simple',
-        view: SliderVariants,
-      },
-    ],
-    schemaEnhancer: sliderBlockSchemaEnhancer,
-  };
+  config.blocks.blocksConfig.slider.schemaEnhancer = sliderBlockSchemaEnhancer;
 
   return config;
 }

package/src/theme/blocks/_slider.scss

@@ -113,7 +113,7 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
     position: relative;
   }
 
-  .ui.button {
+  .teaser-item button {
     display: initial;
     padding: 8px 20px;
     border: 1px solid currentColor;
@@ -189,7 +189,7 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
           padding: 60px 20px;
           background: var(--theme-color);
           color: var(--theme-foreground-color);
-          .ui.button,
+          button,
           .title > h2,
           p.slider-description {
             color: var(--theme-foreground-color) !important;
@@ -238,23 +238,8 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
         display: none;
       }
     }
-    .ui.button {
+    button {
       color: var(--theme-foreground-color);
     }
   }
 }
-
-.ui.buttons.refresh.slider button {
-  display: flex;
-  align-items: center;
-  padding: 0.5833em 0.833em;
-  background-color: #e8e8e8 !important;
-  color: rgba(0, 0, 0, 0.6) !important;
-  font-size: 0.85714286rem;
-  font-weight: bold;
-
-  svg {
-    padding: 0 0 0 0.5em;
-    margin-right: 0;
-  }
-}

package/src/components/Blocks/Slider/Data.jsx

@@ -1,161 +0,0 @@
-import { useIntl, defineMessages } from 'react-intl';
-import { useDispatch } from 'react-redux';
-import { BlockDataForm } from '@plone/volto/components/manage/Form';
-import { SliderSchema } from '@kitconcept/volto-slider-block/components/schema';
-import { toast } from 'react-toastify';
-import Icon from '@plone/volto/components/theme/Icon/Icon';
-import Toast from '@plone/volto/components/manage/Toast/Toast';
-import { getContent } from '@plone/volto/actions/content/content';
-import isEmpty from 'lodash/isEmpty';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
-import { Button } from 'semantic-ui-react';
-import reloadSVG from '@plone/volto/icons/reload.svg';
-import { messages as defaultMessages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
-import cloneDeep from 'lodash/cloneDeep';
-
-const messages = defineMessages({
-  resetSlider: {
-    id: 'Reset the block',
-    defaultMessage: 'Reset the block',
-  },
-  refreshSlider: {
-    id: 'Refresh source content',
-    defaultMessage: 'Refresh source content',
-  },
-  invalidSlider: {
-    id: 'Invalid Slider source',
-    defaultMessage: 'Invalid Slider source',
-  },
-});
-
-function getImageField(resp) {
-  if (!resp) return null;
-
-  if (resp.preview_image_link) return 'preview_image_link';
-  if (resp.preview_image) return 'preview_image';
-  if (resp.image) return 'image';
-
-  return null;
-}
-
-const SliderData = (props) => {
-  const {
-    block,
-    blocksConfig,
-    data,
-    onChangeBlock,
-    navRoot,
-    contentType,
-    activeObject,
-  } = props;
-  const dispatch = useDispatch();
-  const intl = useIntl();
-  const schema = SliderSchema({ ...props, intl });
-
-  const dataTransformer = (resp, data, activeObject) => {
-    let hrefData = {
-      '@id': flattenToAppURL(resp['@id']),
-      '@type': resp?.['@type'],
-      Description: resp?.description,
-      Title: resp.title,
-      hasPreviewImage: getImageField(resp) ? true : false,
-      head_title: resp.head_title ?? null,
-      image_field: getImageField(resp),
-      image_scales: {
-        preview_image: [resp?.preview_image],
-        image: [resp?.image],
-        preview_image_link: resp?.preview_image_link
-          ? [
-              {
-                ...resp?.preview_image_link?.['image_scales']?.image?.[0],
-                base_path: resp?.preview_image_link?.['@id'],
-              },
-            ]
-          : [],
-      },
-      title: resp.title,
-    };
-
-    const updatedSlides = cloneDeep(data.slides);
-
-    updatedSlides[activeObject] = {
-      '@id': data.slides[activeObject]['@id'],
-      description: resp?.description,
-      title: resp?.title,
-      flagAlign: data.slides[activeObject]?.flagAlign,
-      href: [hrefData],
-    };
-    return {
-      ...data,
-      slides: updatedSlides,
-    };
-  };
-
-  const refresh = () => {
-    if (data.slides[activeObject]?.href?.[0]?.['@id']) {
-      dispatch(
-        getContent(
-          flattenToAppURL(data.slides[activeObject].href[0]['@id']),
-          null,
-          `${block}-slider-${activeObject}`,
-        ),
-      )
-        .then((resp) => {
-          if (resp) {
-            let blockData = dataTransformer(resp, data, activeObject);
-            onChangeBlock(block, blockData);
-          }
-        })
-        .catch((e) => {
-          toast.error(
-            <Toast
-              error
-              title={props.intl.formatMessage(defaultMessages.error)}
-              content={props.intl.formatMessage(messages.invalidSlider)}
-            />,
-          );
-        });
-    }
-  };
-
-  const ActionButton = (
-    <Button.Group className="refresh slider">
-      <Button
-        aria-label={intl.formatMessage(messages.refreshSlider)}
-        type="button"
-        basic
-        onClick={() => refresh()}
-        disabled={isEmpty(data.slides)}
-      >
-        {intl.formatMessage(messages.refreshSlider)}
-        <Icon name={reloadSVG} size="20px" color="#00000099" />
-      </Button>
-    </Button.Group>
-  );
-
-  const dataAdapter = blocksConfig[data['@type']].dataAdapter;
-
-  return (
-    <BlockDataForm
-      schema={schema}
-      title={schema.title}
-      onChangeField={(id, value) => {
-        dataAdapter({
-          block,
-          data,
-          id,
-          onChangeBlock,
-          value,
-        });
-      }}
-      onChangeBlock={onChangeBlock}
-      formData={data}
-      block={block}
-      actionButton={ActionButton}
-      navRoot={navRoot}
-      contentType={contentType}
-    />
-  );
-};
-
-export default SliderData;

package/src/components/Blocks/Slider/DefaultBody.jsx

@@ -1,153 +0,0 @@
-import React from 'react';
-import { useIntl, defineMessages } from 'react-intl';
-import Icon from '@plone/volto/components/theme/Icon/Icon';
-import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
-import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
-import { Input, Button, Message } from 'semantic-ui-react';
-import { isInternalURL } from '@plone/volto/helpers/Url/Url';
-import cx from 'classnames';
-import navTreeSVG from '@plone/volto/icons/nav.svg';
-import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-import config from '@plone/volto/registry';
-
-const messages = defineMessages({
-  PleaseChooseContent: {
-    id: 'Please choose an existing content as source for this element',
-    defaultMessage:
-      'Please choose an existing content as source for this element',
-  },
-  moreInfo: {
-    id: 'moreInfo',
-    defaultMessage: 'More info',
-  },
-  source: {
-    id: 'Source',
-    defaultMessage: 'Source',
-  },
-  ButtonText: {
-    id: 'Continue reading',
-    defaultMessage: 'Continue reading',
-  },
-});
-
-const DefaultImage = (props) => <img {...props} alt={props.alt || ''} />;
-
-const SliderBody = ({
-  index,
-  onChangeBlock,
-  block,
-  data,
-  dataBlock,
-  isEditMode,
-  openObjectBrowser,
-}) => {
-  const intl = useIntl();
-  const href = data.href?.[0];
-  const image = data.preview_image?.[0];
-
-  const Image = config.getComponent('Image').component || DefaultImage;
-  const { openExternalLinkInNewTab } = config.settings;
-
-  const handleClick = () => {
-    openObjectBrowser({
-      onSelectItem: (url, document) => {
-        dataBlock.slides[index].title = document.Title;
-        dataBlock.slides[index].description = document.Description;
-        dataBlock.slides[index].href = [
-          {
-            '@id': document['@id'],
-            Title: document.Title,
-            Description: document.Description,
-            title: document.Title,
-            image_field: document.image_field,
-            hasPreviewImage: document.hasPreviewImage,
-          },
-        ];
-        onChangeBlock(block, dataBlock);
-      },
-      mode: 'link',
-    });
-  };
-
-  return (
-    <div
-      className={cx('grid-teaser-item top', {
-        'empty-slide': !href && isEditMode,
-      })}
-    >
-      {!href && isEditMode && (
-        <Message>
-          <div className="grid-teaser-item default">
-            <img src={imageBlockSVG} alt="" />
-            <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
-            <div className="toolbar-inner">
-              <Button.Group>
-                <Button onClick={handleClick} icon basic>
-                  <Icon name={navTreeSVG} size="24px" />
-                </Button>
-              </Button.Group>
-              <Input
-                placeholder={`${intl.formatMessage(messages.source)}...`}
-                onClick={handleClick}
-                onFocus={(e) => e.target.blur()}
-              />
-            </div>
-          </div>
-        </Message>
-      )}
-      {href && (
-        <div className="teaser-item top">
-          <MaybeWrap
-            condition={!isEditMode}
-            as={UniversalLink}
-            href={href['@id']}
-            target={
-              data.openLinkInNewTab ||
-              (openExternalLinkInNewTab && !isInternalURL(href['@id']))
-                ? '_blank'
-                : null
-            }
-            tabIndex="-1"
-          >
-            {(href?.hasPreviewImage || href.image_field || image) && (
-              <div className="highlight-image-wrapper gradient">
-                <Image
-                  item={image || href}
-                  imageField={image ? image.image_field : href.image_field}
-                  alt=""
-                  loading="lazy"
-                  responsive={true}
-                />
-              </div>
-            )}
-            {/* START CUSTOMIZATION */}
-            <div
-              className={cx(
-                'teaser-item-title fix-width-issue',
-                `has--slider--flagAlign--${data.flagAlign}`,
-              )}
-            >
-              {/* END CUSTOMIZATION */}
-              <div className="title">
-                {data?.head_title && (
-                  <span className="supertitle">{data?.head_title}</span>
-                )}
-                <h2>{data?.nav_title || data?.title}</h2>
-              </div>
-              <p>{data?.description}</p>
-              {/* START CUSTOMIZATION */}
-              {!data.hideButton && (
-                <Button tabIndex={'-1'}>
-                  {data.buttonText || intl.formatMessage(messages.ButtonText)}
-                </Button>
-              )}
-              {/* END CUSTOMIZATION */}
-            </div>
-          </MaybeWrap>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default SliderBody;

package/src/components/Blocks/Slider/SliderVariants.jsx

@@ -1,152 +0,0 @@
-import React from 'react';
-import { useIntl, defineMessages } from 'react-intl';
-import Icon from '@plone/volto/components/theme/Icon/Icon';
-import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
-import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
-import { Input, Button, Message } from 'semantic-ui-react';
-import { isInternalURL } from '@plone/volto/helpers/Url/Url';
-import cx from 'classnames';
-import navTreeSVG from '@plone/volto/icons/nav.svg';
-import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-import config from '@plone/volto/registry';
-
-const messages = defineMessages({
-  PleaseChooseContent: {
-    id: 'Please choose an existing content as source for this element',
-    defaultMessage:
-      'Please choose an existing content as source for this element',
-  },
-  moreInfo: {
-    id: 'moreInfo',
-    defaultMessage: 'More info',
-  },
-  source: {
-    id: 'Source',
-    defaultMessage: 'Source',
-  },
-  ButtonText: {
-    id: 'Continue reading',
-    defaultMessage: 'Continue reading',
-  },
-});
-
-const DefaultImage = (props) => <img {...props} alt={props.alt || ''} />;
-
-const SliderVariants = ({
-  index,
-  onChangeBlock,
-  block,
-  data,
-  dataBlock,
-  isEditMode,
-  openObjectBrowser,
-}) => {
-  const intl = useIntl();
-  const href = data.href?.[0];
-  const image = data.preview_image?.[0];
-
-  const Image = config.getComponent('Image').component || DefaultImage;
-  const { openExternalLinkInNewTab } = config.settings;
-
-  const handleClick = () => {
-    openObjectBrowser({
-      onSelectItem: (url, document) => {
-        dataBlock.slides[index].title = document.Title;
-        dataBlock.slides[index].description = document.Description;
-        dataBlock.slides[index].href = [
-          {
-            '@id': document['@id'],
-            Title: document.Title,
-            Description: document.Description,
-            title: document.Title,
-            image_field: document.image_field,
-            hasPreviewImage: document.hasPreviewImage,
-          },
-        ];
-        onChangeBlock(block, dataBlock);
-      },
-      mode: 'link',
-    });
-  };
-
-  return (
-    <div
-      className={cx('grid-teaser-item top', {
-        'empty-slide': !href && isEditMode,
-      })}
-    >
-      {!href && isEditMode && (
-        <Message>
-          <div className="grid-teaser-item default">
-            <img src={imageBlockSVG} alt="" />
-            <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
-            <div className="toolbar-inner">
-              <Button.Group>
-                <Button onClick={handleClick} icon basic>
-                  <Icon name={navTreeSVG} size="24px" />
-                </Button>
-              </Button.Group>
-              <Input
-                placeholder={`${intl.formatMessage(messages.source)}...`}
-                onClick={handleClick}
-                onFocus={(e) => e.target.blur()}
-              />
-            </div>
-          </div>
-        </Message>
-      )}
-      {href && (
-        <MaybeWrap
-          condition={!isEditMode}
-          as={UniversalLink}
-          href={href['@id']}
-          className="link-container"
-          target={
-            data.openLinkInNewTab ||
-            (openExternalLinkInNewTab && !isInternalURL(href['@id']))
-              ? '_blank'
-              : null
-          }
-          tabIndex="-1"
-        >
-          <div
-            className={cx(
-              'teaser-item top',
-              `has--slider--flagAlign--${data.flagAlign}`,
-              dataBlock.variation,
-            )}
-          >
-            {(href?.hasPreviewImage || href.image_field || image) && (
-              <div className="highlight-image-wrapper gradient">
-                <Image
-                  item={image || href}
-                  imageField={image ? image.image_field : href.image_field}
-                  alt=""
-                  loading="lazy"
-                  responsive={true}
-                />
-              </div>
-            )}
-            <div className="teaser-item-title fix-width-issue">
-              <div className="title">
-                {data?.head_title && (
-                  <span className="supertitle">{data?.head_title}</span>
-                )}
-                <h2>{data?.nav_title || data?.title}</h2>
-              </div>
-              <p className="slider-description">{data?.description}</p>
-
-              {!data.hideButton && (
-                <Button tabIndex={'-1'}>
-                  {data.buttonText || intl.formatMessage(messages.ButtonText)}
-                </Button>
-              )}
-            </div>
-          </div>
-        </MaybeWrap>
-      )}
-    </div>
-  );
-};
-
-export default SliderVariants;

package/src/components/Blocks/Slider/View.jsx

@@ -1,179 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { Message } from 'semantic-ui-react';
-import useEmblaCarousel from 'embla-carousel-react';
-import Autoplay from 'embla-carousel-autoplay';
-import cx from 'classnames';
-import { defineMessages, useIntl } from 'react-intl';
-import Body from '@kitconcept/volto-slider-block/components/Body';
-import withBlockExtensions from '@plone/volto/helpers/Extensions/withBlockExtensions';
-import {
-  DotButton,
-  NextButton,
-  PrevButton,
-} from '@kitconcept/volto-slider-block/components/DotsAndArrows';
-import teaserTemplate from '@kitconcept/volto-slider-block/icons/teaser-template.svg';
-
-const messages = defineMessages({
-  PleaseChooseContent: {
-    id: 'Please choose an existing content as source for this element',
-    defaultMessage:
-      'Please choose an existing content as source for this element',
-  },
-});
-
-const SliderView = (props) => {
-  const {
-    className,
-    data,
-    isEditMode = false,
-    block,
-    openObjectBrowser,
-    onChangeBlock,
-    slideIndex,
-    setSlideIndex,
-  } = props;
-  const intl = useIntl();
-
-  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
-  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [scrollSnaps, setScrollSnaps] = useState([]);
-  const autoplay =
-    data.autoplayEnabled !== undefined ? data.autoplayEnabled : false;
-  const autoplayOptions = {
-    delay: data.autoplayDelay,
-    jump: data.autoplayJump,
-  };
-  const plugins = isEditMode ? [] : autoplay ? [Autoplay(autoplayOptions)] : [];
-
-  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, plugins);
-
-  const scrollPrev = useCallback(() => {
-    if (emblaApi) {
-      emblaApi.scrollPrev();
-      setSlideIndex && setSlideIndex(selectedIndex - 1);
-    }
-  }, [emblaApi, selectedIndex, setSlideIndex]);
-
-  const scrollNext = useCallback(() => {
-    if (emblaApi) {
-      emblaApi.scrollNext();
-      setSlideIndex && setSlideIndex(selectedIndex + 1);
-    }
-  }, [emblaApi, selectedIndex, setSlideIndex]);
-
-  const scrollTo = useCallback(
-    (index) => {
-      if (emblaApi) {
-        emblaApi.scrollTo(index);
-        setSlideIndex && setSlideIndex(index);
-      }
-    },
-    [emblaApi, setSlideIndex],
-  );
-
-  const onInit = useCallback((emblaApi) => {
-    setScrollSnaps(emblaApi.scrollSnapList());
-  }, []);
-
-  const onSelect = useCallback((emblaApi) => {
-    setSelectedIndex(emblaApi.selectedScrollSnap());
-    setPrevBtnDisabled(!emblaApi.canScrollPrev());
-    setNextBtnDisabled(!emblaApi.canScrollNext());
-  }, []);
-
-  useEffect(() => {
-    if (!emblaApi) return;
-
-    onInit(emblaApi);
-    onSelect(emblaApi);
-    emblaApi.on('reInit', onInit);
-    emblaApi.on('reInit', onSelect);
-    emblaApi.on('select', onSelect);
-  }, [emblaApi, onInit, onSelect]);
-
-  useEffect(() => {
-    // This syncs the current slide with the objectwidget (or other sources
-    // able to access the slider context)
-    // that can modify the SliderContext (and come here via props slideIndex)
-    if (isEditMode) {
-      scrollTo(slideIndex);
-    }
-  }, [slideIndex, scrollTo, isEditMode]);
-
-  const sliderContainerWidth = emblaApi
-    ?.rootNode()
-    .getBoundingClientRect().width;
-
-  return (
-    <>
-      {/* START CUSTOMIZATION */}
-      <div
-        className={cx('block slider', data.variation || 'default', className)}
-        style={{ '--slider-container-width': `${sliderContainerWidth}px` }}
-      >
-        {/* END CUSTOMIZATION */}
-        {(data.slides?.length === 0 || !data.slides) && isEditMode && (
-          <Message>
-            <div className="teaser-item default">
-              <img src={teaserTemplate} alt="" />
-              <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
-            </div>
-          </Message>
-        )}
-        {data.slides?.length > 0 && (
-          <>
-            <div className="slider-wrapper">
-              {!data.hideArrows && data.slides?.length > 1 && (
-                <>
-                  <PrevButton onClick={scrollPrev} disabled={prevBtnDisabled} />
-                  <NextButton onClick={scrollNext} disabled={nextBtnDisabled} />
-                </>
-              )}
-
-              <div className="slider-viewport" ref={emblaRef}>
-                <div className="slider-container">
-                  {data.slides &&
-                    data.slides.map((item, index) => {
-                      return (
-                        <div key={item['@id']} className="slider-slide">
-                          <Body
-                            {...props}
-                            key={item['@id']}
-                            data={item}
-                            isEditMode={isEditMode}
-                            dataBlock={data}
-                            index={index}
-                            block={block}
-                            openObjectBrowser={openObjectBrowser}
-                            onChangeBlock={onChangeBlock}
-                            isActive={selectedIndex === index}
-                          />
-                        </div>
-                      );
-                    })}
-                </div>
-              </div>
-            </div>
-            {data.slides?.length > 1 && (
-              <div className="slider-dots">
-                {scrollSnaps.map((_, index) => (
-                  <DotButton
-                    key={index}
-                    index={index}
-                    onClick={() => scrollTo(index)}
-                    className={'slider-dot'.concat(
-                      index === selectedIndex ? ' slider-dot--selected' : '',
-                    )}
-                  />
-                ))}
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default withBlockExtensions(SliderView);

package/src/components/LanguageSelector/LanguageSelector.jsx

@@ -1,76 +0,0 @@
-/**
- * Language selector component.
- * @module components/LanguageSelector/LanguageSelector
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-
-import { useSelector } from 'react-redux';
-import cx from 'classnames';
-import { find, map } from 'lodash';
-
-import Helmet from '@plone/volto/helpers/Helmet/Helmet';
-import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
-import { toReactIntlLang } from '@plone/volto/helpers/Utils/Utils';
-
-import config from '@plone/volto/registry';
-
-import { defineMessages, useIntl } from 'react-intl';
-
-const messages = defineMessages({
-  switchLanguageTo: {
-    id: 'Switch to',
-    defaultMessage: 'Switch to',
-  },
-});
-
-const LanguageSelector = (props) => {
-  const intl = useIntl();
-  const currentLang = useSelector((state) => state.intl.locale);
-  const translations = useSelector(
-    (state) => state.content.data?.['@components']?.translations?.items,
-  );
-
-  const { settings } = config;
-
-  return settings.isMultilingual ? (
-    <div className="language-selector">
-      {map(settings.supportedLanguages, (lang) => {
-        const translation = find(translations, { language: lang });
-        return (
-          <Link
-            aria-label={`${intl.formatMessage(
-              messages.switchLanguageTo,
-            )} ${langmap[lang].nativeName.toLowerCase()}`}
-            className={cx({ selected: toReactIntlLang(lang) === currentLang })}
-            to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
-            title={langmap[lang].nativeName}
-            onClick={() => {
-              props.onClickAction();
-            }}
-            key={`language-selector-${lang}`}
-          >
-            {langmap[lang].nativeName}
-          </Link>
-        );
-      })}
-    </div>
-  ) : (
-    <Helmet>
-      <html lang={toReactIntlLang(settings.defaultLanguage)} />
-    </Helmet>
-  );
-};
-
-LanguageSelector.propTypes = {
-  onClickAction: PropTypes.func,
-};
-
-LanguageSelector.defaultProps = {
-  onClickAction: () => {},
-};
-
-export default LanguageSelector;

package/src/customizations/@kitconcept/volto-slider-block/components/Data.jsx

@@ -1,11 +0,0 @@
-/**
- * OVERRIDE Data.jsx
- * REASON: Add Refresh source content button.
- * FILE: https://github.com/kitconcept/volto-slider-block/blob/74cb8f01394907ff7b765c74c4a43ceb793c1c95/packages/volto-slider-block/src/components/Data.jsx
- * DATE: 2025-09-11
- * DEVELOPER: @Tishasoumya-02
- */
-
-import Data from '../../../../components/Blocks/Slider/Data';
-
-export default Data;

package/src/customizations/@kitconcept/volto-slider-block/components/DefaultBody.jsx

@@ -1,11 +0,0 @@
-/**
- * OVERRIDE DefaultBody.jsx
- * REASON: Adding Button and flagAlign in slider block.
- * FILE: https://github.com/kitconcept/volto-slider-block/blob/master/src/components/DefaultBody.jsx
- * DATE: 2023-08-02
- * DEVELOPER: @iRohitSingh
- */
-
-import SliderBody from '../../../../components/Blocks/Slider/DefaultBody';
-
-export default SliderBody;

package/src/customizations/@kitconcept/volto-slider-block/components/View.jsx

@@ -1,11 +0,0 @@
-/**
- * OVERRIDE View.jsx
- * REASON: Adding variants.
- * VERSION: 6.3.1
- * DATE: 2025-07-18
- * DEVELOPER: @Tishasoumya-02
- */
-
-import View from '../../../../components/Blocks/Slider/View';
-
-export default View;

package/src/customizations/volto/components/theme/LanguageSelector/LanguageSelector.js

@@ -1,11 +0,0 @@
-/**
- * OVERRIDE LanguageSelector.js
- * REASON: This theme uses a custom pre-@plone/components component
- * SemanticUI-free located at the components folder.
- * To override it, override the @kitconcept/volto-light-theme one instead of
- * this one.
- */
-
-import LanguageSelector from '../../../../../components/LanguageSelector/LanguageSelector';
-
-export default LanguageSelector;